如何在JavaScript中使用JSONP请求执行Ajax调用？

问题描述：

我使用纯JavaScript在另一个域（跨域）中进行ajax调用。如何在JavaScript中使用JSONP请求执行Ajax调用？

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

我使用以下方法来使AJAX调用使用javascript：

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！）

嗨，[我的回答]（http://stackoverflow.com/a/41374529/2545680）的帮助？ –

耶的男人，它的作品真棒... –

伟大，祝你好运） –

答

我得到错误的原因：CORS头“访问控制允许来源” 失踪。

这是因为您使用的是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()

也可能会提及api还必须为jsonp提供服务，并非全部都是做 – charlietfl

@charlietflm是的，谢谢，更新 –

答

我终于偶然发现了这个链接"A CORS POST request works from plain javascript, but why not with jQuery?"是指出，jQuery的添加

Access-Control-Request-Headers: x-requested-with

头所有CORS请求。 jQuery 1.5.2不会这样做。此外，根据同一问题，设置服务器响应标头为

Access-Control-Allow-Headers: *

不允许响应继续。您需要确保响应头特别包含所需的头文件。即：

Access-Control-Allow-Headers: x-requested-with

有更多的CORS比这个，没有一个是控制客户端 – charlietfl

你把它放在服务器端。 –

很好，但是这是一个超过服务器端CORS要求的简化 – charlietfl

如何在JavaScript中使用JSONP请求执行Ajax调用？

相关推荐