JavaScript XMLHttpRequest с использованием JsonP

Ответ 1

JSONP не использует XMLHttpRequests.

Причиной использования JSONP является преодоление ограничений XHR с кросс-началом.

Вместо этого данные извлекаются через 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);
});

В интересах простоты это не включает обработку ошибок, если запрос терпит неудачу. Используйте script.onerror, если вам это нужно.

Ответ 2

Я знаю, что вы уже получили ответ на этот вопрос, но если кто-то еще здесь хотел бы получить пример использования обещаний.

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

Ответ 3

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

Ответ 4

Для Google API я был вынужден использовать callback а также параметр v=1.0 - вот версия обещания. Без параметра v = 1.0 я получаю ошибку CORB (для моей версии, а также для другого кода ответов - однако jQuery $.ajax с dataType: "jsonp" добавляют этот параметр - поэтому я тоже его добавляю и начинаю работать)

Блокировка чтения из разных источников (CORB) заблокировала ответ из нескольких источников в https://ajax.googleapis.com/ajax/services/feed/load?callback=jsonp1555427800677 с текстом MIME text/javascript. См. Https://www.chromestatus.com/feature/5629709824032768 для получения дополнительной информации.

function jsonp(url) {
  return new Promise(function(resolve, reject) {
    var s = document.createElement('script');
    var f="jsonp"+(+new Date()), b=document.body;
    window[f] = d=>{ delete window[f]; b.removeChild(s); resolve(d); };
    s.src='${url}${url.includes('?')?'&':'?'}callback=${f}&v=1.0';
    b.appendChild(s);
  })
}

async function send() {
    let r = await jsonp("http://ajax.googleapis.com/ajax/services/feed/load");
    console.log(r);
}

<button onclick="send()">Send JSONP</button>

Ответ 5

Вы не можете выполнить Cross Scripting с помощью XMLHttpRequest. Если вы хотите перекрещиваться с доменом без JQuery, вы должны создать новый script node и установить для него атрибут src.