深入了解 JSONP

内容简介：深入了解 JSONP

JSONP（JSON with Padding） _wiki 是数据格式 JSON 的一种“使用模式”，可以让网页从别的源获取数据。

• 核心原理：由于 HTML 的 <script> 标签在浏览器里不遵守同源策略，所以可以设置该元素的 src 属性并通过为 URL 添加一个查询（?callback=aCallbackFunction）来实现跨源通信

上面的原理通俗点解释就是：本地页面通过动态添加 script 标签来调用服务器提供的 JavaScript 脚本，从而实现跨源通信。

并且，看到上面为 URL 添加查询，瞬间想到了 GET 请求。而事实上，JSONP 获取数据只能通过 GET 请求获得。

• 事实上，带有 src 属性的 HTML 标签（例如 <script>、<img>、<iframe>）都不遵守同源策略。

• 通过 JSONP 抓到的数据并不是 JSON，而是任意的 JavaScript 代码，用 JavaScript 解释器运行而不是用 JSON 解析器解析。

下面举一个例子，为了方便，我在本地服务器（ Wamp Server ）上进行测试。

// 当前页面：http://blog.percymong.com/
// 以下代码复制粘贴于浏览器控制端下运行

functionaddScriptTag(src){
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

// 点击触发回调函数
document.body.onclick = function(){
  addScriptTag('http://localhost/json-test?call=aCallbackFunction');
};

// 编写回调函数
functionaCallbackFunction(data){
  console.log(data);
  console.log('回调函数调用成功~');
};

/*************************************************************/

// 请求页面： http://localhost/json-test
// 实际为： http://localhost/json-test/index.html
// 注意，你要是这么玩的话，那上面的 HTML 页面里只能有 JavaScript 代码，不能有别的代码，否则会报错 *_*

// 上面页面（index.html）的内容如下

var json = { 
    "name": "percy",
    "age": 21, 
    "sex": "male", 
    "phone": "17826856303" 
}; 

aCallbackFunction(json); // 用来响应回调函数

上面例子返回的数据类型是 JSON，如果你愿意，可以返回任意类型的数据，比如一个字符串。并且一般也不这么玩（向一个 HTML 文档索要 JavaScript 脚本并且还不能有 HTML 的内容），一般都是向 js 文件（比如 responseData.js）索要。

网上有人说，JSONP 是 Ajax 实现跨源的一种方式，但是这种说法没有依据。

JSONP 和 Ajax 本质上是不同的东西，JSONP 的核心是动态添加 <script> 标签来调用服务器提供的 javascript 脚本，而 ajax 的核心是通过 XmlHttpRequest 获取非本页内容。

JSONP 曾经在开发人员之间极为流行，主要原因是它非常简单易用。但是它也有不足之处： 一是安全系数不够高，如果请求的域不安全，则请求的内容可能会夹杂有恶意代码。二是无法确定 JSONP 请求是否成功。

对于第二个缺点，现在已经可以得到解决： 使用 onerror 事件处理程序检错。 GlobalEventHandlers.onerror

// 各大浏览器亲测有效
functionaddScript(src){
  var script = document.createElement('script');
  script.src = src;
  script.onerror = function(){
    console.log('script failed load');
  };
  document.body.appendChild(script);
}
addScript('http://www.percymong.com/neverGetMe.js');

以上所述就是小编给大家介绍的《深入了解 JSONP》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• 深入了解原型
• 深入了解 Weex
• 深入了解SAPI
• 深入了解Synchronized原理
• 深入了解Kafka基本原理
• 深入了解JavaScript底层原理

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。