AJAX dan XML

Contoh AJAX dan XML:

Contoh berikut akan menunjukkan cara halaman web membaca maklumat daripada fail XML melalui AJAX:

Contoh ini terdiri daripada tiga bahagian

l halaman borang HTML

l halaman PHP

l fail XML

Halaman borang HTML

Apabila pengguna memilih CD dalam senarai juntai bawah di atas, fungsi bernama "showCD()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onchange":

QQ截图20161009174933.png

selepas pengguna memilih menu lungsur senarai. Panggil fungsi showCD()

fungsi ShowCD() untuk melaksanakan langkah berikut:

l Semak sama ada CD dipilih

l Cipta objek XMLHttpRequest

l Cipta Fungsi dilaksanakan apabila respons pelayan sedia

l Hantar permintaan ke fail pada pelayan

l Sila ambil perhatian parameter (q) yang ditambahkan pada penghujung URL ( mengandungi kandungan senarai juntai bawah)

Fail PHP

Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail PHP bernama "2.php".

Skrip PHP memuatkan dokumen XML, "3.xml", menjalankan pertanyaan terhadap fail XML dan mengembalikan hasil dalam HTML:

QQ截图20161009174957.png

Apabila pertanyaan CD dihantar daripada JavaScript ke halaman PHP, apa yang berlaku:

l PHP mencipta objek XML DOM bagi "3.xml " fail

l Gelung melalui semua elemen "artis" (nodetypes = 1), cari nama yang sepadan dengan data yang diluluskan oleh JavaScript

l Cari artis yang betul termasuk dalam CD

l Keluarkan maklumat album dan hantarkannya ke pemegang tempat "txtHint"

fail XML

QQ截图20161009175012.png

fail Mengandungi data tentang koleksi CD

bahagian seterusnya

fail baharu

<!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","8_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>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh