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