مثال این صفحه به شما خواهد اموخت چگونه اطلاعات مورد نظر خود را از بانک اطلاعاتی که در سرور قرار دارد دریافت نمائید
 

برای درک این مثال شما باید با موارد زیر آشنا باشید :

  • HTML
  • جاوا اسکریپت
  • اشیای DOM
  • اژاکس
  • PHP یا ASP
برنامه اصلی یا ارسال کننده تقاضا

 <html>

<body>

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

</body>
</html>


 
 با استفاده از تگ select درون یک فرم ، لیستی را برای انتخاب قرار داده ایم
 این لیست ، اسامس مشتریان را نمایش می دهد
 با انتخاب هر گزینه ، نام مشتری مورد نظر با استفاده از ویژگی اژاکس به سرور منتقل می شود و اطلاعات ان مشتری از بانک اطلاعاتی بازیافت شده و برای صفحه وبی که کاربر در حال کار با ان است ارسال می شود
 
 بیرون از فرم ، یک تگ دایو یا لایه با نام ای دی txtHint وجود دارد که اطلاعات مشتریان را نمایش خواهد داد
 
با انتخاب هر گزینه از لیست ، رویداد onchange برای ان لیست اتفاق می افتد
 

Customer info will be listed here...
 
 زمانیکه کاربر از لیست پائین افتادنی که در بالا نشان داده شده است ، نام مشتری مورد نظر خود را انتخاب می کند ، رویداد onchange رخ داده و بلافاصله تابعی که به زبان جاوا اسکریپت نوشته شده است و نام ان showCustomer است فراخوانی می شود
 
 نام مشتری که کاربر انتخاب می کند با استفاده از عبارت زیر بدست می اید ، انرا بعنوان مقداری برای پارامتر str تابع showCustomer ارسال می کند
 

 

 this.value

 this یعنی این لیستی که کاربر دارد با ان کار می کند
 value : یعنی ، مقدار value هر گزینه ای که کاربر انتخاب کرده است
 
 

 

حالا دستورات تابع  showCustomer   را می نویسیم

 

function showCustomer(str)
{
var xmlhttp;
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();
}

 
 با تواجه به توضیحات مفصلی که در فصلهای گام اول تا گام پنجم از مجموعه اژاکس داده ام ، دیگر توضیحی راجع به دستورات تابع بالا نمی دهم
 فقط فایلی به نام etcustomer.asp که در سرور قرار دارد گیرنده و پاسخ دهنده تقاضای مرورگر کاربر بنا به گزینه ای که از لیست انتخاب کرده ، می باشد
 
مشاهده و اجرای برنامه کامل
برنامه گیرنده و پاسخ دهنده به تقاضا
 فایل از نوع asp به نام getcustomer.asp گیرنده و پاسخ دهنده به تقاضا می باشد
 
 ( این برنامه را به زبان php هم می توانید بنویسید )
 این برنامه جواب را از بانک اطلاعاتی که در سرور است دریافت کرده و انرا بصورت یک جدول برای فایل اصلی که کاربر در حال کار با ان است ارسال می کند
 

 

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

 
 اگر شما با mysql قبلا اشنا شده باشید درک برنامه بالا بسیار ساده است
 
 این هم  همان برنامه بازیابی اطلاعات مشتری خواسته شده از بانک اطلاعاتی  به زبان php

 

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>