javascript サンプル XMLHttpRequestのレスポンスを取得するには?




xmlhttprequest response (4)

pure JavaScript XMLHttpRequestを使用する簡単な方法。 custom headerを設定することはできますが、要件に基づいてオプションで使用します。

1. POSTメソッドの使用:

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);
}

POSTメソッドを使用してparamsを送信できます。

2. GETメソッドを使用する:

下記の例を実行して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();
}

XMLHttpRequestを使用してリモートURLのコンテンツをロードし、アクセスされたサイトのHTMLをJS変数に格納する方法を知りたいと思います。

たとえば、 http://foo.com/bar.phpのHTMLをロードして警告したい場合、どうすればいいですか?


Answer #1

XMLHttpRequestでは、 XMLHttpRequestを使用すると、以下のような例外が発生することがあります

 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);

Answer #2

私はfetch調べることをお勧めします。 それはES5と同等であり、約束を使用します。 それははるかに読みやすく、簡単にカスタマイズ可能です。

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

詳細情報:

Mozillaドキュメント

私は使用できますか(88%、2018年3月)

Matt Walshチュートリアル


Answer #3

XMLHttpRequest.onreadystatechangeXMLHttpRequest.readyState等しいときは、 XMLHttpRequest.responseTextXMLHttpRequest.onreadystatechange取得できます。

以下はその例です(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だけでなく、ブラウザ固有のメモリーリークやバグをカバーするクロスブラウザーとの互換性を向上させるため、また、 jQueryを使用することもできます。

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

localhostで実行していないときは、JavaScriptの同じ起点ポリシーを考慮に入れておく必要があります。 あなたのドメインでプロキシスクリプトを作成することを検討したいかもしれません。





xmlhttprequest