• 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="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其实本质上是不同的东西。 

  • 相关阅读:
    多态
    扩展方法
    git 新账户链接新仓库地址
    获取数据类型
    解构赋值
    var let const 无关键字定义变量
    http
    onmouseover、onmouseout、onmouseenter、onmouseleave
    setInterval、setTimeout、requestAnimationFrame
    vue的prop父子组件传值
  • 原文地址:https://www.cnblogs.com/jeemly/p/4143337.html
Copyright © 2020-2023  润新知