ajax簡介_動力節點Java學院整理

來源：懂視網責編：小采時間：2020-11-27 22:51:35

ajax簡介_動力節點Java學院整理

ajax簡介_動力節點Java學院整理:AJAX不是JavaScript的規范，它只是一個哥們發明的縮寫：Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊Submit按鈕，表單開始提交，瀏覽器就會刷新頁面，然

推薦度：

點擊下載本文 文檔為doc格式

導讀ajax簡介_動力節點Java學院整理:AJAX不是JavaScript的規范，它只是一個哥們發明的縮寫：Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊Submit按鈕，表單開始提交，瀏覽器就會刷新頁面，然

AJAX不是JavaScript的規范，它只是一個哥們“發明”的縮寫：Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。

如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊“Submit”按鈕，表單開始提交，瀏覽器就會刷新頁面，然后在新頁面里告訴你操作是成功了還是失敗了。如果不幸由于網絡太慢或者其他原因，就會得到一個404頁面。

這就是Web的運作原理：一次HTTP請求對應一個頁面。

如果要讓用戶留在當前頁面中，同時發出新的HTTP請求，就必須用JavaScript發送這個新請求，接收到數據后，再用JavaScript更新頁面，這樣一來，用戶就感覺自己仍然停留在當前頁面，但是數據卻可以不斷地更新。

最早大規模使用AJAX的就是Gmail，Gmail的頁面在首次加載后，剩下的所有數據都依賴于AJAX來更新。

用JavaScript寫一個完整的AJAX代碼并不復雜，但是需要注意：AJAX請求是異步執行的，也就是說，要通過回調函數獲得響應。
在現代瀏覽器上寫AJAX主要依靠XMLHttpRequest對象：

function success(text) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = text;
}

function fail(code) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象

request.onreadystatechange = function () { // 狀態發生變化時，函數被回調
 if (request.readyState === 4) { // 成功完成
 // 判斷響應結果:
 if (request.status === 200) {
 // 成功，通過responseText拿到響應的文本:
 return success(request.responseText);
 } else {
 // 失敗，根據響應碼判斷失敗原因:
 return fail(request.status);
 }
 } else {
 // HTTP請求還在繼續...
 }
}

// 發送請求:
request.open('GET', '/api/categories');
request.send();
alert('請求已發送，請等待響應...');

對于低版本的IE，需要換一個ActiveXObject對象：

function success(text) {
 var textarea = document.getElementById('test-ie-response-text');
 textarea.value = text;
}

function fail(code) {
 var textarea = document.getElementById('test-ie-response-text');
 textarea.value = 'Error code: ' + code;
}

var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP對象

request.onreadystatechange = function () { // 狀態發生變化時，函數被回調
 if (request.readyState === 4) { // 成功完成
 // 判斷響應結果:
 if (request.status === 200) {
 // 成功，通過responseText拿到響應的文本:
 return success(request.responseText);
 } else {
 // 失敗，根據響應碼判斷失敗原因:
 return fail(request.status);
 }
 } else {
 // HTTP請求還在繼續...
 }
}

// 發送請求:
request.open('GET', '/api/categories');
request.send();
alert('請求已發送，請等待響應...');

如果你想把標準寫法和IE寫法混在一起，可以這么寫：

var request;
if (window.XMLHttpRequest) {
 request = new XMLHttpRequest();
} else {
 request = new ActiveXObject('Microsoft.XMLHTTP');
}

通過檢測window對象是否有XMLHttpRequest屬性來確定瀏覽器是否支持標準的XMLHttpRequest。注意，不要根據瀏覽器的navigator.userAgent來檢測瀏覽器是否支持某個JavaScript特性，一是因為這個字符串本身可以偽造，二是通過IE版本判斷JavaScript特性將非常復雜。

當創建了XMLHttpRequest對象后，要先設置onreadystatechange的回調函數。在回調函數中，通常我們只需通過readyState === 4判斷請求是否完成，如果已完成，再根據status === 200判斷是否是一個成功的響應。
XMLHttpRequest對象的open()方法有3個參數，第一個參數指定是GET還是POST，第二個參數指定URL地址，第三個參數指定是否使用異步，默認是true，所以不用寫。

注意，千萬不要把第三個參數指定為false，否則瀏覽器將停止響應，直到AJAX請求完成。如果這個請求耗時10秒，那么10秒內你會發現瀏覽器處于“假死”狀態。

最后調用send()方法才真正發送請求。GET請求不需要參數，POST請求需要把body部分以字符串或者FormData對象傳進去。

安全限制

上面代碼的URL使用的是相對路徑。如果你把它改為'http://www.sina.com.cn/'，再運行，肯定報錯。在Chrome的控制臺里，還可以看到錯誤信息。

這是因為瀏覽器的同源策略導致的。默認情況下，JavaScript在發送AJAX請求時，URL的域名必須和當前頁面完全一致。

完全一致的意思是，域名要相同（www.example.com和example.com不同），協議要相同（http和https不同），端口號要相同（默認是:80端口，它和:8080就不同）。有的瀏覽器口子松一點，允許端口不同，大多數瀏覽器都會嚴格遵守這個限制。

那是不是用JavaScript無法請求外域（就是其他網站）的URL了呢？方法還是有的，大概有這么幾種：

一是通過Flash插件發送HTTP請求，這種方式可以繞過瀏覽器的安全限制，但必須安裝Flash，并且跟Flash交互。不過Flash用起來麻煩，而且現在用得也越來越少了。

二是通過在同源域名下架設一個代理服務器來轉發，JavaScript負責把請求發送到代理服務器：
'/proxy?url=http://www.sina.com.cn'
代理服務器再把結果返回，這樣就遵守了瀏覽器的同源策略。這種方式麻煩之處在于需要服務器端額外做開發。

第三種方式稱為JSONP，它有個限制，只能用GET請求，并且要求返回JavaScript。這種方式跨域實際上是利用了瀏覽器允許跨域引用JavaScript資源：

<html>
<head>
 <script src="http://example.com/abc.js"></script>
 ...
</head>
<body>
...
</body>
</html>

JSONP通常以函數調用的形式返回，例如，返回JavaScript內容如下：
foo('data');
這樣一來，我們如果在頁面中先準備好foo()函數，然后給頁面動態加一個<script>節點，相當于動態讀取外域的JavaScript資源，最后就等著接收回調了。

以163的股票查詢URL為例，對于URL：http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice，你將得到如下返回：
refreshPrice({"0000001":{"code": "0000001", ... });

因此我們需要首先在頁面中準備好回調函數：

function refreshPrice(data) {
 var p = document.getElementById('test-jsonp');
 p.innerHTML = '當前價格：' +
 data['0000001'].name +': ' + 
 data['0000001'].price + '；' +
 data['1399001'].name + ': ' +
 data['1399001'].price;
}

最后用getPrice()函數觸發：

function getPrice() {
 var
 js = document.createElement('script'),
 head = document.getElementsByTagName('head')[0];
 js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
 head.appendChild(js);
}

就完成了跨域加載數據。

CORS

如果瀏覽器支持HTML5，那么就可以一勞永逸地使用新的跨域策略：CORS了。

CORS全稱Cross-Origin Resource Sharing，是HTML5規范定義的如何跨域訪問資源。

了解CORS前，我們先搞明白概念：

Origin表示本域，也就是瀏覽器當前頁面的域。當JavaScript向外域（如sina.com）發起請求后，瀏覽器收到響應后，首先檢查Access-Control-Allow-Origin是否包含本域，如果是，則此次跨域請求成功，如果不是，則請求失敗，JavaScript將無法獲取到響應的任何數據。

用一個圖來表示就是：

假設本域是my.com，外域是sina.com，只要響應頭Access-Control-Allow-Origin為http://my.com，或者是*，本次請求就可以成功。

可見，跨域能否成功，取決于對方服務器是否愿意給你設置一個正確的Access-Control-Allow-Origin，決定權始終在對方手中。

上面這種跨域請求，稱之為“簡單請求”。簡單請求包括GET、HEAD和POST（POST的Content-Type類型僅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出現任何自定義頭（例如，X-Custom: 12345），通常能滿足90%的需求。

無論你是否需要用JavaScript通過CORS跨域請求資源，你都要了解CORS的原理。最新的瀏覽器全面支持HTML5。在引用外域資源時，除了JavaScript和CSS外，都要驗證CORS。例如，當你引用了某個第三方CDN上的字體文件時：

/* CSS */
@font-face {
 font-family: 'FontAwesome';
 src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}

如果該CDN服務商未正確設置Access-Control-Allow-Origin，那么瀏覽器無法加載字體資源。
對于PUT、DELETE以及其他類型如application/json的POST請求，在發送AJAX請求之前，瀏覽器會先發送一個OPTIONS請求（稱為preflighted請求）到這個URL上，詢問目標服務器是否接受：
OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

服務器必須響應并明確指出允許的Method：
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

瀏覽器確認服務器響應的Access-Control-Allow-Methods頭確實包含將要發送的AJAX請求的Method，才會繼續發送AJAX，否則，拋出一個錯誤。

由于以POST、PUT方式傳送JSON格式的數據在REST中很常見，所以要跨域正確處理POST和PUT請求，服務器端必須正確響應OPTIONS請求。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com