AJAX (ASP AJAX)
اینجا «AJAX در ASP» را ساده می کنیم. «ایجکس (AJAX)» یعنی به روزرسانی بخشی از صفحه بدون رفرش کامل. این کار با درخواست های پس زمینه انجام می شود و صفحه روان می ماند؛ مثل وقتی در جستجو، پیشنهادها زنده می آیند.
AJAX چیست؟
AJAX مخفف Asynchronous JavaScript and XML است. اما امروز JSON هم رایج است. «غیربلاک» یعنی صفحه منتظر پاسخ نمی ماند.
مرورگر داده کم می فرستد و پاسخ می گیرد. سپس فقط همان بخش را به روزرسانی می کند. بنابراین سرعت حس می شود.
استانداردهای پشت AJAX
اجزا این هاست: شیء XMLHttpRequest برای تبادل داده؛ جاوااسکریپت و DOM برای نمایش؛ CSS برای استایل؛ و اغلب XML یا JSON برای قالب داده.
نکته: برنامه های AJAX وابسته به پلتفرم نیستند و در مرورگر اجرا می شوند.
نمونه AJAX در ASP: پیشنهاد نام
در این نمونه، هنگام تایپ، تابع جاوااسکریپت درخواست می فرستد و پیشنهادها را می آورد.
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
<\/script>
</head>
<body>
<p><b>Start typing a name:<\/b><\/p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" />
<\/form>
<p>Suggestions: <span id="txtHint"><\/span><\/p>
<\/body>
<\/html>
کُد ASP برای پیشنهادها: gethint.asp
این کُد آرایه ای از نام ها را می گردد و نتیجه را برمی گرداند.
<%
response.expires = -1
Dim a(30)
' Fill array with names
a(1) = "Anna"
a(2) = "Brittany"
a(3) = "Cinderella"
a(4) = "Diana"
a(5) = "Eva"
a(6) = "Fiona"
a(7) = "Gunda"
a(8) = "Hege"
a(9) = "Inga"
a(10) = "Johanna"
a(11) = "Kitty"
a(12) = "Linda"
a(13) = "Nina"
a(14) = "Ophelia"
a(15) = "Petunia"
a(16) = "Amanda"
a(17) = "Raquel"
a(18) = "Cindy"
a(19) = "Doris"
a(20) = "Eve"
a(21) = "Evita"
a(22) = "Sunniva"
a(23) = "Tove"
a(24) = "Unni"
a(25) = "Violet"
a(26) = "Liza"
a(27) = "Elizabeth"
a(28) = "Ellen"
a(29) = "Wenche"
a(30) = "Vicky"
q = UCase(request.querystring("q"))
If Len(q) > 0 Then
hint = ""
For i = 1 To 30
If q = UCase(Mid(a(i), 1, Len(q))) Then
If hint = "" Then
hint = a(i)
Else
hint = hint & " , " & a(i)
End If
End If
Next
End If
If hint = "" Then
response.write("no suggestion")
Else
response.write(hint)
End If
%>
AJAX با پایگاه داده در ASP
کاربر مشتری را از فهرست انتخاب می کند. سپس صفحه با AJAX جزئیات مشتری را می آورد.
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:<\/option>
<option value="ALFKI">Alfreds Futterkiste<\/option>
<option value="NORTS ">North\/South<\/option>
<option value="WOLZA">Wolski Zajazd<\/option>
<\/select>
<\/form>
<div id="txtHint">Customer info will be listed here...<\/div>
کُد ASP برای جزئیات مشتری: getcustomer.asp
این کُد رکورد مشتری را می خواند و جدول HTML برمی گرداند.
<%
response.expires = -1
sql = "SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql = sql & "'" & request.querystring("q") & "'"
Set conn = Server.CreateObject("ADODB.Connection")
conn.Provider = "Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("\/datafolder\/northwind.mdb"))
Set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
response.write("<table>")
Do Until rs.EOF
For Each x In rs.Fields
response.write("<tr><td><b>" & x.name & "<\/b><\/td>")
response.write("<td>" & x.value & "<\/td><\/tr>")
Next
rs.MoveNext
Loop
response.write("<\/table>")
%>
گام های عملی
- ورودی یا انتخاب گر بساز و رویداد بده.
- با XMLHttpRequest درخواست بفرست.
- در ASP داده را آماده و برگردان.
- DOM را با پاسخ سرور به روز کن.
جمع بندی سریع
- AJAX فقط بخش ها را تازه می کند.
- درخواستی سبک بفرست، پاسخ را جاگذاری کن.
- در ASP از ADO برای داده ها استفاده کن.
- برای داده مشترک از الگوهای امن استفاده کن.
برای مباحث نزدیک ببین: Global.asa و نشست ها. همچنین آموزش AJAX در ASP را نشانه گذاری کن.