2016-12-29 114 views
1

我使用纯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!)

+0

嗨,[我的回答](http://stackoverflow.com/a/41374529/2545680)的帮助? –

+0

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

+0

伟大,祝你好运) –

回答

1

我得到错误的原因: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() 
+0

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

+0

@charlietflm是的,谢谢,更新 –

1

我终于偶然发现了这个链接"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 
+0

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

+0

你把它放在服务器端。 –

+0

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