首页 > 代码库 > Ajax跨域请求
Ajax跨域请求
一、什么是跨域
浏览器出于安全的考虑，根据同源策略的限制，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=http://www.mamicode.com/"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=http://www.mamicode.com/getjsondata(id);// 模拟数据获取 假设为{‘sex‘:‘男‘,‘address‘:‘北京市中南海‘} string backjsondata=http://www.mamicode.com/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=http://www.mamicode.com/getjsondata(id);// 模拟数据获取 假设为{‘sex‘:‘男‘,‘address‘:‘北京市中南海‘} string backjsondata=http://www.mamicode.com/callback+"(jsondata)";Response.Write(backjsondata);Response.End();
注意虽然jquery把jsonp封装进了ajax，但ajax和jsonp其实本质上是不同的东西。
Ajax跨域请求
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。