跨域请求之JSONP 一
跨域请求的方式有很多种，
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标记（还有一些清理工作如避免部分浏览器内存泄露等）。
接口
示例：
<!DOCTYPE HTML>
<html>
<head>
<title>sjax_0.1.js by snandy</title>
</head>
<body>
<p id=
"p1"
style=
"background:gold;"
></p>
<input type=
"button"
value=
"Get Name"
onclick=
"clk()"
/>
<script type=
"text/javascript"
>
function
clk(){
Sjax.load(
(){
document.getElementById(
'p1'
).innerHTML =
'Hi,'
+ jsonp.name;
}
);
}
</script>
</body>
</html>
|
这个html实现一个最简单的前后台交互功能，点击按钮“Get Name”，获取到name后显示在段落P上。
clk函数中调用Sjax.load方法，Sjax中的S指script。之前我的Ajax系列中使用的Ajax命名，这里就使用了Sjax。
请求的后台url是jsonp.js，它返回如下
jsonp = {name:
'jack'
};
|
因为是测试，这里使用最简单的方式实现。请求的后台其实不必是js文件，可以是PHP，java等任何后台语言，它们可能会连接数据库进行一系列的业务查询。总之它最后返回的结构必须变量jsonp，这个变量就是一个js对象，至于有多复杂则无需关注。
好了，试试吧
<script type="text/javascript">// <![CDATA[
Sjax =
function(win){
var isIE = /*@cc_on!@*/!1,
doc = win.document,
head = doc.getElementsByTagName('head')[0];
function request(url,success,timestamp){
var script = doc.createElement('script');
function callback(){
if(typeof jsonp != 'undefined'){
success(jsonp);
}else{
alert('warning: jsonp did not return.');
}
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if( head && script.parentNode ){
head.removeChild(script);
}
}
if(isIE){
script.onreadystatechange = function(){
var readyState = this.readyState;
if(readyState == 'loaded' || readyState == 'complete'){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
if(timestamp){
url += '?ts=' + (new Date).getTime();
}
script.src = url;
head.insertBefore(script,head.firstChild);
}
return {load:request};
}(this);
function clk(){
Sjax.load(
'http://files.cnblogs.com/snandy/jsonp.js',
function(){
document.getElementById('p1').innerHTML = 'Hi,' + jsonp.name;
}
);
}
// ]]></script>
跨域请求之JSONP 二
续上篇，加两个实用功能
1，增加data属性，请求参数
2，增加scope属性，可以让回调函数在指定的上下文中执行
接口如下
示例
<title>sjax_0.2.js by snandy</title>
>
clk(){
Sjax.load(
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,{
fn :
(){alert(jsonp.name)},
data : {a:
'1'
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,b:
'2'
timestamp :
true
});
}
</script>
</body>
|
