PHP နှင့် AJAX responseXML အမှတ်အသား

AJAX ကို XML အမှတ်အသား အဖြစ် အသုံးပြု ရန် အသုံးပြုသည်。

AJAX Database သို့ အသုံးပြု အမှတ်အသား (စာကြည့် အချက်အလက်: အမှတ်အသား အမှုသား မရှိ)

အေအက်စ်ဂျက် အမှတ်အသား တွင် မတ်စ် မြစ် ပုံစံ မှ သတင်း အချက်အလက် ကို ခွင့်တော်မြင့် လုပ်ဆောင် ရန် နှင့် အခြေခံ ကို ပြန်လည် ပြင်ဆင် လုပ်ဆောင် ရန် အသုံးပြုသော ပုံစံ ကို ပြသပါသည်。

ဤ အမှတ်အသား နှင့် အရှိန်ကြား အမှတ်အသား တွင် "PHP AJAX Database" အမှတ်အသား ကို အတူ ကွဲပြားသည်။ ယခု အမှတ်အသား တွင် ကျန်းမာရေး ပြုလုပ် သော ပုံစံ ကို အသုံးပြု၍ responseXML ပုံစံ ကို အသုံးပြု၍ ပြန်လည် သတင်း အချက်အလက် ကို လက်ခံရမည်။

XML စာတမ်း ကို တုန့်ပြန်ခြင်း ပြုခြင်း ကြောင့် စာမူ ကို ပြန်လည် ပြင်ဆင် လုပ်ဆောင် ရန် သို့မဟုတ် ပြသ ရန် သာမန် အသုံးပြုသော PHP တုန့်ပြန်ခြင်း ကဲ့သို့ မပါ။

ဤ အမှတ်အသား တွင် အခြေခံ ကို အသုံးပြု၍ ပုံစံအချက်အလက် များ အသစ် ပြုပြင်ခြင်း ပြုမည်။

ဆိုခဲ့သော နေရာမှ အမည် တစ်ခု ကို ရွေးချယ်ပါ

အသုံးပြုသူ တစ်ဦး ကို ရွေးချယ်ပါ:

　

ဤ လက်ရှိ စာမူ ကို လေးခု အပေါ်လုံး ပါဝင်သည်:

  • MySQL ပုံစံ
  • လက်ရှိ HTML ပုံစံ
  • အက်ယ်လ်စ်စ်
  • PHP 页面

ပုံစံအချက်အလက်

ဤ အမှတ်အသား တွင် အသုံးပြုသော ပုံစံအချက်အလက် ကို လေးခု အပေါ်လုံး ပါဝင်သည်:

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

HTML ပုံစံ

အထူးသဖြင့် အမျိုးသား HTML ပုံစံ တစ်ခု နှင့် JavaScript သို့ ခုံးလွှတ်ခြင်း ပါဝင်သည်:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
အသုံးပြုသူကို ရွေးချယ်ပါ:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>

အကြောင်းအရာဖော်ပြ - HTML ပို့စ်စ်

  • HTML ပို့စ်စ် သည် name အရင်းအမြစ်၏ အမှတ် "users" ဖြင့် အရင်းအမြစ် အမှတ် id နှင့် ကိုက်ညီသော ဆိတ်သွားစားလုံးများ ဖြစ်သည်
  • ပို့စ်စ်အောက်တွင် <span> အရာတွေရှိပြီး အမှတ်အသစ်ကို အခြေခံပြီး သင်္ကျီလုပ်ငန်းကို အသုံးပြုသည်
  • အသုံးပြ�သူသည် အချက်အလက်တစ်ခုကို ရွေးချယ်လျှင် လုပ်ငန်း "showUser()" ကို လုပ်ဆောင်ပြီး အလုပ်လုပ်ခြင်းကို "onchange" အချက်အလက်ဖြင့် စတင်လုပ်ဆောင်သည်

အခြားအဓိပ္ပာယ်ဖော်ပြချက်မှာ အသုံးပြုသူသည် ဆိတ်သွားစားလုံးတွင် အမှတ်အသစ်ကို ပြောင်းလဲလျှင် လုပ်ငန်း showUser() ကို လုပ်ဆောင်ပြီး အမှတ်ပေးထားသော <span> အရာတွင် အကြောင်းအရာကို ထုတ်ဖော်ပြသည်။

အက်ယ်လ်စ်စ်

အက်ယ်လ်စ်စ် သင်္ကျီ "responsexml.js" တွင် သို့မဟုတ် သင်္ကျီလုပ်ငန်းဖြစ်သည်:

var xmlHttp
function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
 var url="responsexml.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")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Age: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>From: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

အမှတ်အသေးစုံ အပြောရိုက်

showUser() 与 GetXmlHttpObject 函数与 PHP နှင့် AJAX MySQL ဘဏ္ဍာင်ဆက်သွယ် 这一节中的例子是相同的。您可以参阅其中的相关解释。

stateChanged() 函数

如果选择了下拉列表中的项目，该函数执行：

  1. 通过使用 responseXML 函数，把 "xmlDoc" 变量定义为一个 XML 文档
  2. 从这个 XML 文档中取回数据，把它们放在正确的 "span" 元素中

PHP 页面

这个由 JavaScript 调用的服务器页面，是一个名为 "responsexml.php" 的简单的 PHP 文件。

该页面由 PHP 编写，并使用 MySQL 数据库。

代码会运行一段针对数据库的 SQL 查询，并以 XML 文档返回结果：

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//A date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: '.mysql_error());
 }
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ".$q."";
$result = mysql_query($sql);}}
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";
mysql_close($con);
?>

အမှတ်အသေးစုံ အပြောရိုက်

JavaScript ဖြင့် ပေးသော အဆိုပါ စုံစမ်းမှု သို့ သွားသော အခါ

  • PHP အခြေခံ မူဌာန အား "text/xml" ဖြင့် သတင်းပေး
  • PHP အခြေခံ မူဌာန အား "no-cache" ဖြင့် သတင်းပေး
  • HTML စာလုံး ဖြင့် သုံးပြီးသော သတင်းပေး $q ပုံစံ
  • PHP နှင့် MySQL ဝန်ဆောင်မှုကို ဖွင့်
  • အချက် id ကို အသိအမှတ်ပြုသော "user" ကို ရှာဖွေ
  • ရပ်တည်ပြီး အယူအယဲအရ အခြေခံ XML မူဌာန ဖြင့် သတင်းပေး