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

 

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

 

用戶端：

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

1 $.getJSON(2     "http://202.196.35.41/json.php?callback=?",3     function(data){4         alert(data);5     }6 };

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

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

 

服務端：

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

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

也就是：jQuery172031288272701203823_1344179936251([這裡傳參數JSON資料])。

上PHP代碼。

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

Ajax得到的資料：

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

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

 

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