Ajax跨域请求

时间：2014-12-04 19:48:58 收藏：0 阅读：291

一、什么是跨域

浏览器出于安全的考虑，根据同源策略的限制，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其实本质上是不同的东西。