• JQuery 的跨域方法 可跨任意网站


    JS的跨域问题,很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定。

    下面开始贴出方法。

    //跨域(可跨所有域名)
            $.getJSON("http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?",function(json){
             
             //要求远程请求页面的数据格式为: ?(json_data)  
             //例如:
             //?([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}])
             alert(json[0]._name);
    
             });  

    意,getregion.aspx中,在输出JSON数据时,一定要用Request.QueryString["jsoncallback"],将获取的内容放到返回JSON数据的前面,假设实际获取的值为42342348,那么返回的值就是 42342348([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}])

    因为getJSON跨域的原理是把?随机变一个方法名,然后返回执行的,实现跨域响应的目的。

    具体getJSON的使用说明,请参考JQUERY手册。需要指出的一点是getJSON利用的jsonp需要客户端与服务端作出配合。

    1. 客户端传递的URL里要包含callback变量,以形如callback=?的形式结尾。(jquery会随机生成一个字符串替换?传递给服务端)
    2. 服务端获取客户端传递的callback的值callbackValue,和需要传递的json字符串构成 callbackValue.’(’.json.’)'传回给客户端(示例为php字符串连接方式,其他语言类似)

    不出意外的话应该已经可以跨域读取了。
    同时输出json数据时候{之前的是(

    下面一个是跨域执行的真实例子:

    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    //跨域(可跨所有域名)
        $.getJSON("http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?", { id: 0, action: 'jobcategoryjson' }, function(json) {
    
            alert(json[0].pid);
            alert(json[0].items[0]._name);
    
        }); 
    </script>

    jquery 的ajax 默认是异步的, 跨域用同步试,ajax jsonp

    ========================

     注意这里调用的地址中jsoncallback=?是关键的所在!其中,符号会被Query自动替换成其他的回调方法的名称,具体过程和原理我们这里不理 会。我们关心的是jsoncallback=?起什么作用了?原来jsoncallback=?被替换后,会把方法名称传给服务器。我们在服务器端要做什 么工作呢?服务器要接受参数jsoncallback,然后把jsoncallback的值作为JSON数据方法名称返回,比如服务器是JSP,我们会这 样做:

          ...

          String jsoncallback=request.getParameter("jsoncallback");

          ...

          out.print(jsoncallback+"({"account":"XX","passed":"true","error":"null"})");

    Jquery取得的数据可能如下:

          JQUET0988788({"account":"XX","passed":"true","error":"null"})

    总结,用JSONP要做两件事:

          1/请求地址加参数:jsoncallback=?

          2/服务器段把jsoncallback的值作为方法名传回来,如JQUET098788(...)

    jQuery中跨域访问的核心原理:JS文件注入,因为因为script标签的src属性是可以跨域的,利用script标签的src属性直接返回非本域名下的数据,具体采用的方式称为:jsonp。

    代码:

     test.html,例如位于 www.qq.com
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <html xmlns="http://www.w3.org/1999/xhtml">
         <head>
         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
         <title>jQuery-跨域请求</title>
         <script type="text/javascript" src="/js/jquery.js"></script>
         </head>
          <script type="text/javascript">
         jQuery(document).ready(function(){
            $.ajax({
                 type : "GET",
                 url : "http://www.b.com/server.php&action=getmsg&callback=?",
                 dataType : "jsonp",
                jsonp: 'callback',
                success : function(json){
                     $('#msg_box').html(json.msg);
                     return true;
                 }
             });
         });
         </script>
          <body>
         <div id="msg_box"></div>
         </body>
         </html>
    
         server.php,例如位于www.baidu.com
        <?php
         $action = $_GET['action'];
         $callback = $_GET[callback ];
         
         if ($action)
         {
            echo "{$callback}({"msg":"this is a jquery jsonp test message!"})";
             exit();
         }
         else
        {
             echo "{$callback}({"msg":"error action!"})";
            exit();
         }
         ?>
    View Code

    url 被写成了http://active.zol.com.cn/guofeng/profile2.php?callback=?,需要说明的是,这个问号会被 jQuery 自动替换为回调函数的函数名(如果是一个匿名函数,JQuery 会自动生成一个带时间戳的函数名)。

    总结下JSONP原理:

    首先在客户端注册一个callback, 然后把callback的名字传给服务器。

    此时,服务器先生成 json 数据。 

    然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

    最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

    客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

    转:http://www.cnblogs.com/taven/archive/2010/05/20/1739731.html

     http://www.cnblogs.com/5201314/archive/2009/06/23/1509552.html

  • 相关阅读:
    在微信小程序中使用富文本转化插件wxParse
    在微信小程序的JS脚本中使用Promise来优化函数处理
    结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程
    基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
    python 垃圾回收——分代回收 和java有些区别 注意循环引用无法被回收
    python del语句作用在变量上,而不是数据对象(常量)上
    for循环中的lambda与闭包——Python的闭包是 迟绑定 , 这意味着闭包中用到的变量的值,是在内部函数被调用时查询
    Python-try except else finally有return时执行顺序探究——finally语句无论如何也是会执行的
    你所不知道的Python | 字符串连接的秘密——连接大量字符串时 join和f-string都是性能最好的选择
    十大经典排序算法
  • 原文地址:https://www.cnblogs.com/love201314/p/5150448.html
Copyright © 2020-2023  润新知