آموزش Ajax بخش دوم

آموزش Ajax بخش دوم

توسط amin8505 | گروه مقاله های آموزشی | 1394/07/18

نظرات 0

 پشتِيبانِي Browser  از آجاکس

Keystone هاِي آجاکس , شي XMLHttpRequest است. Browserهاِي مخــتلف , ازمــــتدهاِي مختلفِي جهت اِيجاد شي XMLHttpRequest  استفاده مِي کنند.
Internet Explorer از ِيک شي ActiveX استفــــاده مِي کند, در حالي که browser هاِي دِيـــگر از شي توکار JavaScript فراخوانده شده درXMLHttpRequest استفاده مِي کنند.
براِي اِيجــاد اِين شــي , و تبادل با browser هاِي مختلف , از عبارت “try …catch” استفاده مِي کنِــيم. بـــِياِيِيد  فاِيلtestAjax.htm  را با با جاوا اسکرِيپتِي که شي XMLHttpRequest را اِيجاد مِيکند, به روز کنِيم:
<html>
<body>
<scripttype="text/javascript">
function ajaxFunction()
  {
  var xmlHttp;
try
{
    //Firefox,Opera8.0+,Safari
xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    //InternetExplorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
{
      try
{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
catch (e)
{
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
  }
</script>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>


دراِين مثال ابتدا ِيک متغِير xmlHttp جهت نگه داشتن ِيک شي XMLHttpRequest اِيجاد مِي کنِيم.
سپس سعِي مِي کند با دستور () xmlHttp=new XMLHttpRequestِيک شي اِيجاد کند.اِين براِي browser هاِي Fierfox,Opera و Safari است. اگر آن ممکن نبود, براِي Internet Explore 6.0 سعِي مِي کند با دستور xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”)  ِيک شي اِيجادکند، و اگر آنهم ممکن نبود، براِي Internet Explorer 5.5 سعِي مِي کند با دستور xmlHttp=new ActiveXObject(“Microsoft.XMlHTTP”)  ِيک شي اِيجاد کند.
اگر هِيچ کدام از اِين سه متد کار نکند , کاربر ِيک browser بسِيار قدِيمِي دارد و ِيک اخطار مبنِي براِينکه browser اش آجاکس را پشتِيبانِي نمِي کند, مِي بِيند.

توجه: کد وِيژه ِي browser بالا طولانِي ونسبتا پِيچِيده است. اما شما مِي توانِيد هر زمان که خواستِيد ِيک شي XMLHttpRequest اِيجاد کنِيد , آن را کپِي کنِيد.
ajax
شي XMLHttpRequest
با استفاده از شي XMLHttpRequest ,برنامه نویس مِي تواند ِيک صفحه داراِي داده از سرور را بعد از لود صفحه , به روز کند.آجاکس به طور عمومِي در سال 2005 توسط Google sugestایجاد شد.
Google Suggest از شي XMLHttpRequest براِي اِيجاد ِيک رابط وب پوِيا , استفاده مِي کند.زمانِي که مطلبِي را جهت جستجو در google تاِيپ مِيکنِيد،  جاوا اسکرِيپت،متن شما  را به ِيک سرور ارسال مِي کند و سرور ليست پِيشنهادهاِيش را بر مِي گرداند.
مرورگرهاِي 5.0IE Safari 1.2, , 8 opera , Mozila 1.0/Firefox و Netscape 7 , شي  XMLHttpRequest را پشتِيباتِي  مِي کند.
قبل از فرستادن داده ها به سرور , مِي باِيست سه خصوصِيت مهم شي XMLHttpRequest را بدانِيم.
 
خصوصِيت onreadystatechange 
بعد از ِيک تقاضا به سرور , نِيازمند تابعِي  هستِيم که بتواند داده اي که توسط سرور برگردانده مِي شود را درِيافت کند.خصوصِيت onreadystatechange , تابعِي را که پاسخ ِيک سرور را پردازش مِي کند, ذخِيره مِي کند. کدِي که در زِير نوشته شده است ِيک تابع خالي تعرِيف مِي کند و خصوصِيت onreadystatechange را در ِيک زمان تنظِيم مِي کند:
xmlHttp.onreadystatechange=function()
  {
  // We are going to write some code here
  }

خصوصِيت readyState  
خصوصِيت readyState   وضعِيتهاِي پاسخ سرور را نگه مِي دارد. هر بار که readyState تغِيِير مِي کند, تابع onreadystatechange اجرا خواهد شد.
در زِير مقدار هاِي مجاز خصوصِيت readystate  آورده شده است:

Description

State

درخواست آغاز (initialize) نشده است(Not initialized)

0

درخواست برقرار شده است(Open)

1

درخواست فرستاده شد(Sent).

2

درخواست در حال پردازش است(Recived).

3

درخواست کامل است(Loaded).

4


براِي آزمودن اِينکه آِيا پاسخ کامل است(به اِين معنا که مِي توانِيم داده هاِيمان را بگِيرِيم)، باِید ِيک عبارت if به تابع onreadychange بِيفزاِيِيم.
xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // Get the data from the server's response
    }
  }

خصوصِيت responseText 
داده ِي برگشتِي از سرور با خصوصِيتresponseText قابل بازِيابِي است.
در کد زِير , ما مقدار فِيلد “time” را مساوِي با responseText تنظِيم کرده اِيم:
xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
  }

بخش بعدِي نشان مِي دهد که چگونه بعضِي از داده ها را ازسرور درخواست کنِيم. 
 

 

0 نظر

نظر محترم شما در مورد مقاله های وب سایت برنامه نویسی و پایگاه داده

نظرات محترم شما در خدمات رسانی بهتر ما را یاری می نمایند. لطفا اگر مایل بودید یک نظر ما را مهمان فرمائید. آدرس ایمیل و وب سایت شما نمایش داده نخواهد شد.

حرف 500 حداکثر