zoukankan      html  css  js  c++  java
  • WebApp开发:ajax请求跨域问题的解决

    服务端:PHP

    客户端:Andorid, HTML5, jQuery, ajax

    现象:本想通过jQuery的ajax功能从服务器取回数据存到手机的缓存里,结果总是错误,后来想到可能是跨域问题,所以查了下jsonp的方案先把流程跑通,明天再完善看看有什么好的方案

    服务端:http://www.code-style.com/test/a.php

    <?php
    
    //服务端返回JSON数据
    $arr=array('name'=>'shujun.li');
    $result=json_encode($arr);
    
    
    //动态执行回调函数
    $callback=$_GET['callback'];
    echo $callback."($result)";
    ?>

    客户端

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Listview AutodividersSelector - jQuery Mobile Demos</title>
        <script src="js/jquery.js"></script>
        
        <script type="text/javascript">
        $.ajax({
            url:"http://www.code-style.com/test/a.php",
            dataType:'jsonp',
            data:'',
            jsonp:'callback',
            success:function(result) {
                alert(result["name"])
            },
            timeout:3000
        });
    </script>
    </head>
    <body>
    </body>
    </html>

    生成URL : http://www.code-style.com/test/a.php?callback=jQuery1102004144126083701849_1420635061128&_=1420635061129

    响应:jQuery1102004144126083701849_1420635061128({"name":"shujun.li"})

    JSONP原理解析:

    相当于jquery在页面生成一个匿名函数,这个函数可以传入一个JS对象,然后把这个函数的函数名作为URL参数传递给服务器端,服务端吐出的实际上是对这个函数的调用语句,输出到了页面以后会通过eval执行这个调用,这个匿名函数会再次调用我们的success函数,最终这么拿的数据,如果这样的话JSONP无法大规模的传输数据

        $.ajax({
            url:"http://www.code-style.com/test/a.php",
            dataType:'jsonp',
            data:'',
            jsonp:'callback',
            success: function(result) {
                alert(result["name"])
            },
            timeout: 3000,
            jQuery1102004144126083701849_1420635061128(obj)
            {
                success(obj);
            }
        });
  • 相关阅读:
    一个关于状态机的问题
    8位同步码修改变4位同步码
    BT1120时序,可以用于自测用
    欧几理德,扩展欧几里德和模线性方程组。
    "旋转的风车"----windows(GDI)绘图
    草滩小恪的学习链接(汇总版)
    酒鬼随机漫步(一个矢量类)
    小题精炼-----初试C语言
    大二(上)------我欠青春一份疯狂
    HDU 1027 Ignatius and the Princess II(康托逆展开)
  • 原文地址:https://www.cnblogs.com/code-style/p/4209406.html
Copyright © 2011-2022 走看看