masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492282 permainan