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);
            }
        });
  • 相关阅读:
    uva 11294 Wedding
    uvalive 4452 The Ministers’ Major Mess
    uvalive 3211 Now Or Later
    uvalive 3713 Astronauts
    uvalive 4288 Cat Vs. Dog
    uvalive 3276 The Great Wall Game
    uva 1411 Ants
    uva 11383 Golden Tiger Claw
    uva 11419 SAM I AM
    uvalive 3415 Guardian Of Decency
  • 原文地址:https://www.cnblogs.com/code-style/p/4209406.html
Copyright © 2011-2022 走看看