XMLHttpRequest की प्रतिक्रिया कैसे प्राप्त करें?

Question

मैं यह जानना चाहूंगा कि किसी दूरस्थ URL की सामग्री को लोड करने के लिए XMLHttpRequest का उपयोग कैसे करें और एक जेएस चर में संग्रहीत एक्सेस साइट का HTML है।

कहो, अगर मैं http://foo.com/bar.php का HTML लोड और अलर्ट () करना चाहता हूं, तो मैं यह कैसे करूंगा?

Comments

के संभावित डुप्लिकेट क्या मैं XMLHttpRequest में याद आ रही है?

— नूह विदरस्पून

यदि आप JS लाइब्रेरी के लिए खुले हैं, तो jQuery वास्तव में .load () विधि: api.jquery.com/load

— scunliffe

भगवान का शुक्र है, अंत में एक Google परिणाम जो jQuery को संबोधित नहीं करता है: |

— सैम क्लोएघर्स

Answer 1

जब आप के बराबर XMLHttpRequest.responseTextमें आप इसे प्राप्त कर सकते हैं ।XMLHttpRequest.onreadystatechangeXMLHttpRequest.readyStateXMLHttpRequest.DONE

यहाँ एक उदाहरण है (IE6 / 7 के साथ संगत नहीं)।

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);
    }
}
xhr.open('GET', 'http://example.com', true);
xhr.send(null);

बेहतर क्रॉसबोवर संगतता के लिए, न केवल IE6 / 7 के साथ, बल्कि कुछ ब्राउज़र-विशिष्ट मेमोरी लीक या बग्स को कवर करने के लिए, और साथ ही ajaxical अनुरोधों को पूरा करने के लिए कम वर्बोसिटी के लिए, आप jQuery का उपयोग कर सकते हैं ।

$.get('http://example.com', function(responseText) {
    alert(responseText);
});

ध्यान दें कि जब आप लोकलहोस्ट पर नहीं चल रहे हों तो जावास्क्रिप्ट के लिए समान मूल पॉलिसी को ध्यान में रखना चाहिए । आप अपने डोमेन पर एक प्रॉक्सी स्क्रिप्ट बनाने के लिए विचार कर सकते हैं।

Comments

हम उस प्रॉक्सी को कैसे बनाते हैं?

— क्रिस - जूनियर

एक आकर्षण की तरह काम करता है :)

— अनुराग

Answer 2

मैं सुझाव दूंगा fetch। यह ES5 समकक्ष है और वादों का उपयोग करता है। यह बहुत अधिक पठनीय और आसानी से अनुकूलन योग्य है।

const url = "https://stackoverflow.com";
fetch(url)
    .then(
        response => response.text() // .json(), etc.
        // same as function(response) {return response.text();}
    ).then(
        html => console.log(html)
    );

Node.js में, आपको fetchउपयोग करके आयात करना होगा:

const fetch = require("node-fetch");

अगर आप इसे सिंक्रोनाइज़ करना चाहते हैं (टॉप स्कोप में काम नहीं करता है):

const json = await fetch(url)
  .then(response => response.json())
  .catch((e) => {});

और जानकारी:

मोज़िला प्रलेखन

क्या मैं उपयोग कर सकता हूं (94% अक्टूबर 2019)

मैट वॉल्श ट्यूटोरियल

Answer 3

XMLHttpRequestसाथ उपयोग करने का सरल तरीका pure JavaScript। आप सेट कर सकते हैं custom headerलेकिन यह वैकल्पिक आवश्यकता के आधार पर उपयोग किया जाता है।

1. पोस्ट विधि का उपयोग:

window.onload = function(){
    var request = new XMLHttpRequest();
    var params = "UID=CORS&name=CORS";

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('POST', 'https://www.example.com/api/createUser', true);
    request.setRequestHeader('api-key', 'your-api-key');
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);
}

आप पोस्ट विधि का उपयोग कर पैरामीटर भेज सकते हैं।

2. जीईटी विधि का उपयोग:

कृपया उदाहरण के नीचे दौड़ें और JSON प्रतिक्रिया प्राप्त करें ।

window.onload = function(){
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
    request.send();
}

Comments

मेरे लिए ठीक काम करता है।

— मयूर एस

अच्छा उदाहरण। अच्छा कर रहा है।

Answer 4

में XMLHttpRequest, XMLHttpRequest.responseTextनीचे की तरह अपवाद का उपयोग कर सकते हैं

 Failed to read the \'responseText\' property from \'XMLHttpRequest\': 
 The value is only accessible if the object\'s \'responseType\' is \'\' 
 or \'text\' (was \'arraybuffer\')

XHR से प्रतिक्रिया का उपयोग करने का सबसे अच्छा तरीका निम्नानुसार है

function readBody(xhr) {
    var data;
    if (!xhr.responseType || xhr.responseType === "text") {
        data = xhr.responseText;
    } else if (xhr.responseType === "document") {
        data = xhr.responseXML;
    } else {
        data = xhr.response;
    }
    return data;
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        console.log(readBody(xhr));
    }
}
xhr.open('GET', 'http://www.google.com', true);
xhr.send(null);