JavaScript与jQuery的JSONP跨域请求
我试图从客户端（浏览器）使用JavaScript编写跨域请求（例如Google财经资源），方法如下所示：
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// Otherwise, CORS is not supported by the browser.
xhr = null;
}
return xhr;
}
var url = 'http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOGL';
var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
var jsonReturend = JSON.parse(text);
console.log(jsonReturend)
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
但它不起作用，因为（我认为）'finance.google.com'不包括Access-Control-Allow-Origin:在它的响应标题中，这是可以理解的。 不过，我在这里尝试了另一个在StackOverflow上建议的方法来使用JSONP，如下所示：
$.ajax({
url: 'http://finance.google.com/finance/info?client=ig&q=NASDAQ:GOOGL',
jsonp: "callback",
dataType: "jsonp",
data: {},
// Work with the response
success: function( response ) {
console.log( response ); // server response
}
});
它工作（也就是说，我得到了预期的JSON）！ 作为Web开发和一般JS的新手，我不确定为什么通过jQuery的JSONP进行AJAX调用正在工作，而在纯JavaScript中失败。 我的问题是：
谢谢大家的答案！
服务器使用Access-Control-Allow-Origin必须允许跨源XHR请求。 JSONP是一个解决它的机制。
这个wiki页面包含了很好的描述它为什么起作用的原因。 请参阅脚本元素注入部分。
https://en.wikipedia.org/wiki/JSONP
这个stackoverflow答案显示如何使用纯JavaScript来进行jsonp调用。
任何人都可以用通俗的话来解释JSONP是什么？
首先，我会在这里显示请求的回应：
// [ { "id": "694653" ,"t" : "GOOGL" ,"e" : "NASDAQ" ,"l" : "796.87" ,"l_fix" : "796.87" ,"l_cur" : "796.87" ,"s": "2" ,"ltt":"4:00PM EDT" ,"lt" : "Sep 2, 4:00PM EDT" ,"lt_dts" : "2016-09-02T16:00:02Z" ,"c" : "+5.47" ,"c_fix" : "5.47" ,"cp" : "0.69" ,"cp_fix" : "0.69" ,"ccol" : "chg" ,"pcls_fix" : "791.4" ,"el": "796.01" ,"el_fix": "796.01" ,"el_cur": "796.01" ,"elt" : "Sep 2, 7:45PM EDT" ,"ec" : "-0.86" ,"ec_fix" : "-0.86" ,"ecp" : "-0.11" ,"ecp_fix" : "-0.11" ,"eccol" : "chr" ,"div" : "" ,"yld" : "" } ]
其实，XHR请求在你的JavaScript模板中起作用。 脚本尝试解析JSON文本时发生错误（ var jsonReturend = JSON.parse(text); ）。 这是因为你要解析的文本不是一个好的json文本。 你看到上面的回应，它在开始时有两个斜线。 JSON不应该有它。
所以，为了使文本可以通过JSON.parse()解析，你需要删除那些斜线。 这里是你的JavaScript块的修复：
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
text = text.replace("// ","");// replace slashes, make it a pure JSON text
var jsonReturend = JSON.parse(text);
console.log(jsonReturend)
};
现在， JSON.parse()将能够解析文本。
JSONP中的jquery ajax请求只是格式化请求响应的一个选项。 它与请求本身无关。 如果将ajax选项设置为dataType:"jsonp" ，则该脚本将起作用。 如果您将其设置为dataType:"json"该脚本将不起作用。 dataType选项定义如何格式化响应。
当然，你也可以使用dataType:"text" 。 但是你不能直接使用它作为对象或JSON。