解釋一下jQuery的$.getJSON跨域Ajax方法

 

今天研究跨域Ajax，看到網上的教程都是給了一個例子，不知道使用$.getJSON實現跨域Ajax的關鍵在哪里，經過一段時間的“研究”，現將成果寫一下。

 

客戶端：

使用$.getJSON()在傳輸第一個參數，也就是url時，如果是跨域請求一定要有一個參數的值為“?”，如：

$.getJSON(
    "http://202.196.35.41/json.php?callback=?",
    function(data){
        alert(data);
    }
};

jQuery在發送請求時會將這個“?”替換為一個唯一的字符串，如下圖

並且聲明一個與這個字符串名稱相同變量，將傳入的回掉函數賦值給這個變量。

 

服務端：

服務端一定是動態的程序，不能是靜態的文本文件，因為服務端要接收到傳過來的函數名，就是上圖中callback的值jQuery172031288272701203823_1344179936251。

然后服務端構造一個函數調用型的字符串，將需要發送給客戶端的值做為參數。

也就是：jQuery172031288272701203823_1344179936251([這里傳參數JSON數據])。

上PHP代碼。

<?php
    header('Content-Type:text/javascript; charset=utf-8');
    class User{
        public $id;
        public $name;
        public function __construct($id, $name){
            $this->id = $id;
            $this->name = $name;
        }
    }
    $users = array(new User(1, 'admin'), new User(2, 'root'));
    
    echo $_REQUEST['callback'].'('.json_encode($users).')';

Ajax得到的數據：

jQuery172031288272701203823_1344179936251([{"id":1,"name":"admin"},{"id":2,"name":"root"}])

客戶端得到這個數據之后就執行這條語句，由於前面已經將$.getJSON()傳入的回掉函數指定了同樣的函數名，此時就會調用傳入的函數，並將數據傳入。

 

具體的跨域請求是利用了頁面中可以引入其他域的js文件這個性質，在頁面中創建一個script節點，將他的src屬性指向其他域的動態文件。瀏覽器就會加載這個文件並執行其中的腳本。