使用Jquery中getJSON方法实现跨域
使用Jquery中getJSON方法实现跨域
一、什么是跨域?
因为javascript同源策略的限制,a.com 域名下的js脚本无法操作b.com或是c.a.com域名下的对象。
Ajax的应用中,由于安全的问题,浏览器默认是不支持javascript跨域调用的。
1.主域相同,子域不同,如xxx.aaa.com和yyy.aaa.com
2.域名相同,端口不同,如xxx.aaa.com:8000和xxx.aaa.com
3.域名相同,协议不同,如http://www.aaa.com/和https://www.aaa.com/
4.主机相同,用ip和域名的,http://127.0.0.1/和http://localhost/
都是会造成跨域的。网上有很多解决办法,下面介绍使用JQuery的getJSON方法处理跨域问题。
二、使用Jquery的$.getJSON方法处理跨域的例子
客户端http://www1.aaa.com/aaa.aspx(递交数据到www2.aaa.com的bbb.aspx页)
01 |
< html > |
02 |
< head >< title >演示</ title > |
03 |
</ head > |
04 |
< body > |
05 |
< script src = "jquery.min.js" ></ script > |
06 |
< script type = "text/javascript" > |
07 |
var url="http://www2.aaa.com/bbb.aspx?action=add&callback=?"; |
08 |
var data={username:"sanjer",userid:"110"}; |
09 |
//或者这样 |
10 |
//var _username="sanjer";var _userid="110";var data={username:_username,userid:_userid}; |
11 |
$.getJSON(url,data,function(backdata){ |
12 |
alert(backdata); |
13 |
}); |
14 |
</ script > |
15 |
</ body > |
16 |
</ html > |
服务器端http://www2.aaa.com/bbb.apsx后台程序接收收来自www1.aaa.com/aaa.apsx页发送的数据
C#
01 |
string action=Request.QueryString.Get( "action" ); |
02 |
|
03 |
string callback=Request.QueryString.Get( "callback" ); |
04 |
|
05 |
//Jquery经过自己的处理后 |
06 |
//1.将callback=?的问号替换为回调方法的名称2.将data里的数据附加到url后面 |
07 |
//发送出去的请求会其实会变成 |
08 |
|
09 |
//http:www2.aaa.com/bbb.aspx?action=add&callback=JQUET0988002&username=sanjer&userid=110 |
10 |
|
11 |
//所以客户端发送的data数据还是通过QueryString接收 |
12 |
|
13 |
string username=Request.QueryString.Get( "username" ); |
14 |
|
15 |
string userid=Request.QueryString.Get( "userid" ); |
至此把从aaa.aspx页面通过js发送的数据跨域递交到bbb.aspx了,如果还需要bbb.aspx处理后再把另外一些结果数据返回给aaa.aspx怎么做呢?
服务器端http://www1.aaa.com/bbb.apsx
C#
1 |
//...处理一些逻辑内容后接下来要返回数据给js |
2 |
string backjsondata= "({'usersex':'男','useraddress':'北京市海淀区'})" ; |
1 |
//要将返回的数据封成json格式的字符串,具体的上百度上查下json的数据格式 |
1 |
//简单的写法就是({'变量名':'变量值'}) |
2 |
//多个的话写成({'变量名1':'变量值1','变量名2':'变量值2',.....}) |
1 |
string mybackdata=callback+backjsondata; |
2 |
|
3 |
//这里callback变量一定要返回回去,并把已包装成JSON的格式({'usersex':'男'})的json字符串和callback一并返回 |
4 |
|
5 |
Response.Write(mybackdata); |
6 |
Response.End(); |
客户端aaa.aspx页面的回调函数里读取usersex和useraddess数据
1 |
$.getJSON(url,data,function(backdata){ |
2 |
alert(backdata.usersex); |
3 |
alert(backdata.useraddress); |
4 |
}); |
5 |
//客户端可以这样直接读取服务器端返回来的json数据内容 |
这里有几点需要总结注意一下:
1.发送到数据接收方的地址后面一定要加上callback=?这样的参数,且这个?是会被Jquery自动替换成回调方法的名称。(在Jquery1.4中可以自己指定回调方法的名称了)
2.注意js脚本发送数据的data不能写成var data="{'username':'sanjer','userid':'110'}";而是要写成var data={username:'sanjer',userid:'110'},这点要注意。要想接收服务器端返回的数据必须服务器端封装数据为JSON格式字符串并和callback值一道返回。(请仔细看上面的示例代码)。
3.由于调用Jquery的$.getJSON方法时,Jquery有自己的处理,实际上通过script的scr请求的(具体不说了,Jquery做了就不管了),但要知道,数据最终还是通过url后面通过get方式发送数据出去的,这就决定了,发送的data数据量不能太多,否则造成url太长接收失败(getJSON方式是不可能有post方式递交的)。
4.如果真需要跨域发送大数据量就不要用jquery提供的getJSON方法了,得寻求其他法子,具体的做法我打算在下篇文章中写一下。
5.以上的例子是站在两方面的开发都由你掌控的前提下的。且要注意服务器程序端的安全系数不高(建议数据接收端这边不要放重要、敏感的逻辑处理单元)。
第一次写博客,以上文字难免有错误或遗漏,望各位看官包涵。聊以为一给自己备忘,二给不大清楚跨域处理的朋友推荐下getJSON的使用。