在几年前，天空一声巨响,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
- 获得数据执行回调
这里，我就直接上代码了.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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('www.example.com',{ 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 其实是和 标签 有很大的关系. JSONP最大的优势就是实现异步跨域的作用, 他到底是怎么做到的呢？
其实, JSONP就是利用script 的 src属性，实现跨域的功能.
talk is cheap, show the code
|
1 2 3 4 5 6 7 8 |
<script> function processJSON (json) { // Do something with the JSON response }; </script> <script src='http://www.girls.hustonline.net? callback=processJSON&name=jimmy&age=18'></script> |
上面的写法有点不符合前端风味. 说明一下, 其实processJSON,其实就相当于一个回调函数而已. 在script–src里面的内容我们来瞧一瞧. 使用jsoncallback 来指定回调函数名字, 并且传入一些参数
- name = jimmy
- age = 18
这就是前端发送JSONP的全部. 那应该怎么执行呢？或者说，返回的内容是什么呢？
很简单, 根据jsoncallback里面指定的函数名–processJSON. 在返回的js里面使用processJSON(data); 来执行.
服务器端返回的js内容.
|
1 2 3 |
processJSON({ message:"I've already received" }); |
然后,浏览器收到后,直接执行即可. 这里，我们来模拟一下服务器端盖怎样执行一个JSONP的函数.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const util = require('util'), http = require('http'), url = require('url'); let data = JSON.stringify({ message:"I've already received" }); http.createServer(function(req, rayon-sy">); http.createServer(function(req, 储 没办法充分利用. 所以,业界想到另外一种方法–JSONP. JSONP实际上和ajax没有半点关系，唯一相同的就是都是异步执行，而且JSONP完美解决了CD(cross domain)问题. 科技就是第一生产力, web发展so fast. 以前追求就是静态网页,显示信息而已。 现在，正朝着web2.0,webapp前进。 以前的单向交流 已经不能满足 需求了。 怎么办呢？ 改呗~ 所以，紧接着SSE,websocket 诞生了. 至今为止, 前端通信方式算是告一段落。 这里我们将围绕上述的几种通信方式进行,简单的介绍. 以下是几个技术的顺序.
ok~ 进入主题吧~ AJAX相信这个应该不用过多的讲解了吧.
这里，我就直接上代码了.
这样差不多就完成了一个ajax的简单模型。当然，我们也可以使用jquery提供的$.ajax函数, 只是他里面做了更多的兼容性和功能性. JSONPJSONP 就是 JSON with Padding… 我真的不知道这个名字的含义到时有什么卵用… JSONP原理JSONP 其实是和 标签 有很大的关系. JSONP最大的优势就是实现异步跨域的作用, 他到底是怎么做到的呢？
上面的写法有点不符合前端风味. 说明一下, 其实processJSON,其实就相当于一个回调函数而已. 在script–src里面的内容我们来瞧一瞧. 使用jsoncallback 来指定回调函数名字, 并且传入一些参数
这就是前端发送JSONP的全部. 那应该怎么执行呢？或者说，返回的内容是什么呢？
然后,浏览器收到后,直接执行即可. 这里，我们来模拟一下服务器端盖怎样执行一个JSONP的函数.
|
