۲۵
آبان

جلسه ۹۹ : پایگاه داده در Ajax

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، با یکی دیگر از جلسات دوره کامل آموزش JavaScript در خدمت شما دوستان هستیم . در این جلسه قصد داریم به آموزش کار با پایگاه داده در AJAX و همینطور استفاده از فایل XML برای دریافت اطلاعات در AJAX بپردازیم.

فهرست

پایگاه داده در Ajax

AJAX می تواند ارتباط تعاملی با یک پایگاه داده (DataBase) داشته باشد.

در ادامه برنامه ای خواهیم نوشت که نشان می دهد چگونه یک صفحه وب می تواند اطلاعات را از پایگاه داده بگیرد. (با ajax)

کار با پایگاه داده در AJAX

کد برنامه:

مثال :

<!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>

<!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>

<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>

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

هنگامی که کاربر یک مشتری را از لیست انتخاب می کند، تابع showCustomer اجرا می شود.
این تابع توسط رویداد onchange اجرا می شود:

مثال :

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();
}

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();

}

این تابع کار های زیر را انجام می دهد:

بررسی اینکه آیا مشتری انتخاب شده یا نه
ایجاد یک شی XMLHttpRequest
ایجا تابعی برای اجرا هنگامی که پاسخ سرور آماده است
ارسال یک درخواست به فایل روی سرور
توجه داشته باشید که پارامتر q به url اضافه شده است(که حاوی گزینه انتخاب شده لیست می باشد)

صفحه سرور Ajax

صفحه ای که در کد بالا توسط جاوا اسکریپت فراخوانده شده است، یک صفحه ASP به نام getcustomer.asp می باشد.

فایل سرور می تواند به سادگی با هر زبانی از جمله php نوشته شود.

در دوره آموزش زبان PHP ما مثالی را با زبان PHP نوشته ایم که می توانید به آن مراجعه نمایید.

در سورس کد فایل getcustomers.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>")
%>

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>")

rs.MoveNext

loop

response.write("</table>")

مثال استفاده از فایل XML برای دریافت اطلاعات در Ajax

در برنامه زیر اینبار از یک فایل XML برای دریافت اطلاعات از سرور استفاده کرده ایم:

مثال :

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;
}

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 نیز به پایان رسید.
در جلسه بعد به آموزش ساخت یک برنامه در جاوا اسکریت خواهیم پرداخت. با ما همراه باشید.

همچنین می توانید نظرات و سوالات هود را از طریق بخش نظرات سایت با ما در میان بگذارید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۹۹ : پایگاه داده در Ajax

پایگاه داده در Ajax

توضیحات برنامه:

تابع ()showCustomer

صفحه سرور Ajax

مثال استفاده از فایل XML برای دریافت اطلاعات در Ajax

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ