پایپ فون اے جی ایکس ریسپونس ایکس ایم ال مثال

AJAX 可用于以 XML 返回数据库信息。

AJAX Database 转 XML 实例 （测试说明：该实例功能未实现）

在下面的 AJAX 实例中，我们将演示网页如何从 MySQL 数据库中读取信息，把数据转换为 XML 文档，并在不同的地方使用这个文档来显示信息。

本例与上一节中的 "PHP AJAX Database" 这个例子很相似，不过有一个很大的不同：在本例中，我们通过使用 responseXML 函数从 PHP 页面得到的是 XML 形式的数据。

把 XML 文档作为响应来接收，使我们有能力更新页面的多个位置，而不仅仅是接收一个 PHP 输出并显示出来。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਡਾਟਾਬੇਸ ਤੋਂ ਪ੍ਰਾਪਤ ਸੂਚਨਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ <span> ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਾਂਗੇ。

ਡਰਾਪਡਾਉਨ ਲਿਸਟ ਵਿੱਚ ਇੱਕ ਨਾਮ ਚੁਣੋ

ਇੱਕ ਉਪਭੋਗਤਾ ਚੁਣੋ:

　

ਇਸ ਸਤੰਭ ਨੂੰ ਚਾਰ ਤੱਤਾਂ ਤੋਂ ਬਣਾਇਆ ਗਿਆ ਹੈ:

  • ਐੱਮਕਿਊਐੱਲ ਡਾਟਾਬੇਸ
  • ਸਰਲ ਐੱਚਟੀਐੱਮਐੱਲ ਫਾਰਮ
  • JavaScript
  • PHP ਪੰਨਾ

ਡਾਟਾਬੇਸ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਡਾਟਾਬੇਸ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਦਿਖਾਈ ਦੇਵੇਗਾ:

id ਪਹਿਲਾ ਨਾਮ ਪਿਛਲਾ ਨਾਮ ਉਮਰ ਹੋਮਟاون ਜੋਬ
1 ਪੀਟਰ ਗ੍ਰੀਫਿਨ 41 ਕੁਆਹੋਗ ਬਰਵਰੀ
2 ਲੋਇਸ ਗ੍ਰੀਫਿਨ 40 ਨਿਊਪੋਰਟ ਪੀਆਨੋ ਟੀਚਰ
3 ਜੋਸੇਫ ਸਵਾਨਸਨ 39 ਕੁਆਹੋਗ ਪੁਲਿਸ ਅਧਿਕਾਰੀ
4 ਗਲੈਨ ਕੁਆਗਮੀਰ 41 ਕੁਆਹੋਗ ਪਾਇਲਟ

ਐੱਚਟੀਐੱਮਐੱਲ ਫਾਰਮ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਸਰਲ ਐੱਚਟੀਐੱਮਐੱਲ ਫਾਰਮ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਈ ਲਿੰਕ ਸ਼ਾਮਲ ਹੈ:

<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> ਐਲੀਮੈਂਟ ਵਿੱਚ ਨਤੀਜੇ ਨੂੰ ਆਉਟਪੁਟ ਕਰਦਾ ਹੈ。

JavaScript

ਇਹ JavaScript ਕੋਡ "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() ਫੰਕਸ਼ਨ ਨਾਲ پایپ فون اے جی ایکس ایم اے ایس دا دا ڈیٹا بنائیں ਇਸ ਖੰਡ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਉਦਾਹਰਣ ਇੱਕ ਹੀ ਹਨ। ਤੁਸੀਂ ਉਸ ਵਿੱਚ ਸਬੰਧਤ ਵਿਸਥਾਰ ਦੇਖ ਸਕਦੇ ਹੋ。

stateChanged() ਫੰਕਸ਼ਨ

ਜੇਕਰ ਲਾਈਨ ਪਾਲੀਸੀ ਵਿੱਚ ਵਿਸ਼ੇ ਚੁਣਿਆ ਗਿਆ ਹੈ, ਤਾਂ ਇਹ ਫੰਕਸ਼ਨ ਚਲਾਵੇਗਾ:

  1. responseXML ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, "xmlDoc" ਮਾਪਦੰਡ ਨੂੰ ਇੱਕ XML ਦਸਤਾਵੇਜ਼ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ
  2. XML ਦਸਤਾਵੇਜ਼ ਤੋਂ ਡਾਟਾ ਲੈ ਕੇ, ਉਹਨਾਂ ਨੂੰ ਸਹੀ "span" ਏਜੈਂਟ ਵਿੱਚ ਰੱਖੋ

PHP ਪੰਨਾ

ਇਹ ਜਿਸਦੀ ਵਰਤੋਂ JavaScript ਰਾਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਦਾ ਸਰਵਰ ਪੰਨਾ, ਇੱਕ ਸਰਾਹੀਦਾਰ PHP ਫਾਇਲ ਹੈ ਜਿਸਦਾ ਨਾਮ "responsexml.php" ਹੈ。

ਇਹ ਪੰਨਾ PHP ਨਾਲ ਲਿਖਿਆ ਗਿਆ ਹੈ ਅਤੇ MySQL ਡਾਟਾਬੇਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ。

ਕੋਡ ਅਧਿਆਪਕ ਦਾਤਾਵਾਸ ਨੂੰ ਐੱਸਕਿਊਐੱਲ ਕਿਊਰੀ ਚਲਾਵੇਗਾ ਅਤੇ ਨਤੀਜੇ ਨੂੰ ਐਕਸਮਲ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਵਾਪਸ ਦੇਵੇਗਾ:

<?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 = ".$."";
$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 دستاویز کا content-type 'text/xml' رکھنا
  • PHP دستاویز کو 'no-cache' رکھنا، تاکہ کیشنگ کی روک تھام کی جائے
  • HTML پیج کے ذریعے فراہم کردہ ڈاٹا سے $q متغیر کو سٹ
  • PHP کے ذریعے میکسی سرور کے ساتھ کنکشن کھولنا
  • مخصوص آئیڈی والا 'user' پائی جانا
  • XML دستاویز کے ذریعے ڈاٹا نکالنا