‎AJAX -‎ The XMLHttpRequest Object‎

‎‎شئXMLHttpRequest آجكس

Previous >    <Next  

‎‎سنگ بنايAJAX شئXMLHttpRequest است . براي بكارگيري آن مطابق زير اقدام نمائيد:

  1. ‎‎يك شئXMLHttpRequest ايجاد كنيد .
  2. ‎‎يك تابع تماس تعريف كنيد.
  3. ‎‎شئXMLHttpRequest را بازكنيد .
  4. ‎‎ارسال يك درخواست به يك سروز

‎‎شئXMLHttpRequest

‎‎همه مرورگرهاي مدرن شئ‎XMLHttpRequest‎ را پشتبياني ميكنند .

‎شئ‎XMLHttpRequest‎ ميتواند براي تبادل داده با يك وب سرور در پشت صحنه ‎استفاده شود .اين بدين معني است كه بروز رساني بخشي از صفحه بدون بارگيري مجدد كل صفحه ‎امكان پذير ميباشد.

‎‎فرمت كلي ايجاد يك شئ‎XMLHttpRequest‎ مطابق زير است .

variable=new XMLHttpRequest( );

‎‎تعريف تابع برگشتيDefin a Callback Function -‎

‎تابع برگشتي ، تابعي است كه بعنوان پارامتر به تابع ديگري ارسال ميشود .در اين حالت تابع ‎برگشتي بايد داراي كدي باشد كه در زمان آماده شدن پاسخ اجرا شود.

xhttp.onload = function() {
  // What to do when the response is ready
}

‎‎ارسال درخواستSend Request -‎

‎براي ارسال درخواست به سرور ميتوان از متدهاي‎open()‎ , send()‎‎ شئ ‎XMLHttpReques‎‎استفاده كرد .

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

‎‎مثال ـ شئ‎XMLHttpRequest

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
  // Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

--(go to editor for change code and run)

‎‎دسترسي بدامنه هاAccess Across Domains -‎

‎بدلايل امنيتي مرورگرهاي مدرن اجازه دسترسي بدامنه ها را نميدهند .اين بدين معني است كه هم ‎صفحه وب و هم فايلXML كه سعي در بارگذاري آن است، بايد دريك سرور قرار داشته باشند .

‎در مثال هاي درW3School همه فايل هاي XML كه باز ميشوند در دامنه آن قراردارند .البته همين ‎مثال ها در مطالب ارائه شده فايل مذكور در دامنه هاست اينجانب قرار گرفته اند.

‎اگر ميخواهيد از مثال بالا در يكي از صفحات وب خودتان استفاده كنيد، فايل هايXML كه بارگذاري ‎ميكنيد، بايد در سرور خودتان باشند.

‎‎متدهاي شئXMLHttpRequest

‎‎متد ‎‎شــرح
new XMLHttpRequest( ) ‎‎ايجاد شئ جديدXMLHttpRequest
abort( ) ‎‎درخواست فعلي را لغو ميكند
getAllResposoneHeaders( ) ‎‎اطلاعات هدرها را برميگرداند.
getResponseHeader() ‎‎اطلاعات هدر مشخص شده را برگشت ميدهد.
open(method,url,async,user,psw) ‎method‎ـ نوع درخواست GET يا POST

‎url‎ـ آدرس يوآرال

‎anync‎ـ ناهمزماني‎(true)‎ همزماني‎(false)

‎user‎ـ نام كاربر اختياري

‎paw‎ـ رمزعبوراختياري

send( ) ‎‎ارسال درخواست به سرور، مورد استفادهGET
send(string) ‎‎ارسال درخواست به سرور، برايPOST
setRequestHeader( ) ‎‎اضافه نمودن زوج‎lable/valueبه هدر جهت ارسال

‎‎ويژگي هاي شئXMLHttpRequest

‎‎ويژگي ‎‎شــرح
‎onload ‎‎تابعي را تعريف ميكند كه هنگام درخواست‎)‎ بارگيري‎(‎فراخوان شود
‎onreadystatechange ‎‎تعريف تابعي براي فراخواني در تغييرويژگيreadystate
‎readystate ‎‎وضعيت درخواستXMLHttpRequest را نگهداري ميكند

‎‎: 0‎‎درخواست اوليه نشده است.

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

‎‎: 2‎‎درخواست دريافت شد .

‎‎: 3‎‎پردازش درخواست

‎‎: 4‎‎درخواست به پايان رسيده وپاسخ آماده است

‎responseText‎ ‎‎داده هاي پاسخ را بصورت رشته اي برميگرداند.
‎responseXML ‎‎داده هاي پاسخ بعنوان دادهXML برگشت ميشود .
‎status ‎‎شماره وضعيت يك درخواست را برميگرداند:

"OK" : 200

‎‎‎"forbidden‎"‎: 403‎‎ـ ممنوع

"not found" : 404

‎‎موارد ديگر در فهرست خطاها

‎statusText ‎‎برگشت متني ويژگيstatus

‎‎ويژگيonload شئ XMLHttpRequest

‎با شئ‎XMLHttpRequest( )‎ميتوان تابعي برگشتي را تعريف نمود كه تا زمانيكه ‎پاسخ دريافت ميشود اجرا گردد .اين تابع در ويژگي‎onload‎ تعريف ميشود .

‎‎مثال ـ ويژگيonload

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

--(go to editor for change code and run)

‎‎عملكرد هاي چندگانه پاسخ به تماسMultiple Callback Functions -‎

‎اگر بيش از يك كار آجكس در يك وبسايت داريد، بايد يك تابع براي اجراي شئXMLHttpRequest ‎ويك تابعCallback براي هر كارآجكس ايجاد كنيد .

‎‎فراخواني تابع بايد حاويurl باشد و هنگاميكه پاسخ آماده شد، كدام تابع بايد فراخوان شود .

‎‎مثال ـ چند تابعي در دريافت پاسخ

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
}
function myFunction2(xhttp) {
  // action goes here
  
}

‎‎ويژگيonreadystatechange

‎ويژگي‎readyState‎ وضعيت شئ‎XMLHttpRequest‎ را نگهداري ‎ميكند.

‎ويژگي‎onreadystatechange‎ يك تابع callback را تعريف ميكند، كه بايد هنگام ‎تغيير‎readyState‎ بايد اجرا شود .

‎ويژگي هاي‎status‎ و‎statusText‎ وضعيت شئXMLHttpRequest ‎را نگهداري ميكنند.

‎‎ويژگي ‎‎شــرح
‎onreadystatechange ‎‎تعريف تابعي براي فراخواني در تغييرويژگيreadystate
‎readystate ‎‎وضعيت درخواستXMLHttpRequest را نگهداري ميكند

‎‎: 0‎‎درخواست اوليه نشده است.

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

‎‎: 2‎‎درخواست دريافت شد .

‎‎: 3‎‎پردازش درخواست

‎‎: 4‎‎درخواست به پايان رسيده وپاسخ آماده است

‎status ‎‎شماره وضعيت يك درخواست را برميگرداند:

"OK" : 200

‎‎‎"forbidden‎"‎: 403‎‎ـ ممنوع

"not found" : 404

‎‎موارد ديگر در فهرست خطاها

‎statusText ‎‎برگشت متني ويژگيstatus

‎تابعي كه در. ويژگي‎onreadystatechange‎ تعريف شده هر باريكه ويژگي ‎readyState‎‎تغييركند، فراخوان ميشود .

‎‎هنگاميكهreadState=4 وstatus=200 باشد، پاسخ آماده است.

‎‎مثال ـ

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if  (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();

--(go to editor for change code and run)

‎رويداد‎onreadystatecahang‎ چهار بار ‎(1-‎4)‎ راه اندازي ميشود، يك ‎بار براي هر تغيير در.‎readyState


Previous >    <Next