詳解jQuery Ajax跨域

一、jQuery跨域請求

在Web前端開發中，由於瀏覽器同源策略的限制，Ajax請求默認不允許向其它域名下的服務的介面發起請求。不過，jQuery提供了一種便捷的跨域請求方式，那就是JSONP。JSONP（JSON with Padding）是一種問答式解決跨域的方法，它利用了標籤的載入跨域資源的特點。

實現原理：當瀏覽器通過script標籤發起請求時，伺服器重寫響應內容為Javascript調用的格式，然後響應給客戶端。客戶端解析該腳本並執行，就可以完成跨域請求了。

1. jQuery的JSONP方法實現跨域請求：

$.ajax({
    url: 'http://www.example.com/interface',
    type: 'GET',
    dataType: 'jsonp', // 注意：此處dataType為jsonp
    success: function(data) {
        console.log(data);
    }
});

2. 伺服器端的響應格式示例：

callback({"message": "Hello World!"});

其中，callback是客戶端指定的跨域回調函數名稱，可以通過url傳遞到伺服器端。伺服器端將請求數據處理後，返回一個JSON格式的數據，並在前面加上callback的值，構成一個完整的Javascript腳本。當客戶端解析該腳本並執行時，就會觸髮指定名稱的回調函數，並將處理後的數據作為參數傳遞進去。

二、jQuery Ajax模板

使用jQuery Ajax發起跨域請求有多種方式，這裡提供一份常用的模板，方便開發者快速上手。

$.ajax({
    url: '',
    type: 'GET',
    dataType: 'jsonp',
    data: '',
    beforeSend: function(jqXHR) {
        // 請求發送前的回調函數
    },
    success: function(data, textStatus, jqXHR) {
        // 請求成功後的回調函數
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 請求失敗後的回調函數
    },
    complete: function(jqXHR, textStatus) {
        // 請求完成後的回調函數，不管成功或失敗都會調用
    }
});

參數解釋：

• url：請求的介面url，可以是完整的url路徑或相對路徑。
• type：請求類型，一般使用GET或POST方法。
• dataType：伺服器響應的數據類型，可以為json、jsonp、xml、script、html、text。當指定為jsonp時，表示使用JSONP方式跨域。
• data：請求發送到伺服器的數據，可以是鍵值對、數組、字元串。
• beforeSend：請求發送前的回調函數，可以修改請求頭信息，如添加Authorization等。
• success：請求成功後的回調函數，參數為伺服器響應的數據、狀態字元串、jqXHR對象。
• error：請求失敗後的回調函數，參數為jqXHR對象、狀態字元串、錯誤拋出的異常對象。注意：如果請求為jsonp方式，錯誤信息可能會在success回調函數內拋出。
• complete：請求完成後的回調函數，參數為jqXHR對象、狀態字元串。

三、jQuery的Ajax請求

除了JSONP方式，jQuery還支持CORS（Cross Origin Resource Sharing）方式和Proxy（代理）方式進行跨域請求。

四、jQuery解決跨域

除了使用Ajax的方式以外，還可以通過使用iframe和window.name技術等方式來實現跨域請求。但是這些方式都存在安全性問題，而且效率較低，建議開發者慎用。

總之，從瀏覽器同源策略的角度出發，Ajax請求默認不允許向其它域名下的服務的介面發起請求。但是，藉助jQuery提供的JSONP方式等，開發者可以方便地實現跨域請求。不過，在跨域請求發起前，開發者需要對伺服器端進行相應的配置，否則會無法正常獲取數據。