지역 사회 배우다 도구 라이브러리 여가
찾다
한국어

PHP 개발 기본 튜토리얼 AJAX 및 XML

AJAX 및 XML 예:

AJAX는 XML 파일과 대화형으로 통신할 수 있습니다.

다음은 예는 웹 페이지가 AJAX를 통해 XML 파일에서 정보를 읽는 방법을 보여줍니다.

이 예는 세 부분으로 구성됩니다

  • HTML 양식 페이지

  • PHP 페이지

  • XML 파일

HTML 형식 페이지

위 드롭다운 목록에서 사용자가 CD를 선택하면 "showCD()"라는 함수가 실행됩니다. 이 함수는 "onchange" 이벤트에 의해 트리거됩니다.

소스 코드는 1.php를 참조하세요

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCD(str){
	if(str==""){
		document.getElementById("txt").innerHTML="";
		return;
	}
	if(window.XMLHttpRequest){
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
		xmlhttp=new XMLHttpRequest();
	}else{
		//IE6,IE5浏览器执行
		xmlhttp =new ActiveXObject("MIcrosoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4&&xmlhttp.status==200){
			document.getElementById("txt").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<form>
选择一个CD：
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Bonnie Tyler</option>
</select>
</form>
</br>
<div id="txt"><b>选择下拉列表，显示详细信息</b></div>
</body>
</html>

사용자가 드롭다운 목록을 선택한 후. showCD() 함수

ShowCD() 함수를 호출하여 다음 단계를 수행합니다.

  • CD가 선택되었는지 확인

  • XMLHttpRequest 객체 생성

  • 은 서버 응답이 준비되었을 때 실행되는 함수를 생성합니다.

  • 요청을 파일에 보냅니다. server

  • URL(드롭다운 목록의 내용 포함) 끝에 추가된 매개변수(q)에 유의하세요.

PHP 파일

위에서 JavaScript를 통해 호출되는 서버 페이지는 "2.php"라는 이름의 PHP 파일입니다.

PHP 스크립트는 XML 문서 "3.xml"을 로드하고 XML 파일에 대해 쿼리를 실행한 후 결과를 HTML로 반환합니다.

소스 코드는 2.php 참조

<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("3.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
	// 处理元素节点
	if ($x->item($i)->nodeType==1)
	{
		if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
		{
			$y=($x->item($i)->parentNode);
		}
	}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{ 
	// 处理元素节点
	if ($cd->item($i)->nodeType==1)
	{
		echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
		echo($cd->item($i)->childNodes->item(0)->nodeValue);
		echo("<br>");
	}
}
?>

CD 쿼리가 JavaScript에서 PHP 페이지로 전송되면 어떻게 되나요?

  • PHP는 "8_3"의 XML DOM 객체를 생성합니다. .xml" 파일

  • 모든 "artist" 요소(nodetypes = 1)를 반복하고 JavaScript에서 전달한 데이터와 일치하는 이름을 찾습니다

  • CD에 포함된 올바른 아티스트 찾기

  • 앨범 정보를 출력하고 "txtHint" 자리 표시자에 전송

XML 파일

소스 코드는 3.xml 참조

<?xml version="1.0" encoding="ISO-8859-1"?>

<CATALOG>
	<CD>
		<TITLE>Empire Burlesque</TITLE>
		<ARTIST>Bob Dylan</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Columbia</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1985</YEAR>
	</CD>
	<CD>
		<TITLE>Hide your heart</TITLE>
		<ARTIST>Bonnie Tyler</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>CBS Records</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1988</YEAR>
	</CD>
	<CD>
		<TITLE>Greatest Hits</TITLE>
		<ARTIST>Dolly Parton</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>RCA</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1982</YEAR>
	</CD>
	<CD>
		<TITLE>Still got the blues</TITLE>
		<ARTIST>Gary Moore</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Virgin records</COMPANY>
		<PRICE>10.20</PRICE>
		<YEAR>1990</YEAR>
	</CD>
	<CD>
		<TITLE>Eros</TITLE>
		<ARTIST>Eros Ramazzotti</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>BMG</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1997</YEAR>
	</CD>
	<CD>
		<TITLE>One night only</TITLE>
		<ARTIST>Bee Gees</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Polydor</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1998</YEAR>
	</CD>
	<CD>
		<TITLE>Sylvias Mother</TITLE>
		<ARTIST>Dr.Hook</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>CBS</COMPANY>
		<PRICE>8.10</PRICE>
		<YEAR>1973</YEAR>
	</CD>
	<CD>
		<TITLE>Maggie May</TITLE>
		<ARTIST>Rod Stewart</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Pickwick</COMPANY>
		<PRICE>8.50</PRICE>
		<YEAR>1990</YEAR>
	</CD>
	<CD>
		<TITLE>Romanza</TITLE>
		<ARTIST>Andrea Bocelli</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>Polydor</COMPANY>
		<PRICE>10.80</PRICE>
		<YEAR>1996</YEAR>
	</CD>
	<CD>
		<TITLE>When a man loves a woman</TITLE>
		<ARTIST>Percy Sledge</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Atlantic</COMPANY>
		<PRICE>8.70</PRICE>
		<YEAR>1987</YEAR>
	</CD>
	<CD>
		<TITLE>Black angel</TITLE>
		<ARTIST>Savage Rose</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>Mega</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1995</YEAR>
	</CD>
	<CD>
		<TITLE>1999 Grammy Nominees</TITLE>
		<ARTIST>Many</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Grammy</COMPANY>
		<PRICE>10.20</PRICE>
		<YEAR>1999</YEAR>
	</CD>
	<CD>
		<TITLE>For the good times</TITLE>
		<ARTIST>Kenny Rogers</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Mucik Master</COMPANY>
		<PRICE>8.70</PRICE>
		<YEAR>1995</YEAR>
	</CD>
	<CD>
		<TITLE>Big Willie style</TITLE>
		<ARTIST>Will Smith</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Columbia</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1997</YEAR>
	</CD>
	<CD>
		<TITLE>Tupelo Honey</TITLE>
		<ARTIST>Van Morrison</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Polydor</COMPANY>
		<PRICE>8.20</PRICE>
		<YEAR>1971</YEAR>
	</CD>
	<CD>
		<TITLE>Soulsville</TITLE>
		<ARTIST>Jorn Hoel</ARTIST>
		<COUNTRY>Norway</COUNTRY>
		<COMPANY>WEA</COMPANY>
		<PRICE>7.90</PRICE>
		<YEAR>1996</YEAR>
	</CD>
	<CD>
		<TITLE>The very best of</TITLE>
		<ARTIST>Cat Stevens</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Island</COMPANY>
		<PRICE>8.90</PRICE>
		<YEAR>1990</YEAR>
	</CD>
	<CD>
		<TITLE>Stop</TITLE>
		<ARTIST>Sam Brown</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>A and M</COMPANY>
		<PRICE>8.90</PRICE>
		<YEAR>1988</YEAR>
	</CD>
	<CD>
		<TITLE>Bridge of Spies</TITLE>
		<ARTIST>T'Pau</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Siren</COMPANY>
		<PRICE>7.90</PRICE>
		<YEAR>1987</YEAR>
	</CD>
	<CD>
		<TITLE>Private Dancer</TITLE>
		<ARTIST>Tina Turner</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Capitol</COMPANY>
		<PRICE>8.90</PRICE>
		<YEAR>1983</YEAR>
	</CD>
	<CD>
		<TITLE>Midt om natten</TITLE>
		<ARTIST>Kim Larsen</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>Medley</COMPANY>
		<PRICE>7.80</PRICE>
		<YEAR>1983</YEAR>
	</CD>
	<CD>
		<TITLE>Pavarotti Gala Concert</TITLE>
		<ARTIST>Luciano Pavarotti</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>DECCA</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1991</YEAR>
	</CD>
	<CD>
		<TITLE>The dock of the bay</TITLE>
		<ARTIST>Otis Redding</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Atlantic</COMPANY>
		<PRICE>7.90</PRICE>
		<YEAR>1987</YEAR>
	</CD>
	<CD>
		<TITLE>Picture book</TITLE>
		<ARTIST>Simply Red</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>Elektra</COMPANY>
		<PRICE>7.20</PRICE>
		<YEAR>1985</YEAR>
	</CD>
	<CD>
		<TITLE>Red</TITLE>
		<ARTIST>The Communards</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>London</COMPANY>
		<PRICE>7.80</PRICE>
		<YEAR>1987</YEAR>
	</CD>
	<CD>
		<TITLE>Unchain my heart</TITLE>
		<ARTIST>Joe Cocker</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>EMI</COMPANY>
		<PRICE>8.20</PRICE>
		<YEAR>1987</YEAR>
	</CD>
</CATALOG>

이 파일에는 CD 컬렉션에 대한 데이터가 포함되어 있습니다

학습 경험

이 예에는 주로 다음 지식 포인트가 포함됩니다.

  • 양식 기본 사항: 드롭다운 옵션

  • onchange 이벤트: 필드 내용 변경 발생

  • 함수 호출, 함수 값 전송

  • 생성 AJAX XMLHttpRequest 객체, 서버가 응답할 때 실행되는 함수, 서버로 전송 파일 전송 요청 시: 학습 경험은 1-5 참조

  • HTML DOM getElementById() 메소드: 참조를 반환합니다. 지정된 ID를 가진 첫 번째 개체

XML 관련 지식

  • XML DOM 개체 만들기

  • 새 XML DOM 개체에 XML 파일 로드

  • 특정 태그 이름의 객체 가져오기: getElementsByTagName()

  • 특정 요소의 하위 섹션 컬렉션 가져오기: HTML DOM childNodes

  • 첫 번째 버튼 요소의 노드 값 가져오기: HTML DOM nodeValue

  • 본문 요소의 노드 유형 가져오기: HTML DOM nodeType

지속적인 학습
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showCD(str){ if(str==""){ document.getElementById("txt").innerHTML=""; return; } if(window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行 xmlhttp=new XMLHttpRequest(); }else{ //IE6,IE5浏览器执行 xmlhttp =new ActiveXObject("MIcrosoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("txt").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> 选择一个CD： <select name="cds" onchange="showCD(this.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Bonnie Tyler</option> </select> </form> </br> <div id="txt"><b>选择下拉列表，显示详细信息</b></div> </body> </html>
제출하다코드 재설정
이전 섹션 다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

이 강좌를 시청한 학생들도 학습하고 있습니다.

최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)  492969회 재생