فراخوانی تابع onCallback
 هر مرتبه ای که وضعیت ready تغییر می یابد ، از تابع callback جهت ایجاد یک درخواست غیرهمزمان استفاده می گردد . در مرحله نهائی ، وضعیت بررسی و بخش رابط کاربر به همراه محتویات برگردانده شده از صفحه ArticleSummery.htm ، بهنگام می گردد.

فراخوانی تابع oncallback
کد
مرحله
function onCallback() {
if (xmlHttp.readyState == 4) {
1
بررسی تکمیل عملیات

if (xmlHttp.status == 200){
2
مقدار ۲۰۰ نشان دهنده انجام موفقیت آمیز عملیات است

var r = document.getElementById(’results’);
r.innerHTML = xmlHttp.responseText;
}
3
نمایش نتایج
else {
alert(’Error: ‘ + xmlHttp.status);
}

توضیحات

  • وضعیت درخواست از طریق خصلت readyState برگردانده می شود .
  • مرحله اول : در صورتی که مقدار خصلت readyState شی XMLHttpRequest برابر با مقدار ۴ باشد ، درخواست به اتمام رسیده است .
  • مرحله دوم : در ادامه ، پاسخ برگردانده شده از سرویس دهنده بررسی می شود تا این اطمینان حاصل گردد که همه چیز با موفقیت انجام شده است .مقدار کد وضعیت ۲۰۰ مربوط به پروتکل HTTP ، نشان دهنده این موضوع است که درخواست با موفقیت انجام شده است .
  • مرحله سوم : در نهایت ، خصلت innerHTML مربوط به عنصر span متاثر از محتویات برگردانده شده ، بهنگام می گردد .

کد زیر ، محتویات صفحه Ajax1.aspx را بطور کامل نشان می دهد .

صفحه Ajax1.aspx
<%@ Page Language=”VB” Culture=”fa-IR” %>
<script runat=”server”>
</script>
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”rtl” >
<head id=”Head1″ runat=”server”>
<title>نحوه استفاده از شی XMLHttpRequest</title>
</head>
<body style=”font-family: Tahoma”>
<form id=”form1″ runat=”server”>
<div>
<span id=”results”>بارگذاری صفحه …</span>
</div>
</form>
<script type=”text/javascript”>
var xmlHttp = null;
window.onload = function() {
loadXmlHttp();
sendRequest(“ArticleSummery.htm”);
}
function loadXmlHttp() {
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, etc.
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); // IE 5.x and 6
}
catch (e){}
}
}
function sendRequest(url) {
if (xmlHttp) {
xmlHttp.open(“GET”, url, true); // true = async
xmlHttp.onreadystatechange = onCallback;
xmlHttp.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);
// Send request without any additional parameters
xmlHttp.send(null);
}
}
function onCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200){
var r = document.getElementById(‘results’);
r.innerHTML = xmlHttp.responseText;
}
else { // HTTP error
alert(‘Error: ‘ + xmlHttp.status);
}
}
}
</script>
</body>
</html>

شکل ۴ خروجی مثال فوق را نشان می دهد .

شکل ۴ : ایجاد یک درخواست Http غیرهمزمان توسط شی XMLHttpRequest
در این مثال با نحوه ایجاد یک درخواست HTTP غیرهمزمان توسط شی XMLHttpRequest به صفحه دیگر موجود بر روی سرویس دهنده آشنا شدیم . پس از اتمام درخواست ، کاربران صفحه نهائی را که محتویات عناصر رابط کاربر موجود در آن (یک span ) به صورت پویا بهنگام شده اند ، مشاهده خواهند کرد .
خلاصه
در این مقاله با برنامه نویسی وب همزمان و غیرهمزمان و نحوه عملکرد شی XMLHttpRequest آشنا شدیم . هدف از بیان موارد فوق ، صرفا” آشنائی با الگوی برنامه نویسی وب مبتنی بر Ajax بود . تمامی داستان به این نقطه ختم نمی شود و در مقالات آتی به سایر پتانسیل های Ajax به منظور پیاده سازی برنامه های وب اشاره خواهیم کرد .