از شی XMLHttpRequest برای به روز رسانی کرد ن یک صفحه وب بدون نیاز به بار گذاری مجدد ان استفاده می شود
شی XMLHttpRequest

 از این شی بری دریافت اطلاعات به روز شده از سرور و نمایش ان در صفحه وبی که کاربر  در حال مشاهده ان است استفاده می شود

این کار بدون اگاهی کاربر انجام می شود

و معمولا باید یک رویدادی اتفاق بیافتد تا این کار انجام شود

مثلا کاربر چیزی را در جایی بنویسد یا روی دکمه ای کلیک کند

 

 با این شی می توان کارهای زیر را انجام داد :

1- به روز رسانی صفحه وبی که کاربر در حال مشاهده ان است بدون بار گذاری مجدد ان

2- ارسال تقاضا برای دریافت داده ها از سرور بعد از اینکه بار گذاری صفحه وب در مرورگر کاربر تمام شد

3-دریافت داده ها از سرور بعد از اینکه بار گذاری صفحه وب در مرورگر کاربر تمام شد

4- ارسال داده هایی به سرور بدون اگاهی کاربر

ایجاد کردن شی XMLHttpRequest

 تمام مرورگرهای پیشرفته مثل IE7+, Firefox, Chrome, Safari, Opera  توانایی ایجاد شی 

XMLHttpRequest را دارند

 روش ایجاد اشاره گر به شی از نوع  XMLHttpRequest بصورت زیر است :

 

نام اشاره گر =new XMLHttpRequest();
 
 اما نسخه های قدیمی تر مرورگر مثل IE5 and IE6 از شی activx استفاده می کنند
 روش ایجاد اشاره گر به شی از نوع activx :

 

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 برای اینکه برنامه شما در تمام انواع مرورگرها به خوبی کار کند باید بررسی کنید که مرورگر کاربر از چه نوعی است و سپس اشاره گر به شی مناسب را ایجاد نمائید :

 

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

 
 مشاهده و اجرای برنامه کامل
 
ارسال تقاضا به سرور
 جهت ارسال تقاضا به سرور ما از دو متد open , send شی XMLHttpRequest  استفاده می کنیم
 روش کار با این دو متد با مثالی بصورت زیر است :

 

xmlhttp.open("GET","xmlhttp_info.txt",true);


xmlhttp.send();

 
 آشنایی با متد open :
 فرمول کلی این متد بصورت زیر است :

 

open(method,url,async)

 

 پارامتر method:

این متد نوع تقاضا را مشخص می کند و می تواند get یا post باشد

 پارامتر url :

محل یا نام فایل مورد تقاضا را که روی سرور قرار دارد مشص می کند

 پارامتر async :

یعنی ایا تا زمانیکه پاسخ تقاضا از سرور بر نگشته اجرای بقیه دستورات صفحه متوقف شود یا نه

 
آشنایی با متد  send

فرمول کلی استفاده از این متد بصورت زیر است

 

send(string)

 تقاضا را به سرور می فرستد

پارامتر string فقط زمانی که نوع ارسال post باشد کاربر د دارد

 
get یا post
 استفاده از get برای ارسال تقاضا به سرور ، بسیار راحت تر و سریع تر از post است
 و در بیشتر موارد می توان از ان استفاده کرد

 فقط در زمانهایی از post استفاده کنید که :

1-catch کردن فایل مورد نظر شما نیست ( بروز رسانی فایل یا بانک اطلاعاتی روی سرور )

2-اگر بخواهید حجم بسیار زیاد اطلاعا ت را به سرورو بفرستید ( post محدودیت حجمی  در ارسال اطلاعات ندارد )

3- در صورتیکه بخواهید داده های دریافتی از کاربر را باامنیت زیاد به سرور بفرستید

پارامتر url
 پارامتر url متد open  ، ادرسی به فایلی در سرور است

 مثال

xmlhttp.open("GET","xmlhttp_info.txt",true);

 فایل درخواستی از هر نوعی می تواند باشد

مثل فایلهایی از نوع xml یا txt یا فایلهای سروری مثل php , asp

( که دستورات این فایلهای سروری ابتدا در سرور اجرا شده و سپس نتیجه برای مرورگر کاربر ارسال می شود )

 
پارامتر async - مقدار true یا false

 برای ارسال غیر همزمان تقاضا به سرور باید مقدار این پارامتر true باشد

ارسال تقاضا به سرور بصورت غیر همزمان برای طراحا ن صفحه وب بسیار اهمیت دارد

چرا که گاهی پاسخ دادن به تقاضا در سرور طول می کشد

با ارسال تقاضا به سرور بصورت غیر همزمان ، دستورات جاوا اسکریپت در برنامه صفحه وبی که کاربر هم اکنون در حال مشاهده ان است ، لازم نیست معطل دریافت پاسخ از سرور بماند

 

در نتیجه :

1- تا زمانی که پاسخ سرور بر میگردد سایر دستورات جاوا اسکریپت اجرا می شوند

2- هر وقت پاسخ از سرور رسید به پاسخ رسیدگی می شود

 
 نکته مهم : اگر مقدار async برابر true باشد

 سوال : اگر مقدار async برابر true باشد ، در ضمن اجرای بقیه دستورات ، برنامه از کجا بفهمد که سرور پاسخ را فرستاده ؟

جواب : با استفاده از رویداد onreadystatechange

 
 

 

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

 

خط اول :

xmlhttp.onreadystatechange=function()

یعنی هر وقت پاسخ از طرف سرور رسید دستورات درون function پی گیری شود

 خط دوم :

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

 

متغیر xmlhttp قبلا از نوع شی XMLHttpRequest تعریف شده

هرگاه مقدار ویژگی readyState این شی برابر 4 و مقدار ویژگی statusبرابر 200 باشد یعنی پاسخ رسیده از طرف سرور درست است.و باید دستورات درو ن if اجرا شود

 

 خط سوم :

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 یک مثال است ، می گوید انچه از سرور رسیده است به جای محتوای تگی که اسم ای دی ان mydiv است قرار بگیرد

به این ترتیب می توان محتوای تگ های برنامه html را تغییر داد

 

 خطهای چهارم و پنجم :

xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

 ارسال تقاضا هستند . ان چیزی که در تگ با ای دی mydiv قرار خواهد گرفت همان است که در فایل xmlhttp_info.txt  که در سرور است نوشته شده است

 

مشاهده و اجرای برنامه کامل

 

 

نکته : کاربرد این اموزش در اموزش ajax بصورت کامل طی یک مثال مطرح شده است 
 
 نکته مهم : اگر مقدار async برابر false باشد 

 کافی است سومیم پارامتر متد open را false کنید

 

مثال

 

xmlhttp.open("GET","xmlhttp_info.txt",false);
 
 استفاده از مقدار false توصیه نمی شود . اما برای بعضی از تقاضا عیبی ندارد
 فقط در زمان استفاده از مقدار false ، توجه داشته باشید تا زمان رسیدن پاسخ از سرور دیگر هیچکدام از دستورات جاوا اسکریپت صفحه وبی که کاربر در حال مشاهده ان است اجرا نخواهد شد لذا اگر سرور کند باشد یا پاسخ دهی به تقاضا طول بکشد ، ان وقت چه می شود ؟ می توان گفت صفحه وب ما در مرورگر کاربر قفل کرده است
 

 زمانی که شما از false استفاده می کنید دیگر نیاز به نوشتن رویداد onreadystatechange  ندارید . چرا ؟

چون باید منتظر بمانید تا جواب برسد و کار را ادامه دهید

لذا دستوراتی که می خواهید در زمن رسیدن پاسخ اجراشود بعد از send بنویسید

 مثال :

 

xmlhttp.open("GET","xmlhttp_info.txt",false);
xmlhttp.send();


document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 چون از false در خط اول مثال بالا استفاده شده

بعد از ارسال تقاضا در خط دوم ، برنامه همان جا متوقف می شود

و به محض دریافت پاسخ از سرور ، اجرای برنامه با اجرای خط بعدی ادامه می باید

 

که در خط سوم گفته شده است هر چه از سرور رسیده به جای دستورات html درون تگی که ای دی ان mydiv است جایگزین شود

 
 مشاهده و اجرای برنامه کامل
 
پاسخ سرور
 برای دریافت پاسخ از سرور ، از دو ویژگی responseText  یا responseXML  استفاده نمائید

 responseText  : پاسخ متنی از سرور دریافت می کند . 

 

مثلا دریافت محتوای متنی یک فایل متنی که می تواند رشته ای از تگ های html باشد

 
 responseXML : داده ها را بصورت یک فایل xml دریافت می کند 
 
آشنایی بیشتر با ویژگی responseText 
 اگر می خواهید  پاسخی که از سرور دریافت می کنید یک فایل xml نباشد ،از ویژگی responseText  استفاده نمائید
 این ویژگی حاوی رشته ای خواهد شد که از سرور برای ما رسیده است

 مثال

در دستور زیر ان رشته ای که از سرور رسیده است ، به جای هر تگ html ای قرار می گیرد که درو ن تگی هستند که نام ای دی ان mydiv می باشد

 

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 مشاهده و اجرای برنامه کامل
 ( همانطور که قبلا گفتم برای اشنایی بیشتر با این مورد ، اموزش ajax را ببینید )
ویژگی responseXML
 هرگاه پاسخ دریافتی از سرور ، یک فایل xml باشد و مشا بخواهید محتوای این فایل را برداشت کنید از ویژگیresponseXML  استفاده نمایید

 مثال

قطعه برنامه زیر فایل cd_catalog.xml را از سرور تقاضا می کند

 

xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "
";
  }
document.getElementById("myDiv").innerHTML=txt;

 خط اول :

xmlDoc=xmlhttp.responseXML;

اشاره گری به نام xmldoc به فایل xml دریافتی از سرور اشاره می کند

 

 خط دوم :

var txt="";

 خط سوم :

x=xmlDoc.getElementsByTagName("ARTIST");

 

اشاره گری به نام x به تمام تگ هایی که نام انها artist است و درون فایل xml ای هستند که xmldoc به ان اشاره می کند ، اشاره خواهد کرد

 خط چهارم :

for (i=0;i<x.length;i++)

 

به ازای تمام خانه های ارایه x ( که در اصل هر خانه ان اشاره گری به یکی از srtist ها می باشد ) دستورات درون for انجام می شود

 خط پنجم:

  txt=txt + x[i].childNodes[0].nodeValue + "

 

مقدار متنی اولین فرزند از i امین تگ artist که i امین خانه x به ان اشاره می کند به محتوای قبلی txt افزوده می شود

( در اصل بعد از اتمام حلقه ، مقدار تمام node های متنی تگ های artist به هم وصل شده اند و در txt قرار گرفته اند )

 خط ششم :

document.getElementById("myDiv").innerHTML=txt;

 

محتوای درونی تگی در همین صفحه وب ، که نام ای دی ان برابر mydiv می باشد برابر هر چیزی که درون txt است قرار می گیرد

 مشاهده و اجرای برنامه کامل
 
رویداد onreadystatechange
 زمانیکه تقاضایی را به سرور ارسال می کنیم ، مسلما می خواهیم با پاسخی که دریافت می کنیم کاری انجام دهیم
 هر وقت مقدار ویژگی readyState  از شی XMLHttpRequest  تغییر کند ، انگاه رویداد onreadystatechange  اتفاق می افتد
 مهمترین ویژگیهای شی XMLHttpRequest  عبارت اند از :
نام ویژگی توضیحات
onreadystatechange  باعث می شود که دستورات درون function هر گاه مقدار readyState  تغییر کند به طور خودکار  اجرا شود
 readyState

 وضعیت تقاضای شی XMLHttpRequest را در خود نگه می دارد و می تواند 0 تا 4 باشد

 

 

0 : تقاضا از طرف سرور  شناسایی نشد

1: اتصال به سرور برقرار شد

2: تقاضا از طرف سرور دریافت شد

3: نیاز است در سرور پردازشی روی تقاضا انجام شود

4: رسیدگی به تقاضا انجام شد و پاسخ سرور برای صفحه وب مرورگر کاربر ، اماده است

 status  

می تواند دو مقدار داشته باشد

200 : همه چیز خوب و درست است

404 : خطایی اتفاق افتاده است و صفحه درخواستی پیدا نشد
 

 در رویداد onreadystatechange  ، ما باید مشخص کنیم زمانی که پاسخ سرور اماده شد ، چه دستوراتی اجرا شود

سوال : اما چه وقت پاسخ سرور اماده است ؟

جواب : وقتی مقدار readyState  برابر 4 و مقدار status  برابر 200 است

 
 مثال

 

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

 
 

 هانطور که مشاهده کردید ویژگی readyState چهار مقدار می گیرد

به ازای هر بار که مقدار مربوطه در این ویژگی قرار گرفت ، رویداد onreadystatechange  اجرا می شود