با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، با یکی دیگر از جلسات دوره کامل آموزش JavaScript در خدمت شما دوستان هستیم . در این جلسه قصد داریم به آموزش کار با پایگاه داده در AJAX و همینطور استفاده از فایل XML برای دریافت اطلاعات در AJAX بپردازیم.
AJAX می تواند ارتباط تعاملی با یک پایگاه داده (DataBase) داشته باشد.
در ادامه برنامه ای خواهیم نوشت که نشان می دهد چگونه یک صفحه وب می تواند اطلاعات را از پایگاه داده بگیرد. (با ajax)
کد برنامه:
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 | <!DOCTYPE html> <html> <style> table,th,td { border : 1px solid black; border-collapse: collapse; } th,td { padding: 5px; } </style> <body> <h2>The XMLHttpRequest Object</h2> <form action=""> <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> <script> function showCustomer(str) { var xhttp; if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xhttp.open("GET", "getcustomer.asp?q="+str, true); xhttp.send(); } </script> </body> </html> |
هنگامی که کاربر یک مشتری را از لیست انتخاب می کند، تابع showCustomer اجرا می شود.
این تابع توسط رویداد onchange اجرا می شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function showCustomer(str) { var xhttp; if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xhttp.open("GET", "getcustomer.asp?q="+str, true); xhttp.send(); } |
این تابع کار های زیر را انجام می دهد:
صفحه ای که در کد بالا توسط جاوا اسکریپت فراخوانده شده است، یک صفحه ASP به نام getcustomer.asp می باشد.
فایل سرور می تواند به سادگی با هر زبانی از جمله php نوشته شود.
در دوره آموزش زبان PHP ما مثالی را با زبان PHP نوشته ایم که می توانید به آن مراجعه نمایید.
در سورس کد فایل getcustomers.asp ما یک کوئری برای پایگاه داده اجرا کرده ایم و نتایج را در یک جدول HTML میریزیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <% 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>") %> |
در برنامه زیر اینبار از یک فایل XML برای دریافت اطلاعات از سرور استفاده کرده ایم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "cd_catalog.xml", true); xhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Artist</th><th>Title</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; } |
جلسه کار با پایگاه داده در AJAX نیز به پایان رسید.
در جلسه بعد به آموزش ساخت یک برنامه در جاوا اسکریت خواهیم پرداخت. با ما همراه باشید.
همچنین می توانید نظرات و سوالات هود را از طریق بخش نظرات سایت با ما در میان بگذارید.