AJAX - XMLHttpRequest ऑब्जैक्ट

XMLHttpRequest वस्तु AJAX का आधार है

  1. XMLHttpRequest ऑब्जैक्ट बनाएं
  2. कॉलबैक फ़ंक्शन को परिभाषित करें
  3. XMLHttpRequest वस्तु खोलना
  4. सर्वर को अनुरोध भेजना

XMLHttpRequest ऑब्जैक्ट

सभी आधुनिक ब्राउज़र इसका समर्थन करते हैं XMLHttpRequest ऑब्जैक्ट。

XMLHttpRequest वस्तु का उपयोग Web सर्वर के साथ पृष्ठभूमि में डाटा आदान-प्रदान करने के लिए होता है। इसका मतलब है कि पृष्ठ के किसी हिस्से को अद्यतन किया जा सकता है, बिना पूरे पृष्ठ को पुनः लोड करने की आवश्यकता होती है।

XMLHttpRequest ऑब्जैक्ट बनाएं

सभी आधुनिक ब्राउज़र (Chrome, Firefox, IE, Edge, Safari, Opera) में अंतर्निहित XMLHttpRequest ऑब्जैक्ट。

XMLHttpRequest ऑब्जैक्ट बनाने के लिए व्याकरण:

variable = new XMLHttpRequest();

कॉलबैक फ़ंक्शन को परिभाषित करें

कॉलबैक फ़ंक्शन एक फ़ंक्शन है जो एक अन्य फ़ंक्शन को पारामीटर के रूप में पास किया जाता है।

इस मामले में, कॉलबैक फ़ंक्शन में प्रतिक्रिया तैयार होने वाले समय चलाने वाला कोड शामिल होना चाहिए।

xhttp.onload = function() {
  // जब प्रतिक्रिया तैयार होने वाला है तो क्या करना है
}

अनुरोध भेजें

सर्वर को अनुरोध भेजने के लिए, XMLHttpRequest ऑब्जैक्ट के open() और send() तरीका:

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

इंस्टांस

// XMLHttpRequest ऑब्जैक्ट बनाएं
const xhttp = new XMLHttpRequest();
// कॉलबैक फ़ंक्शन को परिभाषित करें
xhttp.onload = function() {
  // यहाँ डाटा का उपयोग कर सकते हैं
}
// अनुरोध भेजें
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

खुद आयात करें

क्रॉस-डोमेन एक्सेस (Access Across Domains)

सुरक्षा कारणों से आधुनिक ब्राउज़रों द्वारा क्रॉस-डोमेन एक्सेस नहीं की जाती है।

इसका मतलब है कि वेबपेज और उसके द्वारा लोड किया जाने वाला XML फ़ाइल एक ही सर्वर पर होना चाहिए।

CodeW3C.com पर के उदाहरण सभी CodeW3C.com डोमेन में स्थित XML फ़ाइलों को खोलते हैं।

यदि आप अपने वेबपेजों में से एक पर उपरोक्त उदाहरण का उपयोग करना चाहते हैं, तो आप लोड करने वाला XML फ़ाइल आपके सर्वर पर होना चाहिए।

XMLHttpRequest ऑब्जैक्ट के तरीके

तरीका वर्णन
new XMLHttpRequest() नया XMLHttpRequest ऑब्जैक्ट बनाएं।
abort() वर्तमान अनुरोध को रद्द करें।
getAllResponseHeaders() हेडर सूचना वापस करें।
getResponseHeader() विशेष हेडर सूचना वापस करें।
open(method, url, async, user, psw)

अनुरोध को निर्धारित करें।

  • methodअनिवार्य शब्द: अनुरोध क़िस्म GET या POST
  • urlअनिवार्य शब्द: फ़ाइल स्थान
  • asyncअनिवार्य शब्द: true (असंचालित) या false (संचालित)
  • userअनिवार्य शब्द: उपयोगकर्ता नाम
  • pswअनिवार्य शब्द: पासवर्ड
send() सर्वर को अनुरोध भेजें जो GET अनुरोध है।
send(string) सर्वर को अनुरोध भेजें जो POST अनुरोध है।
setRequestHeader() टैग/मूल्य जोड़ें जो भेजने वाले हेडर में होंगे।

XMLHttpRequest ऑब्जैक्ट की विशेषताएँ

विशेषता वर्णन
onload लोड होने वाले अनुरोध पर बुल्ली फ़ंक्शन को परिभाषित करें।
onreadystatechange जब readyState विशेषता परिवर्तित होने पर बुल्ली फ़ंक्शन को परिभाषित करें।
readyState

XMLHttpRequest की स्थिति सहेजें

  • 0: अनुरोध निर्धारित नहीं है
  • 1: सर्वर कनेक्शन स्थापित है
  • 2: अनुरोध प्राप्त हुआ है
  • 3: अनुरोध संस्करण कर रहा है
  • 4: अनुरोध पूर्ण हुआ है और प्रतिक्रिया तैयार है
responseText चिन्हित शब्द में प्रतिक्रिया डाटा वापस करें
responseXML XML डाटा के रूप में प्रतिक्रिया डाटा वापस करें
स्थिति

अनुरोध की स्थिति की संख्या वापस करें

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

पूर्ण सूची के लिए देखें Http संदेश संदर्भ पुस्तक
statusText स्थिति टेक्स्ट वापस करें (जैसे "OK" या "Not Found")

onload विशेषता

XMLHttpRequest वस्तु का उपयोग करते समय, आप एक कॉलबैक फ़ंक्शन को परिभाषित कर सकते हैं ताकि अनुरोध प्रतिक्रिया प्राप्त होने पर फ़ंक्शन चलाया जाए

XMLHttpRequest वस्तु के onload इस विशेषता में फ़ंक्शन को परिभाषित करें

इंस्टांस

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

खुद आयात करें

अनेक कॉलबैक फ़ंक्शन

यदि वेबसाइट में कई AJAX कार्य हैं, तो XMLHttpRequest वस्तु को कार्य करने वाली फ़ंक्शन को बनाएं और प्रत्येक AJAX कार्य के लिए एक कॉलबैक फ़ंक्शन बनाएं

फ़ंक्शन बुलाएँ ताकि 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) {
  // यहाँ कार्य है
}
function myFunction2(xhttp) {
  // यहाँ कार्य है
}

onreadystatechange विशेषता

readyState XMLHttpRequest की स्थिति को सहेजने वाली विशेषता

onreadystatechange विशेषता एक कॉलबैक फ़ंक्शन को परिभाषित करती है जो readyState बदले जाने पर चलाया जाता है

स्थिति विशेषताएँ और statusText विशेषता XMLHttpRequest वस्तु की स्थिति को सहेजती है

विशेषता वर्णन
onreadystatechange जब readyState विशेषता बदले जाने पर बुलाने वाले फ़ंक्शन को परिभाषित करें
readyState

XMLHttpRequest की स्थिति सहेजें

  • 0: अनुरोध निर्धारित नहीं है
  • 1: सर्वर कनेक्शन स्थापित है
  • 2: अनुरोध प्राप्त हुआ है
  • 3: अनुरोध संस्करण कर रहा है
  • 4: अनुरोध पूर्ण हुआ है और प्रतिक्रिया तैयार है
स्थिति

अनुरोध की स्थिति की संख्या वापस करें

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

पूर्ण सूची के लिए देखें Http संदेश संदर्भ पुस्तक
statusText परिस्थिति टेक्स्ट (जैसे "OK" या "Not Found") वापस करता है।

प्रत्येक बार readyState परिवर्तित होने पर onreadystatechange फ़ंक्शन बुल्की जाता है।

जबकि readyState इस तरह है: 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();
}

खुद आयात करें

onreadystatechange इवेंट चार बार (1-4) हुआ, प्रत्येक बार readyState परिवर्तित हुआ।