ASP أياكس
تدور AJAX حول تحديث أجزاء من صفحة الويب ، دون إعادة تحميل الصفحة بأكملها.
ما هو اياكس؟
AJAX = JavaScript غير متزامن و XML.
AJAX هي تقنية لإنشاء صفحات ويب سريعة وديناميكية.
يسمح AJAX بتحديث صفحات الويب بشكل غير متزامن من خلال تبادل كميات صغيرة من البيانات مع الخادم وراء الكواليس. هذا يعني أنه من الممكن تحديث أجزاء من صفحة الويب دون إعادة تحميل الصفحة بأكملها.
يجب أن تعيد صفحات الويب الكلاسيكية (التي لا تستخدم AJAX) تحميل الصفحة بأكملها إذا كان يجب تغيير المحتوى.
أمثلة على التطبيقات التي تستخدم AJAX: علامات تبويب خرائط Google و Gmail و Youtube و Facebook.
كيف يعمل AJAX
تعتمد أجاكس على معايير الإنترنت
تعتمد AJAX على معايير الإنترنت ، وتستخدم مزيجًا من:
- كائن XMLHttpRequest (لتبادل البيانات بشكل غير متزامن مع الخادم)
- JavaScript / DOM (لعرض / التفاعل مع المعلومات)
- CSS (لتصميم البيانات)
- XML (غالبًا ما يستخدم كتنسيق لنقل البيانات)
تطبيقات AJAX مستقلة عن المتصفح والنظام الأساسي!
توحي جوجل
أصبح AJAX مشهورًا في 2005 بواسطة Google ، مع Google Suggest.
تستخدم خدمة Google Suggest AJAX لإنشاء واجهة ويب ديناميكية للغاية: عندما تبدأ الكتابة في مربع بحث Google ، يرسل JavaScript الأحرف إلى الخادم ويعيد الخادم قائمة الاقتراحات.
ابدأ باستخدام AJAX اليوم
في برنامج ASP التعليمي الخاص بنا ، سوف نوضح كيف يمكن لـ AJAX تحديث أجزاء من صفحة الويب ، دون إعادة تحميل الصفحة بأكملها. سيتم كتابة البرنامج النصي للخادم بلغة ASP.
إذا كنت ترغب في معرفة المزيد عن AJAX ، فقم بزيارة برنامج AJAX التعليمي الخاص بنا .
مثال AJAX ASP
سيوضح المثال التالي كيف يمكن لصفحة الويب التواصل مع خادم الويب بينما يكتب المستخدم الأحرف في حقل الإدخال:
مثال
Start typing a name in the input field below:
Suggestions:
شرح المثال
في المثال أعلاه ، عندما يكتب المستخدم حرفًا في حقل الإدخال ، يتم تنفيذ وظيفة تسمى "showHint ()".
يتم تشغيل الوظيفة بواسطة حدث onkeyup.
ها هو كود HTML:
مثال
<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 in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
شرح الكود:
أولاً ، تحقق مما إذا كان حقل الإدخال فارغًا (str.length == 0). إذا كان الأمر كذلك ، فامسح محتوى العنصر النائب txtHint واخرج من الوظيفة.
ومع ذلك ، إذا لم يكن حقل الإدخال فارغًا ، فقم بما يلي:
- قم بإنشاء كائن XMLHttpRequest
- قم بإنشاء الوظيفة التي سيتم تنفيذها عندما تكون استجابة الخادم جاهزة
- أرسل الطلب إلى ملف ASP (gethint.asp) على الخادم
- لاحظ أنه تمت إضافة معلمة q gethint.asp؟ q = "+ str
- يحتفظ متغير str بمحتوى حقل الإدخال
ملف ASP - "gethint.asp"
يتحقق ملف ASP من مجموعة من الأسماء ، ويعيد الاسم (الأسماء) المطابق إلى المستعرض:
<%
response.expires=-1
dim a(30)
'Fill up 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"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
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
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
يمكن استخدام AJAX للتواصل التفاعلي مع قاعدة البيانات.
مثال على قاعدة بيانات أجاكس
سيوضح المثال التالي كيف يمكن لصفحة الويب جلب المعلومات من قاعدة بيانات باستخدام AJAX:
مثال
شرح المثال - صفحة HTML
عندما يختار المستخدم أحد العملاء في القائمة المنسدلة أعلاه ، يتم تنفيذ وظيفة تسمى "showCustomer ()". يتم تشغيل الوظيفة بواسطة حدث "onchange":
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<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>
</body>
</html>
شرح كود المصدر:
إذا لم يتم تحديد أي عميل (str.length == 0) ، فإن الوظيفة تمسح محتوى العنصر النائب txtHint وتخرج من الوظيفة.
إذا تم تحديد عميل ، فستقوم الوظيفة showCustomer () بتنفيذ ما يلي:
- قم بإنشاء كائن XMLHttpRequest
- قم بإنشاء الوظيفة التي سيتم تنفيذها عندما تكون استجابة الخادم جاهزة
- أرسل الطلب إلى ملف موجود على الخادم
- لاحظ أنه تمت إضافة المعامل (q) إلى عنوان URL (مع محتوى القائمة المنسدلة)
ملف ASP
الصفحة الموجودة على الخادم التي تم استدعاؤها بواسطة JavaScript أعلاه هي ملف ASP يسمى "getcustomer.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>")
%>