web-dev-qa-db-fra.com

JavaScript XMLHttpRequest utilisant JsonP

Je veux envoyer des paramètres de requête à un autre domaine 

Je sais déjà que Cross Scripting a besoin de JsonP et j'ai utilisé JsonP avec Jquery ajax

mais je ne comprends pas comment faire des scripts croisés en utilisant XMLHttpRequest 

code suivant mon code XMLHttpRequest de base.

je suppose que j'ai besoin de modifier xhr.setRequestHeader() et d'ajouter du code d'analyse 

donnez-moi s'il vous plaît aucune idée 

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
25
happenask

JSONP n'utilise pas XMLHttpRequests.

JSONP est utilisé pour surmonter les restrictions d'origine XHR croisées.

Au lieu de cela, les données sont récupérées via un script.

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

Par souci de simplicité, cela n'inclut pas la gestion des erreurs si la demande échoue. Utilisez script.onerror si vous en avez besoin.

63
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

Je sais que vous avez déjà la réponse, mais si quelqu'un d'autre ici voulait un exemple d'utilisation de promesses, en voici une.

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