跨域请求的方式有很多种，
1，iframe
2，document.domain
3，window.name
4，script
5，XDomainRequest (IE8+)
6，XMLHTTPRequest (Firefox3.5+)
7，postMessage (HTML5)
8，后台代理
...
它们有各自的优缺点，返回的数据格式也各不同，应根据需求慎重选择。比如iframe返回html片段就比较适合，费老劲用它返回JSON就得不偿失了。这篇开始我将打造一个实用的跨域请求工具Sjax。使用script请求的最大缺点，挑战是错误处理。比如404错误，它不象XMLHTTPRequest能准确的返回状态码404。我把这个放在最后一篇。
本系列主要描述以上列举的方式4，即通过script返回JSON格式数据数据。这种方式现在称为JSONP。JSON是目前前后台沟通使用最流行，也最广泛的格式之一。相对于早期的AJAX返回XML（AJAX中的X就是XML），JSON显得更轻量级，没有多余的Tag标记，解析也是原生的。XML返回到前端后先转成文档，通过DOM API一层层的解析。解析DOM是开销比较大的，尤其在早期的IE版本中（IE6/7/8），core js与dom沟通的代价是很大的。
JSONP的实现思路很简单
1, 前端创建script标记，设置src，添加到head中（你可以往body中添加）。
2, 后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据。
3, 回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）。
接口
view sourceprint?1 Sjax.load(
2 url, // 跨越请求的URL
3 success, // 回调函数，必须定义一个形参，用于接收后台返回的全局变量jsonp （约定后台返回如jsonp = {...}结构）
4 timestamp, // 传true会加一个时间戳，防止缓存，默认不加
5 );
示例：
view sourceprint?01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <title>sjax_0.1.js by snandy</title>
06 <script src="https://files.cnblogs.com/snandy/sjax_0.1.js"></script>
07 </head>
08 <body>
09 <p id="p1" style="background:gold;"></p>
10 <input type="button" value="Get Name" onclick="clk()"/>
11 <script type="text/javascript">
12 function clk(){
13 Sjax.load(
14 https://files.cnblogs.com/snandy/jsonp.js,
15 function(){
16 document.getElementById(p1).innerHTML = Hi, + jsonp.name;
17 }
18 );
19 }
20 </script>
21 </body>
22 </html>
这个html实现一个最简单的前后台交互功能，点击按钮“Get Name”，获取到name后显示在段落P上。
clk函数中调用Sjax.load方法，Sjax中的S指script。之前我的Ajax系列中使用的Ajax命名，这里就使用了Sjax。
请求的后台url是jsonp.js，它返回如下
view sourceprint?1 jsonp = {name:jack};
因为是测试，这里使用最简单的方式实现。请求的后台其实不必是js文件，可以是php，java等任何后台语言，它们可能会连接数据库进行一系列的业务查询。总之它最后返回的结构必须变量jsonp，这个变量就是一个js对象，至于有多复杂则无需关注。
好了，试试吧
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
我要评论
网友评论