أمثلة AJAX مع قواعد البيانات Database

By ·


تستخدم AJAX مع تبادل البيانات من خلال قواعد البيانات .



أمثلة مع قواعد البيانات Database


في المثال التالي يشرح كيف يمكن لصفحة الويب إظهار البيانات من خلال قواعد البيانات باستخدام AJAX :

شاهد المثال المباشر


شرح المثال مع الوظيفة showCustomer()


عند اختيار المستخدم "الزبون" من خلال القائمة المنسدلة في الأعلى سيتم استدعاء الكود showCustomer() . يتم استدعاء الكود من خلال الحدث onchange.
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
/*
يعمل على IE7+, Firefox, Chrome, Opera, Safari
*/
xmlhttp=new XMLHttpRequest();
} else {
/*
يعمل على IE5 و IE6
*/
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}

تعمل الوظيفة showCustomer() كالتالي



  • يفحص اذا تم اختيار الزبون من القائمة .

  • إنشاء كائن XMLHttpRequest .

  • إنشاء function واستدعائه عندما تكون استجابة السيرفر جاهزة .

  • ارسال الطلب الى ملف على السيرفر .

  • لاحظ بأن القيمة q تم إضافتها الى الرابط URL مع محتوى القائمة المنسدلة .





صفحات السيرفر AJAX


ان الصفحة الي تم استدعائها على السيرفر من خلال الجافاسكربت 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("/db/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>")
%>


ليست هناك تعليقات:

إرسال تعليق