經過jsonp解決ajax的跨域請求問題

時間 2019-12-09

標籤經過 jsonp 解決 ajax 請求問題欄目 JSON 简体版

原文原文鏈接

AJAX對於咱們來講可能已經不是陌生的事情了，但若是你的是跨域請求，那麼AJAX已經無能爲力，其實這個也是能夠彌補的，就是利用 jsonp。其實也不是什麼技術，只是利用JS標籤裏面的跨域特性進行跨域數據訪問，服務器返回的JS代碼在客戶端瀏覽器再次執行獲得咱們想要的效果，利用jsonp能夠作到防AJAX實現跨域請求，可是咱們並不須要建立XMLHttpRequest，固然也得不到readyState，由於這並非 AJAX了。php

　　下面舉一個例子來講明：html

假設須要在域名www.a.com下請求www.b.com/ajax.php，相比AJAX服務器端的代碼沒有什麼太大的改變，關鍵是客戶端代碼，例如在ajax.php中隨便寫點代碼：jquery

<?php
$arr =array(
    'x' => array('id'=>10,'user'=>'zhangsan'),
    '3'=>array('id'=>11,'user'=>'lisi'),
    '8' =>array('id'=>14,'user'=>'wangwu')
);
$jsondata = json_encode($arr);
echo $_GET['callback'] . "($jsondata);";
?>ajax

則www.a.com下的客戶端代碼能夠是：json

<html>
<head>
<script>
function ck(data){
        var str = '';
        for(i in data){
            str += data[i].id + '___' + data[i].user + '<br/>';
        }
        document.getElementById('content').innerHTML=str;
}
function test(){
        var s = document.createElement('script');
        s.src = "http://www.b.com/ajax.php?callback=ck";
        head=document.getElementsByTagName('head').item(0);
        head.appendChild(s);
}
</script>
</head>
<body>
<div id="content" style="border:1px solid red;width:300px;height:200px;"></div>
<input type="button" value="test" onclick="test()" />
</body>
</html>跨域

其中test()函數的做用是建立script標籤，動態請求www.b.com/ajax.php並傳入回調函數名ck，服務器會返回js代碼，就像咱們看到的輸出執行函數的代碼，而且將json數據做爲參數傳入回調函數，和AJAX中使用的回調函數同樣，實現咱們想要的效果。瀏覽器

　　若是使用jquery則代碼簡潔而且更像AJAX的用法，代碼示例：服務器

　　在jquery中還有一個方法是，使用起來更簡潔一點，只須要將函數內的代碼更改成：函數

$.getJSON("http://www.b.com/ajax.php?callback=?", function(data){ var str = ''; for(i in data){ str += data[i].id + '___' + data[i].user + '<br/>'; } $('#content').html(str); });