PHP and AJAX XML Example

AJAX ສາມາດສົມທຽບກັບ ບັນຊີ XML ໃນການສົມທຽບທີ່ມີຄວາມສາມາດ.

AJAX XML ການຄົ້ນຄວ້າ

ໃນການຄົ້ນຄວ້າ AJAX ດ້ວຍ AJAX ພວກເຮົາຈະສະແດງເວັບໄຊການບໍ່ຕ້ອງປ່ຽນບ່ອນ (AJAX) ທີ່ຈະອ່ານຂໍ້ມູນຈາກ ບັນຊີ XML.

ເລືອກ CD ໃນລາຍການດ້ານລຸ່ມທີ່ລາວຫນື່ງ.

ລາຍການຂໍ້ມູນ CD ທີ່ນີ້.

ກໍາໄລຂອງພິມແມ່ນສາມເວັບໄຊ:

  • HTML ຟອມທີ່ງາຍ
  • ຫນື່ງ XML ບັນຊີ
  • ຫນື່ງ JavaScript ບັນຊີ
  • ຫນື່ງ PHP ເວັບໄຊ

HTML ຟອມ

ບັນທາງປະກອບມີສະໜອງ HTML ຟອມ ແລະ ຢູ່ກັບ JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>

ຄວາມຄິດທີ່ປະກອບຕົວ:

ຄືພວກເຈົ້າເຫັນໄດ້ວ່າພວກເຂົາແມ່ນຟອມຮູບພາບ HTML ທີ່ມີລາຍການ "cds".

ວັດສະນະ "p" ພາຍໃຕ້ຟອມຮູບພາບທີ່ມີລາຍການ "txtHint".

ບໍ່ວ່າບັນດາຜູ້ນຳໃຊ້ໄດ້ເລືອກຂໍ້ມູນຈະມີການດຳເນີນການຂອງພະລັງງານ "showCD".ການດຳເນີນຂອງພະລັງງານຖືກຈຸດເລືອກ "onchange".

ອີງຕາມທີ່ພວກເຈົ້າເຫັນໄດ້ວ່າ，ພວກເຂົາແມ່ນພະລັງງານ HTML ທີ່ມີລາຍການຫົວຂໍ້ "cds".

XML ນັ້ນ

XML ນັ້ນແມ່ນ "cd_catalog.xml“.ບັນຊີນີ້ບັນຈຸຂໍ້ມູນກ່ຽວກັບ CD.

JavaScript

ນີ້ແມ່ນລະຫັດສັນຍານ JavaScript ທີ່ບັນຈຸໃນບັນຊີ "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

ຄວາມຄິດທີ່ປະກອບຕົວ:

ວິກິ stateChanged() ແລະ GetXmlHttpObject function ທີ່ບໍ່ແຕກຕ່າງກັນກັບກ່ອນໜ້ານີ້ໃນຂອງຫຼັກວິກິຢູ່ມັນເລື່ອງ ທ່ານສາມາດອົບພົບຄວາມກ່ຽວຂ້ອງໃນຫຼັກວິກິຢູ່ມັນເລື່ອງກ່ອນໜ້ານີ້.

ວິກິ showCD()

ຖ້າໄດ້ເລືອກວັດຖຸໃນລາຍການຕົກລົງ ວິກິຢູ່ມັນເລື່ອງ

  1. ເພີ່ມ GetXmlHttpObject function ເພື່ອສ້າງ XMLHTTP Object
  2. ກຳນົດ URL ທີ່ສົ່ງໄປຫາທະນາຄານ (ບັນຊີເອກະສານ)
  3. ເພີ່ມກຳນົດພາກສາມາດສະແດງໃນລາຍການຕົກລົງ (q) ໃນ URL
  4. ເພີ່ມຈຸດທີ່ບໍ່ມີຢ່າງລຶກການເລື່ອງທີ່ຖືກໃຊ້ໂດຍທະນາຄານ
  5. ເພີ່ມຈຸດມີຫຼັງການລະບາຍເຫດການ stateChanged
  6. ເປີດ XMLHTTP Object ໃນ URL ທີ່ໃຫ້ກຳນົດ
  7. ສົ່ງການຮ້ອງຂໍ HTTP ໄປຫາທະນາຄານ

PHP Page

ເວບໄຂທີ່ຖືກເອິ້ນໂດຍ JavaScript ມັນເປັນເອກະສານ PHP ທີ່ລະອຽດ "getcd.php".

ເວບໄຂນີ້ໄດ້ຖືກຂຽນໂດຍ PHP ທີ່ໃຊ້ XML DOM ເພື່ອເຊື່ອມຕິດ XML ສະໜາມ:cd_catalog.xml"。

ການດຳເນີນການຂອງວິກາກີໂຮບຂໍ້ມູນ XML ແລະການກັບຄືນຜົນງານໃຫ້ເປັນ HTML:

<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
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++)
{ 
//Process only element nodes
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

ການອະທິບາຍຄວາມຈິງ

ການເກີດຂຶ້ນ: ເມື່ອຂໍ້ມູນຈາກ JavaScript ຖືກສົ່ງໄປໃຫ້ PHP ຂາຍ

  1. PHP ສ້າງ XML DOM object ສຳລັບ ສະໜາມ "cd_catalog.xml"
  2. ການຮອບການກວມທັງໝົດ artist element (nodetypes = 1), ຄົ້ນຫາຊື່ທີ່ກັບກັບຂໍ້ມູນທີ່ຖືກສົ່ງມາໂດຍ JavaScript
  3. ຄົ້ນຫາ CD ທີ່ມີ artist ທີ່ກັບກັບ
  4. ການສະແດງຂໍ້ມູນ album ແລະສົ່ງໄປ "txtHint" placeholder