अजाक्स - XMLHttpRequest
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) |
यूआरएल - सर्वर पर एक फाइल
विधि का url पैरामीटर open(), सर्वर पर किसी फ़ाइल का पता है:
xhttp.open("GET", "ajax_test.asp", true);
फ़ाइल किसी भी प्रकार की फ़ाइल हो सकती है, जैसे .txt और .xml, या सर्वर स्क्रिप्टिंग फ़ाइलें जैसे .asp और .php (जो प्रतिक्रिया वापस भेजने से पहले सर्वर पर कार्रवाई कर सकती हैं)।
अतुल्यकालिक - सही या गलत?
सर्वर अनुरोध अतुल्यकालिक रूप से भेजे जाने चाहिए।
open() विधि का async पैरामीटर सत्य पर सेट होना चाहिए:
xhttp.open("GET", "ajax_test.asp", true);
अतुल्यकालिक रूप से भेजकर, जावास्क्रिप्ट को सर्वर प्रतिक्रिया के लिए प्रतीक्षा करने की आवश्यकता नहीं है, बल्कि इसके बजाय:
- सर्वर प्रतिक्रिया की प्रतीक्षा करते हुए अन्य स्क्रिप्ट निष्पादित करें
- प्रतिक्रिया तैयार होने के बाद प्रतिक्रिया से निपटें
async पैरामीटर के लिए डिफ़ॉल्ट मान async = true है।
आप अपने कोड से तीसरे पैरामीटर को सुरक्षित रूप से हटा सकते हैं।
सिंक्रोनस XMLHttpRequest (async = false) की अनुशंसा नहीं की जाती है क्योंकि सर्वर प्रतिक्रिया तैयार होने तक जावास्क्रिप्ट निष्पादित करना बंद कर देगा। यदि सर्वर व्यस्त या धीमा है, तो एप्लिकेशन हैंग या बंद हो जाएगा।
प्राप्त करें या पोस्ट करें?
GETकी तुलना में सरल और तेज़ है POST, और अधिकांश मामलों में इसका उपयोग किया जा सकता है।
हालाँकि, हमेशा POST अनुरोधों का उपयोग करें जब:
- कैश्ड फ़ाइल एक विकल्प नहीं है (सर्वर पर फ़ाइल या डेटाबेस अपडेट करें)।
- सर्वर पर बड़ी मात्रा में डेटा भेजना (POST की कोई आकार सीमा नहीं है)।
- उपयोगकर्ता इनपुट भेजना (जिसमें अज्ञात वर्ण हो सकते हैं), POST GET की तुलना में अधिक मजबूत और सुरक्षित है।
अनुरोध प्राप्त करें
एक साधारण GETअनुरोध:
उदाहरण
xhttp.open("GET", "demo_get.asp");
xhttp.send();
ऊपर के उदाहरण में, आपको कैश्ड परिणाम मिल सकता है। इससे बचने के लिए URL में एक यूनिक आईडी जोड़ें:
उदाहरण
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
यदि आप विधि के साथ जानकारी भेजना चाहते हैं GET, तो जानकारी को URL में जोड़ें:
उदाहरण
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
सर्वर इनपुट का उपयोग कैसे करता है और सर्वर कैसे अनुरोध का जवाब देता है, इसे बाद के अध्याय में समझाया गया है।
पोस्ट अनुरोध
एक साधारण POSTअनुरोध:
उदाहरण
xhttp.open("POST", "demo_post.asp");
xhttp.send();
एचटीएमएल फॉर्म की तरह डेटा पोस्ट करने के लिए, एक HTTP शीर्षलेख जोड़ें setRequestHeader()। send()उस डेटा को निर्दिष्ट करें जिसे आप विधि में भेजना चाहते हैं :
उदाहरण
xhttp.open("POST", "ajax_test.asp");
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 |
तुल्यकालिक अनुरोध
open()एक सिंक्रोनस अनुरोध निष्पादित करने के लिए, विधि में तीसरे पैरामीटर को इसमें बदलें false:
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) की अनुशंसा नहीं की जाती है क्योंकि सर्वर प्रतिक्रिया तैयार होने तक जावास्क्रिप्ट निष्पादित करना बंद कर देगा। यदि सर्वर व्यस्त या धीमा है, तो एप्लिकेशन हैंग या बंद हो जाएगा।
आधुनिक डेवलपर टूल को सिंक्रोनस अनुरोधों का उपयोग करने के बारे में चेतावनी देने के लिए प्रोत्साहित किया जाता है और ऐसा होने पर एक InvalidAccessError अपवाद फेंक सकता है।