使用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页发送的数据

`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

`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的使用。

使用Jquery中getJSON方法实现跨域

使用Jquery中getJSON方法实现跨域

你可能感兴趣的:(jquery)