一、什么是跨域
浏览器出于安全的考虑,根据同源策略的限制,AJAX只能访问本域下的资源,而不能跨域访问。也就是说,domain1.com站点中的AJAX只能访问本站点下的资源,而不能跨域访问domain2.com站点中的资源,这就是AJAX跨域问题。
二、如何解决跨域问题
1.使用AJAX代理解决AJAX跨域问题。
即在domain1.com站点中使用动态网页(ASP,PHP,JSP等)作为代理页面读取domain2.com站点中的资源, 然后在domain1.com站点中使用AJAX读取本域下的代理页面。由于连接是由本服务器发起的,而且数据返回也是来自于本的服务器,在浏览器看来就不算是跨域了。
2.使用Jquery的$.getJSON方法处理跨域
客户端html代码如下:
<html> <head><title>演示</title> </head> <body> <script src="jquery.min.js"></script> <script type="text/javascript"> var url="http://www.domain2.com/a.aspx?id=007&callback=?"; $.getJSON(url,function(data){ alert(data.address);<!-- 服务端返回的数据--> }); </script> </body> </html>
需要注意发送到数据接收方的地址后面一定要加上callback=?这样的参数,且这个?是会被Jquery自动替换成回调方法的名称。或自定义互调函数名称。
服务端代码如下:
string id=Request.QueryString.Get("id"); string callback=Request.QueryString.Get("callback"); string jsondata=getjsondata(id);// 模拟数据获取 假设为{'sex':'男','address':'北京市中南海'} string backjsondata=callback+"(jsondata)"; Response.Write(backjsondata); Response.End();
注意由于数据最终还是通过url后面通过get方式发送数据出去的,所以发送的data数据量不能太多,否则造成url太长接收失败。
3.使用JsonP处理跨域
JSONP协议允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
客户端htmll代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript" src=jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://www.domain2.com/a.aspx?id=007", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"addressHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(json){ alert('您查询到的地址是' + json.address); }, error: function(){ alert('获取数据失败'); } }); }); </script> </head> <body> </body> </html>
后端代码如下:
string id=Request.QueryString.Get("id"); string callback=Request.QueryString.Get("callback"); string jsondata=getjsondata(id);// 模拟数据获取 假设为{'sex':'男','address':'北京市中南海'} string backjsondata=callback+"(jsondata)"; Response.Write(backjsondata); Response.End();
注意虽然jquery把jsonp封装进了ajax,但ajax和jsonp其实本质上是不同的东西。