آموزش Ajax بخش پنجم
صفحه ِي سرورِي که توسط چاوا اسکرِيپت فراخوانِي مِيشود, ِيک فاِيل ASP به نام "getcd.aspx" است. بدون استفاده از تکنولوژِي آجاکس, اِين فاِيل ِيک فاِيل XML را اجرا مِي کرد .اما با بکارگِيرِي اِين تکنولوژِي به جاِي اجراِي فاِيل XML ، يک query را اجرا مِي کند ونتِيجه را به صورت HTML بر مِي گرداند.
<%@ Import Namespace="System.Xml"%>
<%@Import Namespace="System.Xml.XPath"%>
<%
Response.Expires = -1;
string q = Request.QueryString.Get("q");
string xmlPath = "E:\\TEST\\Example4W3schools\\cd_catalog.xml";
XmlDocument doc = new XmlDocument();
doc.Load(xmlPath);
XmlNodeList nodeList =
doc.SelectNodes("/CATALOG/CD[@Artist='"+q+"']");
foreach (XmlNode X in nodeList)
{
foreach (XmlNode Y in X.ChildNodes)
{
Response.Write("<b>" + Y.Name + " : </b>");
Response.Write(Y.InnerText);
Response.Write("<br />");
}
}
%>
مثال 4: AJAX ResponseXML
همانطور که responseText , ِيک پاسخHTTP رااز نوعstring برمِي گرداند, responseXML پاسخ را از نوع XML بر مِي گرداند .
خصوصِيت ResponseXML ِيک شي XML document برمِي گرداند.قصد دارِيم در اِين مثال نشان دهِيم که چگونه ِيک web page ،اطلاعات را از ِيک دِيتابِيس با استفاده از تکنولوژِي آجاکس واکشي مِي کند.اِين بار داده ِي انتخاب شده از دِيتابِيس به ِيک XMl document تبدِيل مِي شود و مِي توانِيم از DOM براِي استخراج مقدار جهت نشان دادن استفاده کنِيم.
مثال4:
توضِيح مثال:
مثال بالا شامل ِيک فرم HTML است که چندِين عنصر(تگ) <span> جهت نگهدارِي داده و ِيک ليِيک جاوا اسکرِيپت است.
<html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body>
<form action="">
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<b><span id="companyname"></span></b><br />
<span id="contactname"></span><br />
<span id="address"></span>
<span id="city"></span><br/>
<span id="country"></span>
</body>
</html>
اِين فرم HTML ِيک Drop Down Box به نام "customers" دارد.
هنگامِي که کاربر ِيک مشترِي را از drop down boxانتخاب مِي کند, تابعِي به نام "showCustomer()" اجرا مِي شود.روِيداد"onchange" باعث راه اندازِي اجراِي اِين تابع مِي شود. به عبارت دِيگر: هر بار که کاربر مقدار داخلdrop down box را تغِيِير دهد, اِين تابع فراخوانِي مِي شود.
آجاکسJavaScript
در زِير کد جاوا اسکرِيپت نشان داده شده است .اِين کد در فاِيل "selectcustomer_xml.js"ذخِيره شده است.
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="getcustomer_xml.asp";
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)
{
var xmlDoc=xmlHttp.responseXML.documentElement;
document.getElementById("companyname").innerHTML=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
document.getElementById("contactname").innerHTML=
xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
document.getElementById("address").innerHTML=
xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("country").innerHTML=
xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
}
}
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;
}
توابع showCustomer() و GetXmlHttpObject() درست مانند توابع در مثالهاِي قبلي است. تابع statechange() که قبلا توضِيح داده شده است، اِين بار نتاِيج را مانند، ِيک XML document (با responseXML) بر مِي گردانِيم ،واز Dom براِي استخراج مقدارِي که مِي خواهِيم نشان دهِيم, استفاده مِي کنِيم.