AJAX - सर्वर प्रतिक्रिया
ऑनरेडीस्टेटचेंज प्रॉपर्टी
रेडीस्टेट संपत्ति XMLHttpRequest की स्थिति रखती है।
onreadystatechange प्रॉपर्टी एक फ़ंक्शन को परिभाषित करती है जिसे रेडीस्टेट में परिवर्तन होने पर निष्पादित किया जाना है।
स्टेटस प्रॉपर्टी और स्टेटस टेक्स्ट प्रॉपर्टी में XMLHttpRequest ऑब्जेक्ट की स्थिति होती है।
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds 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" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
हर बार रेडीस्टेट परिवर्तन को ऑनरेडीस्टेटचेंज फ़ंक्शन कहा जाता है।
जब रेडीस्टेट 4 है और स्थिति 200 है, तो प्रतिक्रिया तैयार है:
उदाहरण
function loadDoc() {
var 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", 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>
ऑनरेडीस्टेटचेंज इवेंट को चार बार (1-4) ट्रिगर किया जाता है, रेडीस्टेट में प्रत्येक परिवर्तन के लिए एक बार।
कॉलबैक फ़ंक्शन का उपयोग करना
कॉलबैक फ़ंक्शन एक फ़ंक्शन है जिसे किसी अन्य फ़ंक्शन के पैरामीटर के रूप में पारित किया जाता है।
यदि आपके पास वेबसाइट में एक से अधिक AJAX कार्य हैं, तो आपको XMLHttpRequest ऑब्जेक्ट को निष्पादित करने के लिए एक फ़ंक्शन और प्रत्येक AJAX कार्य के लिए एक कॉलबैक फ़ंक्शन बनाना चाहिए।
फ़ंक्शन कॉल में URL होना चाहिए और प्रतिक्रिया तैयार होने पर कॉल करने के लिए कौन सा फ़ंक्शन होना चाहिए।
उदाहरण
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
सर्वर प्रतिक्रिया गुण
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
सर्वर प्रतिक्रिया के तरीके
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
प्रतिक्रियापाठ संपत्ति
प्रतिक्रिया टेक्स्ट गुण सर्वर प्रतिक्रिया को जावास्क्रिप्ट स्ट्रिंग के रूप में लौटाता है, और आप इसके अनुसार इसका उपयोग कर सकते हैं :
उदाहरण
document.getElementById("demo").innerHTML = xhttp.responseText;
प्रतिक्रिया एक्सएमएल संपत्ति
XML HttpRequest ऑब्जेक्ट में एक इन-बिल्ट XML पार्सर है।
responseXML गुण सर्वर प्रतिक्रिया को XML DOM ऑब्जेक्ट के रूप में लौटाता है ।
इस संपत्ति का उपयोग करके आप प्रतिक्रिया को XML DOM ऑब्जेक्ट के रूप में पार्स कर सकते हैं:
उदाहरण
फ़ाइल cd_catalog.xml का अनुरोध करें और प्रतिक्रिया को पार्स करें:
xmlDoc = xhttp.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;
xhttp.open("GET",
"cd_catalog.xml", true);
xhttp.send();
आप इस ट्यूटोरियल के DOM चैप्टर में XML DOM के बारे में बहुत कुछ जानेंगे।
GetAllResponseHeaders () विधि
getAllResponseHeaders () विधि सर्वर प्रतिक्रिया से सभी शीर्षलेख जानकारी देता है।
उदाहरण
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
getResponseHeader () विधि
getResponseHeader () विधि सर्वर प्रतिक्रिया से विशिष्ट शीर्षलेख जानकारी देता है।
उदाहरण
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();