1.Ajax
1.1.Ajax簡介
Ajax簡介這一部分我們主要是談一下ajax的起源,ajax是什么?因為這些是跟技術無關的。所以,大多細節都是一筆帶過。
Ajax的起源?
Ajax一詞源于2005年 Jesse James Garrett發表的一篇題為"Ajax:A new Approach to Web Applications".他在這篇文 章中介紹了一種新技術,用他的話說,就是Ajax :Asynchronous JavaScript +XML的縮寫。
Ajax是什么?
這種新技術的主要目的就是為了使前端網頁能夠向服務器請求額外的數據而不需要卸載頁面。自從這種技術出現以后,微軟率先引入XHRt對象(ajax能夠實現的核心對象),然后其他瀏覽器相繼實現這種技術??偠灾?,ajax就是一種能異步通信的技術。
1.2.Ajax的核心對象---XMLHttpRequest
因為IE5是最先引入這個XHR對象的,當時并沒有事實上的標準。在IE中有三種不同的XHR對象版本:MSXML2.XMLHttp,MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0;
根據這三種版本號,在IE中創建一個XHR對象如下:
function createXHR() { //IE7之前的版本通過這種方式
var versions = [
'MSXML2.XMLHttp',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp.6.0'
];
var xhr = null;
for (var item in versions) {
try {
xhr = new ActiveXObject(item); //若不存在該版本,可能會出錯
if (xhr) break;
} catch (e) {
//一般對這種錯誤不做處理
}
}
return xhr;
}
在IE引入這個對象之后,其他瀏覽器廠商也相繼跟隨,這時候XHR對象成為事實上的標準!
跨瀏覽器創建XHR對象;
function createXHttpRequest() {
if (typeof XMLHttpRequest !== 'undefined') { //不要用 if(XMLHttpRequest){}這種形式,
return new XMLHttpRequest(); //如果是這種形式在找不到XMLHttpRequest函數的情況下,會報錯。
} else if (typeof ActiveXObject !== 'undefined') {
return createXHR(); //用到剛才我們創建的函數
} else { throw new Error('不能創建XMLHttpRequest對象'); } }
1.2.XMLHttpRequest的用法
XMLHttpRequest對象的函數有6個:
open("method",url,boolean); //該方法的三個參數,分別為----提交方式"get"或者"post"等 //&& url是相對于執行代碼的當前頁面的路徑(使用絕對路徑是允許的)&&是否異步 send(); //這個方法接收一個參數,這個參數是作為請求主體發送的數據, //說明: 如果有參數,請使用post方式提交 使用方式如下,send("user="+username+"&pwd="+password); //如果沒有參數,為了兼容性考慮,必須在參數中傳入null,即send(null);該方式使用get方式提交abort(); //取消當前響應,關閉連接并且結束任何未決的網絡活動。 //這個方法把 XMLHttpRequest 對象重置為 readyState 為 0 的狀態,并且取消所有未決 //的網絡活動。例如,如果請求用了太長時間,而且響應不再必要的時候,可以調用這個方法。getResponseHeader() //返回指定的 HTTP 響應頭部的值。其參數是要返回的 HTTP 響應頭部的名稱??梢允褂萌? //何大小寫來制定這個頭部名字,和響應頭部的比較是不區分大小寫的。 //該方法的返回值是指定的 HTTP 響應頭部的值,如果沒有接收到這個頭部或者 readyStat //e 小于 3 則為空字符串。如果接收到多個有指定名稱的頭部,這個頭部的值被連接起來并 //返回,使用逗號和空格分隔開各個頭部的值。getAllResponseHeaders() //把 HTTP 響應頭部作為未解析的字符串返回。 //如果 readyState 小于 3,這個方法返回 null。否則,它返回服務器發送的所有 HTTP 響應的 //頭部。頭部作為單個的字符串返回,一行一個頭部。每行用換行符 "/r/n" 隔開。setRequestHeader() //向一個打開但未發送的請求設置或添加一個 HTTP 請求。
新聞熱點
疑難解答
圖片精選