XMLHttpRequest ऑब्जेक्ट _
सर्वर से डेटा का अनुरोध करने के लिए सभी आधुनिक ब्राउज़रों में एक अंतर्निहित XMLHttpRequest ऑब्जेक्ट होता है।
सभी प्रमुख ब्राउज़रों में XML तक पहुँचने और उसमें हेरफेर करने के लिए एक अंतर्निहित XML पार्सर होता है।
XMLHttpRequest ऑब्जेक्ट
XMLHttpRequest ऑब्जेक्ट का उपयोग वेब सर्वर से डेटा का अनुरोध करने के लिए किया जा सकता है।
XMLHttpRequest ऑब्जेक्ट एक डेवलपर का सपना है , क्योंकि आप यह कर सकते हैं:
- पृष्ठ को पुनः लोड किए बिना वेब पृष्ठ को अपडेट करें
- सर्वर से डेटा का अनुरोध करें - पेज लोड होने के बाद
- सर्वर से डेटा प्राप्त करें - पेज लोड होने के बाद
- सर्वर को डेटा भेजें - पृष्ठभूमि में
XMLHttpRequest उदाहरण
जब आप नीचे दिए गए इनपुट फ़ील्ड में एक वर्ण टाइप करते हैं, तो सर्वर पर एक XMLHttpRequest भेजा जाता है, और कुछ नाम सुझाव (सर्वर से) वापस कर दिए जाते हैं:
उदाहरण
Start typing a name in the input field below:
Suggestions:
XMLHttpRequest भेजा जा रहा है
सभी आधुनिक ब्राउज़रों में एक अंतर्निहित XMLHttpRequest ऑब्जेक्ट होता है।
इसका उपयोग करने के लिए एक सामान्य जावास्क्रिप्ट सिंटैक्स इस तरह दिखता है:
उदाहरण
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
XMLHttpRequest ऑब्जेक्ट बनाना
ऊपर दिए गए उदाहरण में पहली पंक्ति XMLHttpRequest ऑब्जेक्ट बनाती है:
var xhttp = new XMLHttpRequest();
ऑनरेडीस्टेटचेंज इवेंट
रेडीस्टेट संपत्ति XMLHttpRequest की स्थिति रखती है।
हर बार रेडीस्टेट में परिवर्तन होने पर ऑनरेडीस्टेटचेंज इवेंट चालू हो जाता है।
सर्वर अनुरोध के दौरान, रेडीस्टेट 0 से 4 में बदल जाता है:
0: अनुरोध प्रारंभ नहीं किया
गया 1: सर्वर कनेक्शन स्थापित किया गया
2: अनुरोध प्राप्त हुआ
3: प्रसंस्करण अनुरोध
4: अनुरोध समाप्त हो गया और प्रतिक्रिया तैयार है
ऑनरेडीस्टेटचेंज प्रॉपर्टी में, रेडीस्टेट बदलने पर निष्पादित होने वाले फ़ंक्शन को निर्दिष्ट करें:
xhttp.onreadystatechange = function()
जब रेडीस्टेट 4 है और स्थिति 200 है, तो प्रतिक्रिया तैयार है:
if (this.readyState == 4 && this.status == 200)
XMLHttpRequest गुण और तरीके
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
सभी डोमेन में पहुंचें
सुरक्षा कारणों से, आधुनिक ब्राउज़र सभी डोमेन में एक्सेस की अनुमति नहीं देते हैं।
इसका मतलब यह है कि वेब पेज और एक्सएमएल फाइल दोनों को लोड करने का प्रयास एक ही सर्वर पर होना चाहिए।
W3Schools के उदाहरण W3Schools डोमेन पर स्थित सभी XML फ़ाइलें खोलते हैं।
यदि आप अपने स्वयं के वेब पेजों में से किसी एक पर उपरोक्त उदाहरण का उपयोग करना चाहते हैं, तो आपके द्वारा लोड की जाने वाली XML फ़ाइलें आपके अपने सर्वर पर स्थित होनी चाहिए।
प्रतिक्रियापाठ संपत्ति
प्रतिक्रिया टेक्स्ट संपत्ति एक स्ट्रिंग के रूप में प्रतिक्रिया देता है।
यदि आप प्रतिक्रिया को टेक्स्ट स्ट्रिंग के रूप में उपयोग करना चाहते हैं, तो प्रतिक्रिया टेक्स्ट प्रॉपर्टी का उपयोग करें:
उदाहरण
document.getElementById("demo").innerHTML = xmlhttp.responseText;
प्रतिक्रिया एक्सएमएल संपत्ति
responseXML गुण XML DOM ऑब्जेक्ट के रूप में प्रतिक्रिया देता है।
यदि आप XML DOM ऑब्जेक्ट के रूप में प्रतिक्रिया का उपयोग करना चाहते हैं, तो responseXML प्रॉपर्टी का उपयोग करें:
उदाहरण
फ़ाइल cd_catalog.xml का अनुरोध करें और XML DOM ऑब्जेक्ट के रूप में प्रतिक्रिया का उपयोग करें:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
प्राप्त करें या पोस्ट करें?
POST की तुलना में GET सरल और तेज है, और ज्यादातर मामलों में इसका उपयोग किया जा सकता है।
हालाँकि, हमेशा POST अनुरोधों का उपयोग करें जब:
- कैश्ड फ़ाइल एक विकल्प नहीं है (सर्वर पर फ़ाइल या डेटाबेस अपडेट करें)
- सर्वर पर बड़ी मात्रा में डेटा भेजना (POST की कोई आकार सीमा नहीं है)
- उपयोगकर्ता इनपुट भेजना (जिसमें अज्ञात वर्ण हो सकते हैं), POST GET की तुलना में अधिक मजबूत और सुरक्षित है
यूआरएल - सर्वर पर एक फाइल
ओपन () विधि का url पैरामीटर, सर्वर पर किसी फ़ाइल का पता है:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
फ़ाइल किसी भी प्रकार की फ़ाइल हो सकती है, जैसे .txt और .xml, या सर्वर स्क्रिप्टिंग फ़ाइलें जैसे .asp और .php (जो प्रतिक्रिया वापस भेजने से पहले सर्वर पर कार्रवाई कर सकती हैं)।
अतुल्यकालिक - सही या गलत?
अनुरोध को अतुल्यकालिक रूप से भेजने के लिए, ओपन () विधि के async पैरामीटर को सत्य पर सेट करना होगा:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
वेब डेवलपर्स के लिए एसिंक्रोनस रूप से अनुरोध भेजना एक बहुत बड़ा सुधार है। सर्वर पर किए गए कई कार्यों में बहुत समय लगता है।
अतुल्यकालिक रूप से भेजकर, जावास्क्रिप्ट को सर्वर प्रतिक्रिया के लिए प्रतीक्षा करने की आवश्यकता नहीं है, बल्कि इसके बजाय:
- सर्वर प्रतिक्रिया की प्रतीक्षा करते हुए अन्य स्क्रिप्ट निष्पादित करें
- प्रतिक्रिया तैयार होने पर प्रतिक्रिया से निपटें
अतुल्यकालिक = सत्य
async = true का उपयोग करते समय, ऑनरेडीस्टेटचेंज इवेंट में प्रतिक्रिया तैयार होने पर निष्पादित करने के लिए एक फ़ंक्शन निर्दिष्ट करें:
उदाहरण
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
अतुल्यकालिक = असत्य
async = false का उपयोग करने के लिए, ओपन () विधि में तीसरे पैरामीटर को असत्य में बदलें:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
async = false का उपयोग करने की अनुशंसा नहीं की जाती है, लेकिन कुछ छोटे अनुरोधों के लिए यह ठीक हो सकता है।
याद रखें कि सर्वर प्रतिक्रिया तैयार होने तक जावास्क्रिप्ट निष्पादित करना जारी नहीं रखेगा। यदि सर्वर व्यस्त या धीमा है, तो एप्लिकेशन हैंग या बंद हो जाएगा।
नोट: जब आप async = false का उपयोग करते हैं, तो एक onreadystatechange फ़ंक्शन न लिखें - बस भेजें () कथन के बाद कोड डालें:
उदाहरण
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
एक्सएमएल पार्सर
सभी आधुनिक ब्राउज़रों में एक अंतर्निहित XML पार्सर होता है।
XML दस्तावेज़ ऑब्जेक्ट मॉडल (XML DOM) में XML तक पहुँचने और संपादित करने के लिए बहुत सारी विधियाँ हैं।
हालाँकि, किसी XML दस्तावेज़ तक पहुँचने से पहले, इसे XML DOM ऑब्जेक्ट में लोड किया जाना चाहिए।
एक एक्सएमएल पार्सर सादा पाठ पढ़ सकता है और इसे एक्सएमएल डोम ऑब्जेक्ट में बदल सकता है।
टेक्स्ट स्ट्रिंग को पार्स करना
यह उदाहरण एक टेक्स्ट स्ट्रिंग को XML DOM ऑब्जेक्ट में पार्स करता है, और जावास्क्रिप्ट के साथ उससे जानकारी निकालता है:
उदाहरण
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
पुराने ब्राउज़र (IE5 और IE6)
Internet Explorer के पुराने संस्करण (IE5 और IE6) XMLHttpRequest ऑब्जेक्ट का समर्थन नहीं करते हैं।
IE5 और IE6 को संभालने के लिए, जांचें कि क्या ब्राउज़र XMLHttpRequest ऑब्जेक्ट का समर्थन करता है, या फिर एक ActiveXObject बनाएं:
उदाहरण
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Internet Explorer के पुराने संस्करण (IE5 और IE6) DOMParser ऑब्जेक्ट का समर्थन नहीं करते हैं।
IE5 और IE6 को संभालने के लिए, जांचें कि क्या ब्राउज़र DOMParser ऑब्जेक्ट का समर्थन करता है, या फिर एक ActiveXObject बनाएँ:
उदाहरण
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
और ज्यादा उदाहरण
पुनर्प्राप्त करें संसाधन (फ़ाइल) की शीर्षलेख जानकारी पुनर्प्राप्त करें।
पुनर्प्राप्त करें संसाधन (फ़ाइल) की विशिष्ट शीर्षलेख जानकारी पुनर्प्राप्त करें।
करें एक वेब पेज एक वेब सर्वर के साथ कैसे संचार कर सकता है जबकि एक उपयोगकर्ता इनपुट फ़ील्ड में अक्षर टाइप करता है।
करें एक वेब पेज XMLHttpRequest ऑब्जेक्ट के साथ डेटाबेस से जानकारी कैसे प्राप्त कर सकता है।
से डेटा पुनर्प्राप्त करने के लिए XMLHttpRequest बनाएं और डेटा को HTML तालिका में प्रदर्शित करें।