AJAX介紹
AJAX
不是JavaScript的規範,它只是一個哥們“發明”的縮寫:Asynchronous JavaScript and XML
,意思就是用JavaScript執行異步網絡請求
。
如果仔細觀察一個Form的提交,你就會發現,一旦用戶點擊“Submit”按鈕,表單開始提交,瀏覽器就會刷新頁面,然後在新頁面裏告訴你操作是成功了還是失敗了。如果不幸由於網絡太慢或者其他原因,就會得到一個404頁面。
這就是Web的運作原理:一次HTTP請求對應一個頁面。
如果要讓用戶留在當前頁面中
,同時發出新的HTTP請求
,就必須用JavaScript發送
這個新請求,接收到數據後,再用JavaScript更新頁面
,這樣一來,用戶就感覺自己仍然停留在當前頁面
,但是數據卻可以不斷地更新
。
最早大規模使用AJAX的就是Gmail,Gmail的頁面在首次加載後,剩下的所有數據都依賴於AJAX來更新。
用JavaScript寫一個完整的AJAX代碼並不複雜,但是需要注意:AJAX請求是異步執行的
,也就是說,要通過回調函數獲得響應。
在現代瀏覽器上寫AJAX主要依靠XMLHttpRequest
對象:
原生js手寫ajax請求
複製下面的代碼在console那裏執行,觀察代碼塊的底部
function success(text) {
var prettyprint = document.querySelectorAll('.prettyprint ')[0]
var p= document.createElement('p');
p.style.color="orange"
prettyprint.appendChild(p)
p.innerHTML = '請求成功' + text;
}
function fail(code) {
var prettyprint = document.querySelector('.prettyprint ')
var p= document.createElement('p');
p.style.color="red"
prettyprint.appendChild(p)
p.innerHTML = '請求失敗' + 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/ArticleHighWords/list');
request.send();
alert('請求已發送,請等待響應...');
當創建了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()函數,然後給頁面動態加一個
以163的股票查詢URL爲例
,對於URL:http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice,你將得到如下返回:
refreshPrice({"0000001":{"code": "0000001", ... });
因此我們需要首先在頁面中準備好回調函數:
複製下面的代碼在console那裏執行,觸發getPrice()函數,觀察代碼塊的下方
function refreshPrice(data) {
var prettyprint = document.querySelectorAll('.prettyprint ')[5]
var p= document.createElement('p');
p.style.color="orange"
prettyprint.appendChild(p)
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 = '//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請求。
需要深入瞭解CORS的童鞋請移步W3C文檔。
謝謝你閱讀到了最後
歡迎點贊
、評論
、交流
參考
感謝廖雪峯大神,文章內容都來自於廖雪峯大神的官方網站,我這裏只是小修改而已