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);
        }
    });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM