【Ajax】
Ajax技術能夠向服務器請求額外的數據而無須卸載頁面能帶來更好的用戶體驗.
Ajax技術的核心是XMLHttpRequest對象(簡稱XHR),XHR向服務器發送請求和解析拂去其響應提供了流暢的接口。能夠以異步方式從服務器取得更多信息,意味着用戶單擊后,可以不刷新頁面也能取得新數據。也就是說,可以使用XHR對象取得新數據,然后再通過DOM將新數據插入到頁面中。(這種技術就是無需刷新頁面即可從服務器取得數據,被稱為瀏覽器與服務器的通信)
在Ajax技術之前,網絡世界是同步進行的,造成了很多不方便,有了Ajax技術后,網絡變成了異步的世界。Ajax通過XMLHttpRequest對象完成異步。
XMLHttpRequest對象:
1、XMLHttpRequest對象創建(創建完XMLHttpRequest對象,就可以對服務器進行請求了)
//使用XMLHttpRequest構造函數
var request = new XMLHttpRequest();//在大多數瀏覽器中,在ie5、6中不支持這個方式
//在ie5、6中兼容,只需要定義下面這個函數
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("MicrosOft.XMLHTTP");
}
2、http請求:
http:是一套計算機通過網絡進行通信的規則,http主要用於客服端(瀏覽器)向服務器請求信息和服務。http是一種無狀態協議:不建立持久的連接,即服務端不保留連接的相關信息;無記憶,即每次請求都會打開一個tcp連接,當請求完畢就關閉tcp連接。第二次又重新建立tcp連接。
一個完整的http請求過程的7個步驟:
——建立TCP連接;
——web瀏覽器向web服務器發送請求命令;
——web瀏覽器發送請求頭信息;
——web服務器應答;
——web服務器發送應答頭信息;
——web服務器向瀏覽器發送數據;
——web服務器關閉TCP連接。
一個http請求一般包含四個部分:
http請求的方法或動作,例如get和post請求;
正在請求的URL;
請求頭,包含一次客戶端信息和身份驗證信息等;
請求體,就是請求正文,請求體包含一些客服請求的查詢字符串信息和表單信息等
GET請求和POST請求
GET請求:一般用於信息獲取,使用URL傳遞參數,最常用於向服務器查詢某些信息。
POST請求:一般用於修改服務器上的資源,通常用於向服務器發送應該被保存的數據,格式不限。
一個http響應一般由三部分組成:
一個數字和文字組成的狀態碼,用於實現請求是成功還是失敗;
響應頭;
響應體,響應的正文。
3、XMLHttpRequest發送請求的方法:
open(method,url,async)
參數說明:method指的是要發送的請求的類型(get和post),請求的url和請求是否異步進行的布爾值。
send(string)
該方法接收一個參數,既要作為請求主體發送的數據,如果不需要請求主體發送數據,則傳入null。
在這里我們有時候會用到一個setRequestHeader()方法來設置自定義的請求頭部信息,這個方法接受兩個參數:頭部字段的名稱和頭部字段的值。這個方法必須在open(方法之后在send()方法之前調用。
request.open("get", "url",false); request.send(null);
request.open("post", "url",true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.send("name=王二狗&sex=男");
4、XMLHttpRequest取得響應
XMLHttpRequest取得響應值得方法:
responseText:獲得字符串形式的響應數據;
responseXML:獲得XML形式的響應值;
status和statusText:以數字或文本形式返回http狀態碼;
getAllResponseHeader():獲的所以的響應報頭;
getResponseHeader():查詢報頭中某個字段的值。
要想獲得響應過程的當前活動階段或監聽響應狀態,就可以通過readyState屬性的變化來檢查,值可取為:
0:請求未初始化,open()還未調用;
1:服務器已經連接,open()已經被調用,啟動;
2:請求已經接收,就是已經接收到頭部信息了,send()方法已經調用,但還沒有接收到響應;
3:接收,請求處理中,也就是已經接收到部分響應數據了(響應主體);
4:完成,請求和響應都已經完成。
通過監聽一個readyState屬性的一個事件來完成:
var request = new XMLHttpRequest();
request.open("GET", "url",true);
request.send();
request.onreadystatechange = function(){
if(request.readyState === 4 && request.readyState === 200){
//做一些事情 request.responseText
}
}
XMLHttpRequest2級
是對XHR的發展,他有一些所有瀏覽器都實現的內容:
1、FormDate:為序列化表單以及創建與表單格式相同的數據提供了便利。下面創建一個FormDate對象:
//創建FormDate對象
var data = new FormDate();
data.append("name","bob");//append()方法接收兩個參數:鍵和值
2、超時設定:IE8為XHR對象添加了一個屬性timeout,表示請求在等待響應多少毫秒之后就終止。在給timeout設置一個值后,如果在規定的時間內瀏覽器還沒有接受響應,那么就會觸發timeout事件,進而調用ontimeouts事件處理程序。
3、overrideMimeType()方法:用於重寫xhr響應的MIME類型。調用overrideMimeType()方法,可以保證把響應當作XML而非純文本來處理。調用overrideMimeType()必須在send()方法之前,才能保重寫成功。
【跨域】
一個域名地址的組成:
當協議、子域名、主域名、端口號中的任意一項不同時,都算作不同域,不同域之間相互請求資源據算作“跨域”。
【跨域資源共享CORS】
javascript出於對安全的考慮,不允許跨域調用其他頁面的對象。但是,合理的跨域也是很重要的。
CORS:跨域資源共享,定義了在必須訪問跨域資源時,瀏覽器與服務器應該如何溝通。CORS的基本思想就是使用自定義的http頭部讓瀏覽器與服務器進行溝通,從而解決請求是應該成功還是失敗。
與其他瀏覽器不同的是IE是通過XDR(XDomainRequest)對象實現CORS的,XDR對象的使用方法與XHR對象很相似,但XDR對象的open()方法只接收兩個參數:請求的類型和統一資源定位器(url)。所有的XDR都是異步執行的,響應的數據會保存在responseText屬性中。如:
var xdr = new XDomainRequest();
xdr.onload = function(){
alert(xdr.responseText);
};
xdr.open("get", "url");
xdr.send(null);
處理跨域的方法:代理:通過同域名的服務器端創建一個代理。
處理跨域的技術:
1、JSONP
JSONP:是JSON with padding(填充式JSON或參數式JSON)的簡寫,是應用JSON的一種新方式,JSONP看起來與JSON差不多,只不過是被包含在函數調用中的JSON,例如:
callack({"name":"bob"});
JSONP有兩個部分組成:回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數,數據就是傳入回調函數中的JSON數據。下面是一個典型的JSONP請求:
http://freegeoip.net/json/?callback=handleResponse
2、圖像Ping
他的方式是動態創建圖像,圖像Ping是與服務器進行簡單、單向的跨域通信的一種方式。圖像Ping最常用於跟蹤用戶點擊頁面或動態廣告曝光次數。
【小結】
Ajax是無需刷新頁面就可以從服務器取得數據的一種方法,負責Ajax運作的核心對象是XMLHttpResquest(XHR)對象。
同源策略是對XHR的一個主要約束,他為通信設置了“相同的域,相同的端口,相同的協議”這一限制。試圖訪問上述限制之外的資源,都會引發錯誤,除非采用被認可的跨域解決方案:CORS(Cross -Origin Resource Sharing,跨域資源共享),ie8通過XDomainRequest對象支持CORS,其他瀏覽器通過XMLHttpRequest對象支持。圖像Ping和JSONP是另外兩種跨域通信的技術,但是沒有CORS穩妥。
另外還有一個Comet,上面沒有對他進行詳細說明,Comet是對Ajax的進一步擴展,讓服務器幾乎實時的向客服端推送信息,實現Comet的手段主要有兩種:長輪詢和http流。