اشیاء XMLHttpRequest

عنصر XMLHttpRequest روش‌هایی برای ارتباط با سرور پس از بارگذاری صفحه وب را فراهم می‌کند.

عنصر XMLHttpRequest چیست؟

عنصر XMLHttpRequestرویای توسعه‌دهندگان، زیرا شما می‌توانید:

  • صفحه را بدون بارگذاری مجدد صفحه به‌روزرسانی می‌کنیم
  • در پس از بارگذاری صفحه درخواست داده‌ها از سرور می‌کنیم
  • در پس از بارگذاری صفحه داده‌ها را از سرور دریافت می‌کنیم
  • در پس‌زمینه داده‌ها را به سرور ارسال می‌کنیم

تمام مرورگرهای مدرن از XMLHttpRequest پشتیبانی می‌کنند.

مثال:هنگام تایپ متن با سرور ارتباط XML HTTP برقرار می‌کنیم.

ایجاد XMLHttpRequest

با یک خط ساده JavaScript، می‌توانیم XMLHttpRequest ایجاد کنیم.

در تمامی مرورگرهای مدرن (شامل IE 7):

xmlhttp=new XMLHttpRequest()

در Internet Explorer 5 و 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

مثال

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// کد برای تمامی مرورگرهای جدید}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// کد برای IE5 و IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("مخاطب شما از XMLHTTP پشتیبانی نمی‌کند.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...کد ما اینجا...
    }
  else
    {
    alert("مشکل در بازیابی داده‌های XML");
    }
  }
}
</script>

تست کنید

نکته:onreadystatechange یک رویداد هندل است. مقدار آن (state_Change) نام یک تابع است که هنگام تغییر وضعیت XMLHttpRequest به این تابع فراخوانی می‌شود. وضعیت از 0 (uninitialized) تا 4 (complete) تغییر می‌کند. تنها در وضعیت 4، ما کد را اجرا می‌کنیم.

چرا از Async=true استفاده می‌کنیم؟

مثال ما از پارامتر "true" در parameter سوم open() استفاده کرده است.

این پارامتر تعیین می‌کند که درخواست آیا باید به صورت همزمان (async) پردازش شود یا خیر.

True به معنای آن است که اسکریپت پس از روش send() ادامه خواهد داد و منتظر پاسخ سرور نخواهد بود.

رویداد onreadystatechange کد را پیچیده کرده است. اما این روش امن‌ترین راه برای جلوگیری از توقف کد در صورت عدم دریافت پاسخ از سرور است.

با تنظیم این پارامتر به "false"، می‌توانید از کد اضافی onreadystatechange صرفه‌جویی کنید. اگر در مورد اینکه آیا در صورت شکست درخواست باید کد باقی‌مانده اجرا شود یا خیر، اهمیتی ندارد، می‌توانید از این پارامتر استفاده کنید.

تست کنید

مثال‌های بیشتر

با استفاده از XML HTTP یک فایل textfile را به یک عنصر div بارگذاری کنید

با استفاده از XML HTTP درخواست HEAD انجام دهید

با استفاده از XML HTTP درخواست HEAD مشخص شده را انجام دهید

با استفاده از XML HTTP داده‌های فایل XML را لیست کنید

XML / ASP

شما همچنین می‌توانید مستند XML را باز کرده و به صفحه ASP سرور ارسال کنید، درخواست را تحلیل کنید و سپس نتایج را بازگردانید.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  // code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  // code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlHttp.responseText);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("مخاطب شما از XMLHTTP پشتیبانی نمی‌کند.");
  }
</script>
</body>
</html>

صفحه ASP، نوشته شده به VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
برای هر x در xmldoc.documentElement.childNodes
   اگر x.NodeName = "to" پس name=x.text
next
response.write(name)
%>

نتیجه را از طریق استفاده از ویژگی response.write به کاربران سرور بازگردانید.

تست کنید

آیا موضوع XMLHttpRequest استاندارد W3C است؟

هیچ استاندارد پیشنهادی W3C موضوع XMLHttpRequest را تعیین نکرده است.

با این حال، استاندارد "بارگذاری و ذخیره" سطح 3 W3C DOM شامل برخی از ویژگی‌های مشابه است، اما هیچ مرورگری آن‌ها را پیاده‌سازی نکرده است.

مطالعه کنید

دستورالعمل‌های XML DOM: موضوع XMLHttpRequest