如何在 JavaScript 中使用 JSONP 请求执行 Ajax 调用？ [复制]

Posted 2023-03-03

【中文标题】如何在 JavaScript 中使用 JSONP 请求执行 Ajax 调用？ [复制]

【英文标题】：How to perform Ajax call with JSONP request in JavaScript? [duplicate]

【发布时间】：2017-05-13 11:16:09

【问题描述】：

我使用纯 javascript 在另一个域（跨域）中进行 ajax 调用。

所以我需要指定 dataType。但我不知道，在哪里指定？。

我使用以下内容通过 javascript 进行 ajax 调用：

    var xmlhttp = new XMLHttpRequest();
    var url = 'www.mydomain.com/path/to/reach';

    xmlhttp.onreadystatechange = function () 
        if (xmlhttp.readyState == XMLHttpRequest.DONE) 
            if (xmlhttp.status == 200) 
                console.log('Log : ' + url + ' || Updated.');
            
            else if (xmlhttp.status == 400) 
                alert('There was an error 400');
            
            else 
                alert('something else other than 200 was returned');
            
        
    ;

    url = url + '?callback=my_callback_method';

    xmlhttp.open("GET", url, true);
    xmlhttp.send();

我也做了虚拟回调，

   function my_callback_method(res)
    //
   

但是，它不会起作用。我收到错误 原因：CORS 标头“Access-Control-Allow-Origin”丢失。

我的代码有什么问题？

有可能吗？

任何解决方案？

（我只需要 JavaScript 解决方案！）

【参考方案1】：

我收到错误原因：CORS 标头“Access-Control-Allow-Origin” 不见了。

这是因为您使用的是 XMLHttpRequest，而使用 XMLHttpRequest 需要 CORS。 JSONP 技术不涉及XMLHttpRequest 的使用。 JSONP 的诀窍是创建一个script 标签并让浏览器加载该脚本：

var script = document.createElement('script');
script.src = '//domain.com/path/to/jsonp?callback=my_callback_method'

document.getElementsByTagName('head')[0].appendChild(script);

此外，您需要创建一个全局函数，在您的情况下为 my_callback_method，并从 jsonp 脚本调用它。

当然，你的服务器端应该有实现，当获得对//domain.com/path/to/jsonp的请求时，它应该返回一个js文档，并调用callback=my_callback_method中指定的全局函数：

my_callback_method()