使用Ajax獲取JSONP的文本數據 Ajax是一種通過在后臺與服務器進行少量數據交換的技術，它可以在不刷新整個頁面的情況下更新部分網頁內容。而JSONP（JSON with Padding）則是一種跨域通信的解決方案，它基于動態腳本注入，允許使用不同域名下的服務器發送和接收JSON數據。 在實際開發中，我們經常會遇到需要從不同的服務器獲取數據的情況。由于同源策略的限制，瀏覽器通常不允許跨域訪問，這就使得傳統的Ajax技術無法直接使用。JSONP的出現很好地解決了這個問題，它通過動態創建`script`標簽，來實現不同域名間的數據交互。 舉一個例子來說明，假設我們有一個Web應用，它的域名是`www.example.com`，我們需要從另一個域名為`api.example.com`的服務器上獲取一些數據。由于跨域的限制，下面這段代碼將無法正常工作： ```javascript $.ajax({ url: "http://api.example.com/data", dataType: "json", success: function(response) { // 處理響應數據 } }); ``` 為了解決這個問題，我們可以使用JSONP來進行跨域通信。JSONP的原理是，將要獲取的數據包裹在一個函數調用中，服務器接收到請求后，返回這個函數的調用，并將數據作為參數傳遞。因為`script`標簽的`src`屬性沒有跨域限制，所以可以成功請求到跨域的數據。 下面是使用JSONP獲取數據的示例代碼： ```javascript function getData(callback) { var script = document.createElement("script"); script.src = "http://api.example.com/data?callback=" + callback; document.body.appendChild(script); } function processData(response) { // 處理響應數據 } getData("processData"); ``` 在上面的例子中，我們定義了一個`getData`函數來獲取服務器上的數據。該函數接受一個回調函數的名字作為參數，并通過動態創建`script`標簽的方式發送請求。服務器返回的數據將會作為參數傳遞給回調函數。 在實際的開發中，我們通常會使用jQuery等庫來簡化JSONP的使用。下面是使用jQuery的示例代碼： ```javascript $.ajax({ url: "http://api.example.com/data", dataType: "jsonp", jsonpCallback: "processData", success: function(response) { // 處理響應數據 } }); ``` 在上面的例子中，我們通過設置`dataType`為`jsonp`，并指定`jsonpCallback`來告訴jQuery使用JSONP的方式獲取數據，并指定回調函數的名字。成功獲取到數據后，可以在`success`回調函數中進行數據處理。 需要注意的是，JSONP只支持GET請求，不支持POST請求。這是因為JSONP是通過動態創建`script`標簽發送請求的，而`script`標簽只能發送GET請求。 總結來說，無論是原生的JavaScript還是jQuery等庫，都提供了簡單易用的方式來進行JSONP的跨域通信。通過使用JSONP，我們可以輕松地從不同域名下的服務器獲取數據，實現前后端的數據交互。盡管JSONP有一些安全性和性能方面的考慮，但在合適的使用場景下，JSONP仍然是一種很有價值的技術。