码迷,mamicode.com
首页 > Web开发 > 详细

Ajax跨域请求

时间:2014-12-04 19:48:58      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   使用   sp   java   

一、什么是跨域

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

 

Ajax跨域请求

标签:style   blog   http   io   ar   color   使用   sp   java   

原文地址:http://www.cnblogs.com/jeemly/p/4143337.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!