کاربردهای استفاده از AJAX

فایل های XML

یکی از کارایی های AJAX، قابلیت تعامل با فایل های XML است. این قابلیت را در قالب یک مثال برایتان ذکر می کنم:

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

<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

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

</body>
</html>

مشاهده ی خروجی

بگذارید این مثال را توضیح دهم. زمانی که کاربر روی گزینه ی Get CD info کلیک می کند، تابع ()loadDoc اجرا می شود. این تابع یک شیء XMLHttpRequest می سازد، سپس یک تابع دیگر میسازد که هنگام کامل شدن پاسخ سرور اجرا شود و در آخر درخواست را به سرور می فرستد. زمانی که پاسخ سرور آماده شد یک جدول HTML ساخته می شود، node ها (یا عناصر) از فایل XML استخراج می شوند و در آخر عنصر demo را با داده های فایل XML و جدول HTML بروزرسانی می کند:

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

فایل XML این که در این مثال از آن استفاده شده است این فایل می باشد.

کار با PHP

یکی دیگر از زمینه هایی که می توانید AJAX را در آن پیاده سازی کنید، صفحات وب ای است که با PHP نوشته شده اند. این کار باعث می شود صفحات وب ما پویا تر و زنده تر به نظر برسند و از طرفی تجربه ی کاربری نیز بهبود پیدا کند.

در مثال زیر هنگامی که کاربر چیزی در فیلد input بنویسد، تابعی به نام ()showHint اجرا می شود؛ در واقع این تابع با رویداد onkeyup هماهنگ است. کد ما به این شرح می باشد:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<h3>Start typing a name in the input field below:</h3>

<p>Suggestions: <span id="txtHint"></span></p> 

<p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>

<script>
function showHint(str) {
  var xhttp;
  if (str.length == 0) { 
    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", "gethint.php?q="+str, true);
  xhttp.send();   
}
</script>

</body>
</html>

مشاهده ی خروجی

توضیحات کد از این قرار است: در ابتدا چک کرده ایم که ببینیم آیا فیلد مورد نظر خالی است یا خیر (str.length == 0). اگر خالی بود که محتویات txtHint را خالی کرده و از تابع خارج می شویم اما اگر فیلد ما خالی نبود:

ابتدا یک شیء XMLHttpRequest می سازیم.
تابعی تعریف می کنیم که در هنگام تکمیل و آمادگی پاسخ سرور، اجرا شود.
سپس درخواست را به یک فایل PHP به نام gethint.php میفرستیم.
توجه داشته باشید که پارامتر q اضافه شده است: gethint.php?q="+str
متغیر str محتوای فیلد input را در خود نگه می دارد.

حال باید به سمت سرور برویم و ببینیم فایل PHP چه کار می کند. فایل gethint.php با توجه به درخواست، آرایه ای از نام ها را چک می کند و نام های مرتبط را به سمت مرورگر کاربر می فرستد. به محتوای این فایل نگاه کنید:

<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "") {
  $q = strtolower($q);
  $len=strlen($q);
  foreach($a as $name) {
    if (stristr($q, substr($name, 0, $len))) {
      if ($hint === "") {
        $hint = $name;
      } else {
        $hint .= ", $name";
      }
    }
  }
}

// Output "no suggestion" if no hint was found or output correct values 
echo $hint === "" ? "no suggestion" : $hint;
?>

در این کد ابتدا به دنبال q می گردیم: REQUEST_$ سپس چک میکنیم تا ببینیم آیا q خالی است یا خیر. اگر خالی نبود با تابع strtolower درخواست را تبدیل به حروف کوچک می کنیم تا جست و جو دقیق صورت بگیرد. سپس با یک حلقه ی Foreach تمام موارد مناسب را به کاربر نمایش می دهیم. اگر موردی پیدا نشد نیز عبارت no suggestion را به همراه جست و جوی کاربر به او می دهیم.

کار با ASP

همانطور که میدانید ASP مانند زبان PHP یکی از زبان های توسعه سمت سرور است و برای ایجاد برنامه های زیادی از آن استفاده می شود. بنابراین می توانیم همان مثال را به شکل ASP بنویسیم. در این مثال نیز از همان تابع ()showHint استفاده میکنیم که با رویداد onkeyup هماهنگ بود. کد ما به این شکل می شود:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<h3>Start typing a name in the input field below:</h3>

<p>Suggestions: <span id="txtHint"></span></p> 

<p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>

<script>
function showHint(str) {
  var xhttp;
  if (str.length == 0) { 
    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", "gethint.asp?q="+str, true);
  xhttp.send();
}
</script>

</body>
</html>

تنها چیزی که تفاوت دارد کدهای سمت سرور هستند. اگر به فایل gethint.asp مراجعه کنیم محتوای آن به شکل زیر خواهد بود:

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

با اینکه ظاهر کدها تفاوت دارد اما دقیقا همان کار کدهای PHP را انجام می دهند؛ ما دنبال q میگردیم (دستور request.querystring) و اگر خالی نبود مورد مناسب را از نام فایل پیدا کرده و به کاربر نمایش می دهیم.

امیدوارم با برخی از کاربرد های AJAX جهت پویا تر کردن صفحات وب آشنا شده باشید و در عین حال برایتان لذت بخش نیز بوده باشد.