为何是 JSONP

2019年8月30日 226次阅读 来源: 离独逸

AJAX、JSON、JSONP

在 WEB 开辟中，经常见到诸如 AJAX、JSON、JSONP 这些名词。三者看起来很像，许多同砚尤其是没有系统相识过前端手艺系统的同砚，寻常只是借助相似 JQuery 这类库封装好的函数运用罢了，并不相识其道理。但这三种东西详细是什么，有什么关系和辨别却经常说不清楚。

接下来，会扼要引见一下三者的的寄义，重点论述 JSONP 的泉源和道理，以及为何 JSONP 不是 AJAX。

AJAX （Asynchronous JavaScript + XML）

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

  • standards-based presentation using XHTML and CSS;

  • dynamic display and interaction using the Document Object Model;

  • data interchange and manipulation using XML and XSLT;

  • asynchronous data retrieval using XMLHttpRequest;

  • and JavaScript binding everything together.

异步 JavaScript + XML，是在 2005 年由 Jesse James Garrett 提出的一个术语。 AJAX 并不是特指某种手艺, 形貌的是一种连系运用大批已有手艺的体式格局, 包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 另有最主要的 XMLHttpRequest 对象.

只管在 AJAX 中 X 代表 XML, 但现在更多的在运用 JSON，由于 JSON 具有许多上风，比方更轻量并且是 JavaScript 的一部分。在 AJAX 模子中 JSON 和 XML 都用于承载信息.

JSON（Javascript Object Notation）

JSON 是一种轻量级的数据交换花样。由道格拉斯·克罗克福特（Douglas Crockford）在 2012 年发明，并逐步庖代 XML 成为事实上的数据交换花样规范。

JSON 基于 JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999的一个子集。但采纳完整独立于言语的文本花样，并运用了相似于 C 言语家属的习气。

在 JSON 中，一共 6 种数据类型：

  • number：跟 Javascript 的数值一致，撤除不曾运用的八进制与十六进制花样，和一些编码细节

  • boolean：true 和 false

  • string：是由双引号围困的恣意数目Unicode字符的鸠合，运用反斜线转义

  • null：null

  • array：数组是值（value）的有序鸠合。一个数组以“[”（左中括号）最先，“]”（右中括号）完毕，值之间运用“,”（逗号）分开

  • object：对象是一个无序的“‘称号/值’对”鸠合。一个对象以“{”（左括号）最先，“}”（右括号）完毕，每一个“称号”后跟一个“:”（冒号）；“‘称号/值’ 对”之间运用“,”（逗号）分开

以及上面的恣意组合。

在 JavaScript 中有一个全局对象 JSON，包括两个要领 JSON.stringify() 和 JSON.parse()，用于序列化和剖析 JSON。

固然也有人运用 eval("(" + string + ")") 替代 JSON.parse() 来 剖析JSON，比拟而言这类体式格局的容错性更高。

JSONP（JSON with Padding）

由于 XMLHttpRequest 有同源战略，而在实际开辟中又经常会有跨域的需求，初期开辟者为相识决跨域题目而搞出来如许一个很是新鲜的东西。发生缘由和名字一样离奇，光听名字生怕没几个人晓得说的是个什么东西。

恰好 <script> 标签能够援用其他域下的静态资本，想一想我们有时刻在站点引入的数据统计类的 JS。

但我们要的是数据，而不是一段静态的 JS 代码，怎样办？

这还不简朴吗，让服务器动态天生 js ，再把数据放进去不就能够吗。为了辨别每一份数据，还须要针对返回的数据做一个标识，实在就是在数据表面包裹一个函数名。

然后须要浏览器端预先设置好如许一个函数，返回的数据就相当于一次实行历程，对猎取数据的处置惩罚。

总结

  1. AJAX 是一类手艺的鸠合，个中最主要的是 XMLHttpRequest

  2. JSON 是一个数据交换花样，也是现在事实上的规范

  3. JSONP 是为处置惩罚跨域题目搞出来的一种猎取数据的体式格局

举个栗子

接下来，用这个简朴的示例来申明如何经由过程 JSONP 的体式格局猎取数据，以及它究竟是如何事情的。

服务器

这里运用 Node.js 返回一段简朴的数据。

/**
 * 一个简朴的 http 服务器,返回 json 数据
 * 跟 Node 主页上的谁人典范例子没太大差异
 */

var http = require('http');
var urllib = require('url');

var host = '127.0.0.1';
var port = 9999;

var data = {'name': 'Mirreal', 'age': '24'};

http.createServer(function(req, res) {
  var params = urllib.parse(req.url, true);

  if (params.query && params.query.callback) {

    var str =  params.query.callback + '(' + JSON.stringify(data) + ')'; // jsonp
    res.writeHead(200, { 'Content-Type': 'application/javascript' });
    res.end(str);
  } else {
    res.end(JSON.stringify(data)); // 一般的json
  }

}).listen(port, host, function() {
  console.log('server is listening on port ' + port);
});

浏览器

// zepto 的写法
$.ajax({
  type: 'GET',
  url: 'http://127.0.0.1:9999',
  data: { _input_charset: 'utf-8' },
  dataType: 'jsonp',
  timeout: 300,
  context: $('body'),
  success: function(data){
    console.log(data)
  },
  error: function(xhr, type) {
    console.log('Ajax error!')
  }
});

如许就很轻松的经由过程 JSONP 的体式格局猎取到数据，我们好像也不须要体贴内里究竟是怎样一回事。但有时刻肯能会有人问起：“为何 jsonp 不能运用 POST 要领”的题目，实在轻微相识一下 JSONP 的道理，这类题目完整就不存在了。

虽然像 JQuery 这类库将 JSONP 封装到 $.Ajax() 上，但正确来说是不对的。由于 JSONP 只是经由过程动态地经由过程 <script> 标签去要求一段 JS 代码（或许叫数据），而非运用 XMLHttpRequest ，道理就像下面如许：

对 JSONP 的简朴封装

/**
 * 对 JSONP 的一种简朴封装
 *
 * @param {Object} options
 * @returns null
 */
function getJsonp(options) {

  var callbackName = options.callbackName;
  var url = options.url;


  var scriptElem = document.createElement('script');
  scriptElem.setAttribute('src', url + '?callback=' + callbackName);

  scriptElem.onload = function(e) {
    delete window[callbackName];
    this.parentNode.removeChild(this);
  };

  scriptElem.onerror = function(e) {
    console.log(e, 'load error');

    delete window[callbackName];
    this.parentNode.removeChild(this);
  };

  window[callbackName] = options.success;

  // 挪用
  document.querySelector('head').appendChild(scriptElem);
}

这段代码对 JSONP 举行一层简朴包装，挪用也很简朴：

getJsonp({
  'url': 'http://127.0.0.1:9999/',
  'callbackName': 'log',
  'success': function(data) {
     console.log('我是回调函数,我拿到数据了', data);
  }
});

看上去代码还挺长的，实际上中心代码不多，分三步：

1.建立一个 <script> 标签，并设置其 url

var scriptElem = document.createElement('script');
scriptElem.setAttribute('src', url + '?callback=' + callbackName);

2.设置回调函数

window[callbackName] = options.success;

这里简朴处置惩罚，直接把传入的回调函数设置成全局的

3.挪用

document.querySelector('head').appendChild(scriptElem);

实际上就是把 <script> 加到 html 文档中，如许就会去加载标签的内容，也就是一个 JS 文件。

但一般实际中跑的代码内容会更多，包括一些毛病掌握、参数拼接、超时处置惩罚、机能平安等方面的，但它依然清楚地形貌 JSONP 的道理。

平安

初期的浏览器处于平安层面的考量，制订同源战略，限定了一个源（origin）中加载文本或剧本与来自别的源（origin）中资本的交互体式格局。

然则跟着互联网的生长催生了跨域接见举行数据交互的需求，因而 JSONP 就发生了，以及厥后的 CORS 机制，许可 XMLHttpRequest 对象提议跨域的要求。

然则另一方面，也增加了平安风险，我们在运用的时刻应该越发郑重警惕，防备 XSS、CSRF 等进击。

其他

数据预览

之前遇到一个题目，在挪用一些接口返回的数据没法运用 Chrome 预览，本身写测试接口的时刻也遇到过。厥后发明，只是由于没有在 response 头部加上 Content-Type: application/javascript，仅此罢了。

    原文作者：离独逸
    原文地址: https://segmentfault.com/a/1190000004953537
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞