آموزش Ajax بخش چهارم
AJAX Server Page
صفحه ِي سرورِي که توسط جاوا اسکرِيپت فراخوانِي شده است، ِيک فاِيل ASP به نام "getcustomer.aspx" است. اِين کد به زبان C# نوشته شده است و نتِيجه را مانند ِيک جدول HTML بر مِي گرداند.
<%
Response.Expires = -1;
System.Data.SqlClient.SqlConnection myConnection = new System.Data.SqlClient.SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=E:\\Class C#\\northwind.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True");
myConnection.Open();
System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(SELECT * FROM CUSTOMERS WHERE CUSTOMERID="+ "'" + Convert.ToString(Request.QueryString.Get("q")) + "'", myConnection);
System.Data.SqlClient.SqlDataReader drEmp =
command.ExecuteReader();
drEmp.Read();
Response.Write("<table>");
v
Response.Write("<tr><td>" );
Response.Write(Convert.ToString(drEmp.GetName(i)));
Response.Write("</td><td>");
Response.Write(Convert.ToString(drEmp.GetValue(i)));
Response.Write( "</td></tr>");
}
Response.Write("</table>");
myConnection.Close();
%>
مثال 4: AJAX XML
آجاکس مِي تواند ارتباط تعاملي و محاوره اِي با ِيک فاِيل XML داشته باشد.در مثال زِيرقصد دارِيم نشان دهِيم چگونه ِيک صفحه ِي web مِي تواند اطلاعات را از ِيک فاِيل XML با استفاده از تکنولوژِي آجاکس واکشي (fetch)کند.
توضِيح مثال:
مثال بالا شامل ِيک فرم 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="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>
همانطور که مِي بِينِيد اِين ِيک فرم HTML با ِيک drop dpwn list به نام"cds" است . پاراگراف پاِيِين فرم شامل ِيک تگ div به نام "txtHint" است. در اِين مثال, از divهمچون مکانِي براِي نگهدارِي اطلاعات بازِيابِي شده از ِيک web server استفاده مِي شود.
وقتِي کاربر داده اِي را انتخاب مِي کند, تابعِي با نام "showCD" فرا خوانِي مِي شود. روِيداد "onchange" راه اندازِي براِي اجراِي اِين تابع است.به عبارت دِيگر: هر بار که که کاربر مقدار باکس drop down list را تغِيِير دهد، تابع showCD فراخوانِي مِي شود.
JavaScript آجاکس
در زِير کد جاوا اسکرِيپت نشان داده شده است . اِين کد در فاِيل "select.js" ذخِيره شده است:
var xmlHttp
function showCD(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="getcd.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)
{
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;
}