Ajax می تواند برای ارتباطات فعل وانفعالی بایک پایگاه داده استفاده شود.
مثال پایگاه داده ajax
درمثال ajax زیر ما نشان می دهیم که یک صفحه وب چگونه می تواند اطلاعات را از یک پایگاه داده با استفاده از تکنولوژی ajax بگیرد.
انتخاب یک نام در جعبه زیر
انتخاب یک مشتری:
اطلاعات مشتری در زیر لیست خواهند شد.
تشریح مثال ajax:
مثال بالا شامل یک فرم html ساده ویک پیوند به javascript است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <script src="/selectcustomer.js"></script> </head> <body> <form> Select a Customer: <select name="customers" onchange="showCustomer(this.value)"> <option value="ALFKI">Alfreds Futterkiste <option value="NORTS ">North/South <option value="WOLZA">Wolski Zajazd </select> </form> <p> <div id="txtHint"><b>Customer info will be listed here.</b></div> </p> </body> </html> |
همان طوری که شما می توانید ببینید یک فرم مثال html ساده با یک جعبه کشیدنی و پایین انداختنی که مشتری نامیده می شود است.
پاراگراف زیر فرم شامل یک div است که “txthint” نامیده می شود و به عنوان یک میدان برای اطلاعات بازیابی شده از سرور وب استفاده می شود.
زمانی که کاربر داده هارا انتخاب می کند یک تابع به نام “show customer” اجرا می شود. رویداد onchange””باعث راه اندازی تابع برای اجرا می شود به عبارت دیگر هرزمان که کاربر مقادیر را در جعبه کشیدنی پایین انداختنی تغییر دهد تابع show customer صدا زده می شود .
درزیر کد javascript لیست شده است.
Ajax در javascript
این کد javascript در فایل select customer.js”” ذخیره شده است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcustomer.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; } |
صفحه سروردر ajax
صفحه سرور نامگذاری شده به وسیله javascript یک فایل asp ساده است که “get customer.asp” نامیده می شود .
صفحه در javascript برای یک سرور اطلاعات اینترنت نوشته شده است.
این صفحه می تواند به آسانی در php یا در بعضی دیگر از زبان های سرور نوشته شود و نتایج به صورت یک جدول html برگشت داده شود.
کد، یک sql را به جای یک پایگاه داده اجرا می کند و نتیجه را به عنوان یک جدول html برگشت می دهد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<% 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>") %> |
Ajax می تواند برای ارتباطات جذاب با یک فایل xml استفاده شود.
مثال ajax xml
درمثال ajax زیر ما شرح خواهیم داد که چطور یک صفحه وب می توانداطلاعات را از یک فایل xml با استفاده ازتکنولوژی ajax بگیرد.
انتخاب یک cd درجعبه زیر:
انتخاب یک cd:
اطلاعات cd اینجا لیست خواهد شد.
تشریح مثال ajax:
مثال بالا شامل یک فرمhtml ساده و یک پیوند به javascript است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<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 ساده با یک جعبه کشیدنی پایین انداختنی ساده که ” cds “نامیده می شود است.
پاراگراف زیر یک فرم شامل یک div است که “txthint” نامیده می شود. div به عنوان یک میدان اصلاح اطلاعات از فرم سرور وب استفاده می شود وقتی که کاربرداده ها را انتخاب می کند. تابع showcd”” صدازده می شود.
کد javascript در زیر لیست شده است.
Javascript در ajax
کد javascript در فایل “selected.js” ذخیره شده است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
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; } |
صفحه سرور ajax
صفحه سرور نامگذاری شده به وسیله javascript یک فایل asp ساده است که”getcd.asp” نامیده می شود .
صفحه در javascript برای یک سرور اطلاعات اینترنت نوشته شده است.
این صفحه می تواند به آسانی در php یا در بعضی دیگر از زبان های سرور نوشته شود.
کد یک پرسش را اجرا می کند و نتیجه را به صورت html برمی گرداند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<% response.expires=-1 q=request.querystring("q") set xmlDoc=Server.CreateObject("Microsoft.XMLDOM") xmlDoc.async="false" xmlDoc.load(Server.MapPath("cd_catalog.xml")) set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']") for each x in nodes for each y in x.childnodes response.write("<b>" & y.nodename & ":</b> ") response.write(y.text) response.write("<br />") next next %> |
درحالی که responsetext ، پاسخ http را به صورت یک رشته بر می گرداند، responsexml پاسخ را به صورت xml برمی گرداند.
خاصیت responsexml یک سند xml را بر می گرداند که می تواند با استفاده از خصوصیات و روش های گره درخت W3CDOM را مورد تجزیه و رسیدگی قراردهد.
مثال responsexml در ajax
درمثال ajax زیر ما می خواهیم شرح دهیم که یک صفحه وب چگونه می تواند اطلاعات را از پایگاه داده استفاده شده در تکنولوژی ajax بگیرد.
داده های انتخاب شده از پایگاه داده دراین زمان به یک سند xml تبدیل خواهند شد و سپس ما برای استخراج مقادیر برای نمایش، DOM را استفاده خواهیم کرد.
انتخاب یک نام درجدول زیر
انتخاب یک مشتری: (لیست سلکت باکسی از اسامی برای مثال)
تشریح مثال ajax
مثال زیر شامل یک فرم html، چندین عنصر<span> برای نگهداری داده های بازگشتی و یک پیوند به javascript است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <script src="/selectcustomer_xml.js"></script> </head> <body> <form action=""> Select a Customer: <select name="customers" onchange="showCustomer(this.value)"> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <b><span id="companyname"></span></b><br /> <span id="contactname"></span><br /> <span id="address"></span> <span id="city"></span><br/> <span id="country"></span> </body> </html> |
مثال بالا شامل یک فرم html با یک جعبه کشیدنی پایین انداختنی است که “customers” نامیده می شود.
وقتی که کاربر یک گزینه (مشتری ) را در جعبه کشیدنی پایین انداختنی انتخاب می کند یک تابع به نام “showcustomer()” اجرا می شود. اجرای تابع به وسیله رخداد “onchange” اجرامی شود. به عبارت دیگر هر زمان که کاربر مقدار یک جعبه کشیدنی پایین انداختنی را تغییر دهد تابع showcustomer() صدازده می شود.
کد javascript در زیر لیست شده است:
Javascript،ajax
این کد javascript در فایل “selectcustomer_xml.js” ذخیره شده است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcustomer_xml.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) { var xmlDoc=xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML= xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue; document.getElementById("contactname").innerHTML= xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue; document.getElementById("address").innerHTML= xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue; document.getElementById("city").innerHTML= xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue; document.getElementById("country").innerHTML= xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue; } } 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; } |
تابع های showcustomer() و getxmlhttpobject() بالا همان توابع گفته شده درفصل قبل هستند.
همچنین تابع statechanged() نیزقبل ازاین آموزش Ajax استفاده شده است. هرچند این بار ما نتایج را به عنوان یک سند xml ( با responsexml) برمی گردانیم و DOM را برای نمایش مقادیر اضافی که ما می خواهیم نمایش دهیم استفاده می کنیم.
منبع : w3schools.com
مقداد علی بخشی هستم. موسیقی دان، برنامه نویس، متخصص هوش مصنوعی، علم داده، متخصص بلاکچین و توسعه دهنده ربات های هوشمند.
دانش آموخته مقطع ارشد و دکتری دانشکده فنی دانشگاه تهران هستم. با سابقه تدریس درس برنامه نویسی در دانشگاه (پردیس بین الملل کیش دانشگاه تهران)