AJAX - सर्वर को एक अनुरोध भेजें
XMLHttpRequest ऑब्जेक्ट का उपयोग सर्वर के साथ डेटा का आदान-प्रदान करने के लिए किया जाता है।
एक सर्वर को एक अनुरोध भेजें
सर्वर को अनुरोध भेजने के लिए, हम XMLHttpRequest ऑब्जेक्ट के खुले () और भेजें () विधियों का उपयोग करते हैं:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
प्राप्त करें या पोस्ट करें?
POST की तुलना में GET सरल और तेज है, और ज्यादातर मामलों में इसका उपयोग किया जा सकता है।
हालाँकि, हमेशा POST अनुरोधों का उपयोग करें जब:
- कैश्ड फ़ाइल एक विकल्प नहीं है (सर्वर पर फ़ाइल या डेटाबेस अपडेट करें)।
- सर्वर पर बड़ी मात्रा में डेटा भेजना (POST की कोई आकार सीमा नहीं है)।
- उपयोगकर्ता इनपुट भेजना (जिसमें अज्ञात वर्ण हो सकते हैं), POST GET की तुलना में अधिक मजबूत और सुरक्षित है।
अनुरोध प्राप्त करें
एक साधारण GET अनुरोध:
उदाहरण
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
ऊपर के उदाहरण में, आपको कैश्ड परिणाम मिल सकता है। इससे बचने के लिए यूआरएल में एक यूनिक आईडी जोड़ें:
उदाहरण
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
यदि आप GET विधि से जानकारी भेजना चाहते हैं, तो जानकारी को URL में जोड़ें:
उदाहरण
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
पोस्ट अनुरोध
एक साधारण पोस्ट अनुरोध:
उदाहरण
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
HTML फॉर्म की तरह डेटा पोस्ट करने के लिए, setRequestHeader() के साथ एक HTTP शीर्षलेख जोड़ें। वह डेटा निर्दिष्ट करें जिसे आप भेजना () विधि में भेजना चाहते हैं:
उदाहरण
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
यूआरएल - सर्वर पर एक फाइल
ओपन () विधि का url पैरामीटर, सर्वर पर किसी फ़ाइल का पता है:
xhttp.open("GET", "ajax_test.asp", true);
फ़ाइल किसी भी प्रकार की फ़ाइल हो सकती है, जैसे .txt और .xml, या सर्वर स्क्रिप्टिंग फ़ाइलें जैसे .asp और .php (जो प्रतिक्रिया वापस भेजने से पहले सर्वर पर कार्रवाई कर सकती हैं)।
अतुल्यकालिक - सही या गलत?
सर्वर अनुरोध अतुल्यकालिक रूप से भेजे जाने चाहिए।
open() विधि का async पैरामीटर सत्य पर सेट होना चाहिए:
xhttp.open("GET", "ajax_test.asp", true);
अतुल्यकालिक रूप से भेजकर, जावास्क्रिप्ट को सर्वर प्रतिक्रिया के लिए प्रतीक्षा करने की आवश्यकता नहीं है, बल्कि इसके बजाय:
- सर्वर प्रतिक्रिया की प्रतीक्षा करते हुए अन्य स्क्रिप्ट निष्पादित करें
- प्रतिक्रिया तैयार होने के बाद प्रतिक्रिया से निपटें
ऑनरेडीस्टेटचेंज प्रॉपर्टी
XMLHttpRequest ऑब्जेक्ट के साथ आप अनुरोध प्राप्त होने पर निष्पादित किए जाने वाले फ़ंक्शन को परिभाषित कर सकते हैं।
फ़ंक्शन को XMLHttpResponse ऑब्जेक्ट की ऑनरेडीस्टेटचेंज प्रॉपर्टी में परिभाषित किया गया है:
उदाहरण
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();
ऊपर के उदाहरण में प्रयुक्त "ajax_info.txt" फ़ाइल एक साधारण टेक्स्ट फ़ाइल है और इस तरह दिखती है:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
आप बाद के अध्याय में ऑनरेडी स्टेट चेंज के बारे में अधिक जानेंगे।
तुल्यकालिक अनुरोध
एक सिंक्रोनस अनुरोध निष्पादित करने के लिए, ओपन () विधि में तीसरे पैरामीटर को गलत में बदलें:
xhttp.open("GET", "ajax_info.txt", false);
कभी-कभी त्वरित परीक्षण के लिए async = false का उपयोग किया जाता है। आपको पुराने जावास्क्रिप्ट कोड में सिंक्रोनस अनुरोध भी मिलेंगे।
चूंकि कोड सर्वर के पूरा होने की प्रतीक्षा करेगा, इसलिए onreadystatechange फ़ंक्शन की कोई आवश्यकता नहीं है:
उदाहरण
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
सिंक्रोनस XMLHttpRequest (async = false) की अनुशंसा नहीं की जाती है क्योंकि सर्वर प्रतिक्रिया तैयार होने तक जावास्क्रिप्ट निष्पादित करना बंद कर देगा। यदि सर्वर व्यस्त या धीमा है, तो एप्लिकेशन हैंग या बंद हो जाएगा।
सिंक्रोनस XMLHttpRequest वेब मानक से निकाले जाने की प्रक्रिया में है, लेकिन इस प्रक्रिया में कई वर्ष लग सकते हैं।
आधुनिक डेवलपर टूल को सिंक्रोनस अनुरोधों का उपयोग करने के बारे में चेतावनी देने के लिए प्रोत्साहित किया जाता है और ऐसा होने पर एक InvalidAccessError अपवाद फेंक सकता है।