Ajax
是一種可以向服務器請求額外的數據而無需卸載頁面(無刷新)的技術,是對Asynchronous Javascript + XML
的簡寫,因其良好的用戶體驗,現已成爲web不可或缺的技術。咱們所熟知的Jquery
的封裝的ajax
方法,也是經過這種技術實現的。html
在XHR出現以前,Ajax式的通訊必須藉助一些hack手段來實現,大多數是使用隱藏的框架或內聯框架,還可使用script標籤和img標籤;web
<iframe> :
iframe元素仍是挺強大的,咱們首先須要把發送給web服務器的數據編碼到URL中,如:pages/index.html?name='jozo'&age=22,
而後設置iframe的src屬性爲該URL,服務器能建立一個包含響應內容的HTML文檔,那麼咱們就能夠把響應信息保存在該文檔中返回web瀏覽器。這樣實現的話,須要讓iframe元素對用戶不可見,能夠經過CSS來隱藏它。ajax
<script>:
script標籤的src屬性也能發起HTTP GET請求,並且它能夠跨域通訊而不受同源策略的限制。經過這種方式交互時,服務器的響應須要採用JSON編碼的數據格式,並用一個指定的回調函數名包裹須要返回的數據:callBack({"name":"jozo","age":22})
,這個包裹的響應會成爲script標籤的裏的內容來執行,就至關於執行了callBack()
這個函數,因此在web端須要定義一個同名函數。這個就是JSONP跨域,詳細請自行查閱。json
<img>:
img標籤一樣也是利用src屬性發起的HTTP GET 請求,但它的功能沒有上面二者的全,由於它只能實現單向的通訊,只能由客戶端發送數據到服務器,服務器則響應對應的圖片,而咱們沒法輕易從圖片中獲取數據,並且這個圖片必須不可見,好比透明的1x1PX的圖片。跨域
Ajax技術的核心是XMLHttpRequest
對象,XHR爲向服務器發送請求和解析服務器響應提供了流暢的接口,能以異步的方式從服務器取得更多的信息,意味着用戶單擊後,能夠沒必要刷新頁面也能取得數據。這個單詞包含XML,Http,Rquest
,的確,ajax與這三者都有關係 :瀏覽器
XML
:可做爲ajax交互數據的數據類型,固然也不只侷限於xml,像咱們所知的json,jsonp,html,script,text
均可以做爲數據類型。服務器
http
: 使用ajax技術其實就是經過發送HTTP請求和接收響應的來達到目的。能夠經過配置發送請求頭信息來使服務器作出相應的響應。網絡
request
:說寬泛一些就是request和response,請求和響應,get請求,post請求,而後操做響應信息。框架
下面來看下具體的XHR對象有哪些屬性和方法。dom
屬性:
readyState
:HTTP 請求的狀態responseText
:響應體(不包括頭部)responseXML
:對請求的響應,解析爲 XML 並做爲 Document 對象返回。status
:由服務器返回的 HTTP 狀態代碼,如 200 表示成功statusText
:這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼。也就是說,當狀態爲 200 的時候它是 "OK",當狀態爲 404 的時候它是 "Not Found"。方法:
abort()
: 取消當前響應,關閉鏈接而且結束任何未決的網絡活動。getAllResponseHeaders()
:把 HTTP 響應頭部做爲未解析的字符串返回。getResponseHeader()
:返回指定的 HTTP 響應頭部的值。open()
:初始化 HTTP 請求參數,例如 URL 和 HTTP 方法,可是並不發送請求。send()
:發送 HTTP 請求,使用傳遞給 open() 方法的參數,以及傳遞給該方法的可選請求體。setRequestHeader()
:向一個打開但未發送的請求設置或添加一個 HTTP 請求。標紅的屬性和方法都是比較經常使用的,偷個懶,具體的屬性和方法的介紹去 w3school 看下了哈,⊙▂⊙。
屬性和方法都要熟悉掌握才能很好的掌握後面的內容。
IE7以前的瀏覽器都是不支持原生的XMLHttpRquest對象的,IE5,6中是經過MSXML庫中的一個ActiveX對象實現的。《JS高級程序設計》和《JS權威指南》都是經過檢測MSXML庫中XMLHttp的版原本建立XHR對象的,看起來比較麻煩,咱們仍是用w3school的吧 o(╯□╰)o:
var xhr = null; function createXHR(){ if (window.XMLHttpRequest){ // 新瀏覽器 xhr = new XMLHttpRequest(); }else if (window.ActiveXObject){ // IE5,IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } }
Ajax技術能夠用於 HTTP 和 HTTPS 請求。
咱們須要將ajax測試代碼部署到服務器上,才能正常工做。可是,在firefox瀏覽器上測試則不用。
請求的方式除了get,post 外還支持:delete,head,option,put.請求方式名稱大小寫不敏感。
當咱們給請求設置了onreadystatechange事件時,當readyState改變爲0或1時可能沒有觸發這個事件,通過測試,當爲0時確實沒有觸發,爲1時觸發了,我也不知道爲啥 ⊙▂⊙。
若是你獲取的表單數據只是用來讀取服務器數據,並且表單數據是公開的,那麼用get方式的請求吧,由於少許數據的get請求的效率比post快多了。後面能夠測試來測試下。
HTTP請求的各部分的指定順序是:請求方法和URL--> 請求頭-->請求主體。並且在使用XHR對象的時候,當調用了send()方法纔開始啓動網絡。而XHR API 的設計使每一個方法都會寫入網絡流,因此在send()方法後面定義的事件或屬性會被忽略。因此,調用XHR對象的方法要有必定的順序,好比:在send()方法註冊onreadystatechange()事件。