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

來源:互聯網
上載者:User

 

今天研究跨域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屬性指向其他域的動態檔案。瀏覽器就會載入這個檔案並執行其中的指令碼。

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。