JavaScript与jQuery的JSONP中的跨域请求

Question

我试图写一个跨域请求（例如， 谷歌财经资源 ）从客户端（浏览器）按照类似下面的模板中的JavaScript 这里 ：

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中却失败了。 我的问题是：

1. JSONP为了使事情正常工作有什么不同？ 还是仅仅因为'finance.google.com'允许JSONP类型请求（而不是CORS类型请求）？
2. 是否可以通过严格使用JavaScript使其工作？ 如果是这样，我该如何实现？

谢谢大家的答案！

Answer 1

服务器必须使用Access-Control-Allow-Origin跨源XHR请求。 JSONP是一种解决它的机制。

该Wiki页面包含有关其工作原理的非常好的描述。 请参阅脚本元素注入部分。

https://zh.wikipedia.org/wiki/JSONP

这个stackoverflow答案显示了如何使用纯JavaScript进行jsonp调用。

有人能用外行人解释什么是JSONP吗？

Answer 2

首先，我将在此处显示请求的响应：

// [ { "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" : "" } ] 

实际上，您的javascript模板中的XHR请求有效。 当脚本尝试解析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()将能够解析文本。
jQuery ajax请求中的JSONP只是格式化请求响应的选项。 它与请求本身无关。 如果将ajax选项设置为dataType:"jsonp" ，则脚本将起作用。 并且，如果将其设置为dataType:"json"该脚本将不起作用。 dataType选项定义如何格式化响应。
当然，您也可以使用dataType:"text" 。 但是您不能直接将其用作对象或JSON。