AJAX - XMLHttpRequest

XMLHttpRequest ऑब्जेक्ट सर्वर के साथ डाटा आदान-प्रदान के लिए उपयोग किया जाता है。

सर्वर को अनुरोध भेजें

सर्वर को अनुरोध भेजने के लिए, हम XMLHttpRequest ऑब्जेक्ट के open() और send() मेथड:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
विधि वर्णन
open(method, url, async)

अनुरोध के प्रकार को निर्देशित करें

  • method：अनुरोध का प्रकार: GET या POST
  • url：सर्वर (फ़ाइल) स्थिति
  • async：true (असंचालित) या false (संचालित),
send() सर्वर को अनुरोध भेजें (GET के लिए उपयोग करें),
send(string) सर्वर को अनुरोध भेजें (POST के लिए उपयोग करें),

GET या POST?

GET POST की तुलना में आसान और तेज़ है और अधिकांश स्थितियों में उपयोगी है。

हालांकि, निम्नलिखित स्थितियों में हमेशा POST का उपयोग करें:

  • कैशेड फ़ाइल विकल्प नहीं है (सर्वर पर फ़ाइल या डाटाबेस अद्यतन करने के लिए),
  • सर्वर को बड़ी मात्रा में डाटा भेजें (POST का आकार सीमा नहीं है),
  • उपयोगकर्ता इनपुट (अज्ञात चरित्रों सहित) भेजने के लिए (POST ज्यादा मजबूत और सुरक्षित है),

GET अनुरोध

एक साधारण GET अनुरोध：

इंस्टांस

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

अपने आप साबित कीजिए

उपरोक्त उदाहरण में आपको कैशेड रिजल्ट मिल सकता है। इस स्थिति को बचाने के लिए URL में एक अद्वितीय ID जोड़ें:

इंस्टांस

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

अपने आप साबित कीजिए

अगर आप GET विधि के द्वारा संदेश भेजना चाहते हैं तो URL में इस जानकारी को जोड़ें:

इंस्टांस

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

अपने आप साबित कीजिए

POST अनुरोध

एक साधारण POST अनुरोध：

इंस्टांस

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

अपने आप साबित कीजिए

अगर आप HTML फॉर्म की तरह POST डाटा भेजना चाहते हैं तो setRequestHeader() एक HTTP हेडर जोड़ें। कृपया इसे send() मेथडम में आपको भेजने वाले डाटा का निर्देश किया गया है：

इंस्टांस

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

अपने आप साबित कीजिए

विधि वर्णन
setRequestHeader(हेडर, मूल्य)

HTTP हेडर जोड़ें

  • हेडरदेखें:
  • मूल्यदेखें:

url - सर्वर पर की गई फ़ाइल

open() विधि के url पैरामीट, सर्वर पर फ़ाइल का पता है:

xhttp.open("GET", "ajax_test.asp", true);

यह फ़ाइल किसी भी तरह की हो सकती है, जैसे .txt और .xml, या सर्वर स्क्रिप्ट फ़ाइल, जैसे .asp और .php (जो सर्वर पर प्रतिक्रिया भेजन से पहले काम कर सकते हैं)。

असिंक्रोनस - true या false?

असिंक्रोनस अनुरोध भेजन के लिएopen() विधि के async पैरामीट को trueइसके लिए

xhttp.open("GET", "ajax_test.asp", true);

असिंक्रोनस अनुरोध भेजन वेब डेवलपर्स के लिए एक बहुत बड़ी प्रगति है। सर्वर पर कार्य करने वाले कई काम बहुत लंबे समय लेते हैं। AJAX के पहले, यह काम अनुप्रयोग को हल्का कर सकता है या रुक सकता है。

असिंक्रोनस भेजन के माध्यम से, JavaScript सर्वर की प्रतिक्रिया का इंतजार नहीं करता, बजाए वह

  • सर्वर की प्रतिक्रिया का इंतजार करते समय अन्य स्क्रिप्ट का काम करना
  • जब प्रतिक्रिया तैयार होती है तो प्रतिक्रिया संभालना

onreadystatechange गुण

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

यह फ़ंक्शन XMLHttpResponse ऑब्जैक्ट के onreadystatechange प्रविष्टि में परिभाषित की गई:

इंस्टांस

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

अपने आप साबित कीजिए

आप क्या onreadystatechange के बारे में बहुत सी जानकारी बाद में की पढ़ने वाले हैं。

सिंक्रोनस अनुरोध

यदि आप सिंक्रोनस अनुरोध करना चाहते हैं, तो कृपया open() तरीके में तीसरे पारामीटर को सेट किया जाता है falseइसके लिए

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

कभी-कभी async = false तेजी से परीक्षण के लिए इस्तेमाल किया जाता है।आप भी पुराने JavaScript कोड में सिंक्रोनस रिक्वेस्ट देख सकते हैं।

क्योंकि कोड सर्वर पूरा होने की प्रतीक्षा करेगा, इसलिए onreadystatechange फ़ंक्शन की आवश्यकता नहीं है:

इंस्टांस

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

अपने आप साबित कीजिए

हम सिंक्रोनस XMLHttpRequest (async = false) की सिफारिश नहीं करते, क्योंकि JavaScript सर्वर रिस्पोंस के लिए अवधी लेकर रहेगा।यदि सर्वर व्यस्त या धीमा हो, ऐप्लीकेशन लटक सकता है या रुक सकता है।

सिंक्रोनस XMLHttpRequest वेब मानकों से हट रहा है, लेकिन इस प्रक्रिया के लिए कई वर्ष लग सकते हैं।

सिंक्रोनस (async = false) रिक्वेस्ट के इस्तेमाल को बढ़ावा दिया जाता है, और जब इससे अचानक InvalidAccessError अपराध फेंका जाता है।