شی ‌ XMLHttpRequest به منزله قلب برنامه نویسی Ajax مطرح می گردد چراکه شی فوق باعث می شود جاوا اسکریپت بتواند درخواست هائی را ایجاد تا برای سرویس دهنده ارسال و نتایج ارسالی از سرویس دهنده را نیز پردازش نماید .
شی فوق اولین مرتبه و به صورت یک شی اکتیوایکس در Internet Explorer 5 عرضه گردید و هم اینک از آن در اکثر مرورگرها حمایت می گردد . سایر مرورگرها نظیر Safari ، Opera ، Mozilla و فایرفاکس پتانسیل های XMLHttpRequest را به صورت یک شی ذاتی جاوا اسکریپت ارائه کرده اند ( در IE 7.0 شی فوق بطور ذاتی در جاوا اسکریپت تعبیه شده است ) .
با توجه به این که تاکنون نسخه های مختلفی از شی فوق در مرورگرها پیاده سازی شده است ، پیاده کنندگان می بایست کد لازم به منظور تشخیص نوع شی فوق را در زمان ایجاد یک نمونه از آن را در برنامه خود پیش بینی نمایند . برای تعیین نسخه در دسترس شی XMLHttpRequest می توان از روشی موسوم به ” تشخیص شی ” استفاده کرد .

ایجاد یک نمونه از شی XMLHttpRequest با توجه به نوع مرورگر
var xmlHttp = null;
if (window.XMLHttpRequest) { //IE7 , Mozilla ,…
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”); //IE 5.x, 6
}
catch(e) {}
}

مثال
برای آشنائی با نحوه عملکرد شی فوق و برنامه نویسی وب غیرهمزمان ، در ادامه به بررسی یک نمونه مثال ساده خواهیم پرداخت . فرض کنید قصد داریم یک درخواست غیرهمزمان به یک منبع موجود بر روی سرویس دهنده (در این مثال خاص یک صفحه html که حاوی یک متن ساده است ، صفحه ArticleSummery.htm ) را ایجاد نمائیم . صفحه فوق یک صفحه وب با حداقل اطلاعات و شامل یک متن ایستا است .

صفحه ArticleSummery.htm
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”rtl”>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”content-type” />
<title>تست برنامه نویسی وب غیرهمزمان </title>
</head>
<body style=”font-family: Tahoma;”>
<div>در این مقاله با برنامه نویسی وب همزمان و غیرهمزمان آشنا شدیم </div>
</body>
</html>

مسئولیت ارسال یک درخواست غیرهمزمان به تابع SendRequest سپرده شده است .

ارسال یک درخواست غیرهمزمان
کد
مرحله
function sendRequest(url) {
if (xmlHttp) {
xmlHttp.open(”GET”, url, true); // true = async
1
فعال کردن ارتباط غیرهمزمان

xmlHttp.onreadystatechange = onCallback;
2
نسبت دهی تابع callback

xmlHttp.setRequestHeader(’Content-type’,'application/x-www-form-urlencoded’);
xmlHttp.send(null);
}
}
3
ارسال درخواست غیرهمزمان


توضیحات

  • متد sendRequest ،‌ یک پارامتر که در واقع URL مربوطه به درخواست HTTP است را دریافت می نماید .
  • مرحله اول : یک ارتباط غیرهمزمان ایجاد می گردد ( در نظر گرفتن مقدار true به عنوان سومین پارامتر در زمان فعال کردن ارتباط نشان دهنده یک ارتباط غیرهمزمان است ).
  • مرحله دوم : پس از مقداردهی اولیه ارتباط مورد نظر ، به خصلت onreadystatechange شی XMLHttpRequest یک تابع محلی با نام onCallback نسبت داده می شود . توجه داشته باشید که فراخوانی تابع فوق به صورت غیرهمزمان است . تابع Callback مشخص می نماید که چه زمانی درخواست تکمیل و یا بهنگام شده است .
  • مرحله سوم : پس از مشخص کردن نوع محتوا در هدر درخواست ، با استفاده از متد Send شی XMLHttpRequest ، درخواست HTTP برای سرویس دهنده ارسال می گردد .