WebApp开发之ajax请求跨域的解决方法-职坐标

WebApp开发之ajax请求跨域的解决方法

白羽 2018-06-14 来源：网络阅读 480 评论 0

摘要：本文将带你了解WebApp开发之ajax请求跨域的解决方法，希望本文对大家学WEBAPP有所帮助。

服务端：PHP

客户端：Andorid, HTML5, jQuery, ajax

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

服务端：//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:"//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 : //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:"//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);
        }
    });

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

app开发入门 webapp教程 webappui框架

本文由 @白羽发布于职坐标。未经许可，禁止转载。