آموزش Ajax بخش پنجم

آموزش Ajax بخش پنجم

توسط amin8505 | گروه مقاله های آموزشی | 1394/07/18

نظرات 0

صفحه ِي سرورِي که توسط چاوا اسکرِيپت فراخوانِي مِيشود, ِيک فاِيل ASP به نام "getcd.aspx" است. بدون استفاده از تکنولوژِي آجاکس, اِين فاِيل ِيک فاِيل XML را اجرا مِي کرد .اما با بکارگِيرِي اِين تکنولوژِي به جاِي اجراِي فاِيل XML ، يک  query را اجرا مِي کند ونتِيجه را به صورت HTML بر مِي گرداند.

اِين کد به زبان C#  نوشته شده است:
<%@ 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:  
 مثال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 براِي استخراج مقدارِي که مِي خواهِيم نشان دهِيم, استفاده مِي کنِيم.
 

 

0 نظر

نظر محترم شما در مورد مقاله های وب سایت برنامه نویسی و پایگاه داده

نظرات محترم شما در خدمات رسانی بهتر ما را یاری می نمایند. لطفا اگر مایل بودید یک نظر ما را مهمان فرمائید. آدرس ایمیل و وب سایت شما نمایش داده نخواهد شد.

حرف 500 حداکثر