web-dev-qa-db-ja.com

JsonPを使用したJavaScript XMLHttpRequest

リクエストパラメータを他のドメインに送信したい

クロススクリプトにはJsonPが必要であり、Jquery ajaxでJsonPを使用したことは既に知っています。

しかし、XMLHttpRequestを使用してクロススクリプトを実行する方法がわかりません

次のコードは、基本的なXMLHttpRequestコードです。

私はxhr.setRequestHeader()を変更する必要があると思うし、解析コードを追加する必要がある

アイデアをください

var xhr;
function createXMLHttpRequest(){    
    if(window.AtiveXObject){
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xhr = new XMLHttpRequest();
    }   
    var url = "http://www.helloword.com";   
}

function openRequest(){ 
    createXMLHttpRequest();
    xhr.onreadystatechange = getdata;
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded');
    xhr.send(data); 
}

function getdata(){
    if(xhr.readyState==4){
        if(xhr.status==200){
            var txt = xhr.responseText;
            alert(txt);
        }
    }   
}
javascriptajaxjsonp
26
happenask

JSONPはXMLHttpRequestsを使用しません。

JSONPが使用される理由は、XHRのクロスオリジン制限を克服するためです。

代わりに、データはスクリプトを介して取得されます。

function jsonp(url, callback) {
    var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        delete window[callbackName];
        document.body.removeChild(script);
        callback(data);
    };

    var script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    document.body.appendChild(script);
}

jsonp('http://www.helloword.com', function(data) {
   alert(data);
});

簡単にするために、リクエストに失敗した場合のエラー処理は含まれません。使用する script.onerror必要な場合。

66
Paul Draper
function JsonpHttpRequest(url, callback) {
    var e = document.createElement('script');
    e.src = url;
    document.body.appendChild(script); // fyi remove this element later /assign temp class ..then .remove it later
    //insetead of this you may also create function with  callback value and  use it instead
    window[callback] = (data) => {
        console.log(data);  // heres you data
    }
}
// heres how to use
function HowTouse(params) {
    JsonpHttpRequest("http://localhost:50702/api/values/Getm?num=19&callback=www", "www")
}
0
kunal verma

私はあなたがすでに答えを得ていることを知っていますが、ここで他の誰かが約束を使用する例が必要な場合はここにあります。

function jsonp(url) {
    return new Promise(function(resolve, reject) {
        let script = document.createElement('script')
        const name = "_jsonp_" + Math.round(100000 * Math.random());
        //url formatting
        if (url.match(/\?/)) url += "&callback="+name
        else url += "?callback="+name
        script.src = url;

        window[name] = function(data) {
            resolve(data);
            document.body.removeChild(script);
            delete window[name];
        }
        document.body.appendChild(script);
    });
}
var data = jsonp("https://www.google.com");
data.then((res) => {
    console.log(res);
});
0
Mat Weaver