在几年前，天空一声巨响,ajax 闪亮登场. 前端宝宝们如获至宝~ 已经表单提交神马的, 真的太 心累了. 有了ajax之后, 网页的性能可大幅提升，告别刷新，告别如水的流量. 不过，长江后浪推前浪，一代更比一代强. 由于ajax被同域限制着, 导致, 多服务器配置，云服务资源的存储 没办法充分利用. 所以,业界想到另外一种方法--JSONP. JSONP实际上和ajax没有半点关系，唯一相同的就是都是异步执行，而且JSONP完美解决了CD(cross domain)问题.

科技就是第一生产力, web发展so fast. 以前追求就是静态网页,显示信息而已。 现在，正朝着web2.0,webapp前进。 以前的单向交流 已经不能满足 需求了。 怎么办呢？

改呗~

所以，紧接着SSE,websocket 诞生了. 至今为止, 前端通信方式算是告一段落。 这里我们将围绕上述的几种通信方式进行,简单的介绍.

以下是几个技术的顺序.

ajax

JSOP

SSE

websocket

ok~ 进入主题吧~

AJAX

相信这个应该不用过多的讲解了吧.差不多就4步:

创建xhr对象

监听请求

设置回调

设置参数

发送xhr

获得数据执行回调

这里，我就直接上代码了.

var sendAjax = (function() { var getXHR = (function() { var xhr; if(window.XHRHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveObject("Microsoft.XMLHTTP"); } return xhr; })(); return function(url,opts){ //url为目标地址 var xhr = getXHR(), data; xhr.onreadystatechange = function(){ if(xhr.readyState===4||xhr.status===200){ data = JSON.parse(xhr.responseText); //将data解析为json对象 opts.callback(data); } } xhr.setRequestHeader('Content-Type','application/json'); xhr.open(opts.method,url); //写入参数 xhr.send(JSON.stringify(opts.data)); //将参数json字符化 } })(); //调用执行 sendAjax('',{ callback:function(data){ //... }, data:{ name:'JIMMY', age:18 } })

这样差不多就完成了一个ajax的简单模型。当然，我们也可以使用jquery提供的$.ajax函数, 只是他里面做了更多的兼容性和功能性.

JSONP

JSONP 就是 JSON with Padding... 我真的不知道这个名字的含义到时有什么卵用...一开始在使用JSONP时, 就是使用jquery的$.ajax函数就可以了. 但，这造成了一个很不好的impression. 总是让我们以为,JSONP 和 ajax有什么关联似的. 而，事实上，他们两个是完全不同的机制. xhr原理大家已经很清楚了，就是完完全全的异步操作. 但JSONP的原理是什么呢？

JSONP原理

JSONP 其实是和< script> 标签 有很大的关系. JSONP最大的优势就是实现异步跨域的作用, 他到底是怎么做到的呢？

其实, JSONP就是利用script 的 src 属性，实现跨域的功能.

talk is cheap, show the code

<script> function processJSON (json) { // Do something with the JSON response }; </script> <script src='? callback=processJSON&name=jimmy&age=18'></script>

上面的写法有点不符合前端风味. 说明一下, 其实processJSON,其实就相当于一个回调函数而已. 在script--src里面的内容我们来瞧一瞧. 使用jsoncallback 来指定回调函数名字, 并且传入一些参数

name = jimmy

age = 18

这就是前端发送JSONP的全部. 那应该怎么执行呢？或者说，返回的内容是什么呢？

很简单, 根据jsoncallback里面指定的函数名--processJSON. 在返回的js里面使用processJSON(data); 来执行.

服务器端返回的js内容.

processJSON({ message:"I've already received" });

然后,浏览器收到后,直接执行即可. 这里，我们来模拟一下服务器端盖怎样执行一个JSONP的函数.

const util = require('util'), http = require('http'), url = require('url'); let data = JSON.stringify({ message:"I've already received" }); http.createServer(function(req, res) { req = url.parse(req.url, true); if (!req.query.callback) res.end(); console.log(`name is ${req.query.name} and his age is ${req.query.age}`); res.writeHead(200, { 'Content-Type': 'application/javascript' }) res.end(req.query.callback + "('" + data + "')") }).listen(80)

ok~ 上面基本上就可以完成一个简单的JSONP函数执行。 当然,express 4.x 里面也有相关的JSONP 操作。 有兴趣的同学可以看一看.then, 我们可以模拟一下实在的JSONP请求.上面是直接将script 写死在html内部, 这样造成的结果可能会阻塞页面的加载. 所以，我们需要以另外一种方式进行，使用异步添加script方法.

var sendJSONP = function(url,callbackName){ var script = docuemnt.createELement('script'); script.src = `${url}&callback=${callbackName}`; document.head.appendChild(script); } var sayName = function(name){ console.log(`your name is ${name}`); } sendJSONP('?name=jimmy','sayName');

上面就是一个精简版的JSONP了。 另外，也推荐使用jquery的getJSON和$.ajax进行请求.先看一下getJSON

$.getJSON("?callback=?", function(result){ console.log(result); });

这里，我们需要关注一下url里面中 callback=? 里的 ? 的内涵. jquery使用自动生成数的方式, 省去了我们给回调命名的困扰。 其实，最后 ? 会被一串字符代替，比如: json23153123 . 这个就代表你的回到函数名.

不过，还是推荐使用$.ajax,因为你一不小心就有可能忘掉最后的 ? .

使用 $.ajax 发送jsonp

$.ajax({ url: '?name=jimmy', dataType: 'jsonp', success: function(name){ console.log(name); } });

这样，我们就可以利用jquery很简单的发送jsonp了.

SSE

ajax和JSONP 都是 client-fetch的操作. 但是有时候, 我们更需要服务器主动给我们发信息. 比如，现在的APP应用，完全可以实现服务器发送, 然后Client再处理. 而，SSE就是帮助我们向webapp靠近.

SSE 全称就是 Server-Sent Events. 中译 为 服务器推送 .