قاعدة بيانات أجاكس
أجاكس يمكن استخدامها للاتصال تفاعلية مع قاعدة البيانات.
مثيل قاعدة البيانات أجاكس
سوف تظهر الأمثلة التالية كيف يمكن لصفحة ويب عن طريق أجاكس قراءة المعلومات من قاعدة البيانات:
أمثلة
Customer info will be listed here...
أمثلة توضح - صفحة HTML
عندما يقوم المستخدم في القائمة المنسدلة أعلاه، اختيار العملاء، وأعدموا المسمى "showCustomer) (" وظيفة. يتم تشغيل هذه الوظيفة عن طريق الحدث "عند_التغيير":
<!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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.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>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.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>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
وأوضح المصدر:
إذا لم يكن لاختيار العملاء (str.length == 0)، ثم وظيفة واضحة txtHint نائبا، ومن ثم الخروج من وظيفة.
إذا قمت بتحديد العملاء، وظيفة ثم showCustomer () تنفيذ الخطوات التالية:
- إنشاء كائن مدعوم
- إنشاء وظيفة عندما يكون الملقم جاهز لأداء استجابة
- ملف على الملقم لإرسال الطلبات
- يرجى ملاحظة تضاف إلى نهاية معلمة URL (ف) (يحتوي على محتويات القائمة المنسدلة)
ملف ASP
خوادم المذكورة أعلاه من خلال جافا سكريبت يدعو هذه الصفحة يسمى "getcustomer.asp" ملفات 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>")
%>
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>")
%>