AJAX與XMLHttpRequest

XMLHttpRequest:

　 中文能夠解釋爲可擴展超文本傳輸請求。Xml可擴展標記語言，Http超文本傳輸協議，Request請求。XMLHttpRequest對象能夠在不向服務器提交整個頁面的狀況下，實現局部更新網頁。當頁面所有加載完畢後，客戶端經過該對象向服務器請求數據，服務器端接受數據並處理後，向客戶端反饋數據。XMLHttpRequest 對象提供了對 HTTP 協議的徹底的訪問，包括作出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 能夠同步或異步返回 Web 服務器的響應，而且能以文本或者一個 DOM 文檔形式返回內容。　　　

• 在不從新加載頁面的狀況下更新網頁
• 在頁面已加載後從服務器請求數據
• 在頁面已加載後從服務器接收數據
• 在後臺向服務器發送數據

   if(window.XMLHttpRequest){//能夠用undefined做爲判斷條件,但不能用error做爲判斷條件;變量不定義,加window至關於undefinded;
        var oAjax = new XMLHttpRequest();   //用於非ie6
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHttp');//用於ie6;Microsoft公司的插件
    }

屬性	說明
readyState	表示XMLHttpRequest對象的狀態：
onreadystatechange	請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上註冊的javascript函數）。
responseText	服務器響應的文本內容
responseXML	服務器響應的XML內容對應的DOM對象
Status	服務器返回的http狀態碼。200表示「成功」，404表示「未找到」，500表示「服務器內部錯誤」等。
statusText	服務器返回狀態的文本信息。

 

方法	說明
Open(string method,string url,boolean asynch, String username,string password)	指定和服務器端交互的HTTP方法，URL地址，即其餘請求信息； Method:表示http請求方法，通常使用"GET","POST". url：表示請求的服務器的地址； asynch：表示是否採用異步方法，true爲異步，false爲同步； 後邊兩個能夠不指定，username和password分別表示用戶名和密碼，提供http認證機制須要的用戶名和密碼。
Send(content)	向服務器發出請求，若是採用異步方式，該方法會當即返回。 content能夠指定爲null表示不發送數據，其內容能夠是DOM對象，輸入流或字符串。
SetRequestHeader(String header,String Value)	設置HTTP請求中的指定頭部header的值爲value. 此方法需在open方法之後調用，通常在post方式中使用。
getAllResponseHeaders()	返回包含Http的全部響應頭信息，其中相應頭包括Content-length,date,uri等內容。 返回值是一個字符串，包含全部頭信息，其中每一個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！
getResponseHeader(String header)	返回HTTP響應頭中指定的鍵名header對應的值
Abort()	中止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。

 

readyState(網絡狀態碼):

　　0 － （未初始化）open()方法已經調用，尚未調用send()方法；
　　1 － （發送請求）已調用send()方法，正在發送請求；
　　2 － （接收完成）send()方法執行完成，已經接收到所有響應內容 ；
　　3 － （解析數據）正在解析響應內容 ；
　　4 － （解析數據完成）響應內容解析完成，能夠在客戶端調用了；

status(http狀態碼):

　　　　HTTP狀態碼（HTTP Status Code）是用以表示網頁服務器HTTP響應狀態的3位數字代碼;

　　　　

分類	分類描述
1**	信息，服務器收到請求，須要請求者繼續執行操做
2**	成功，操做被成功接收並處理
3**	重定向，須要進一步的操做以完成請求
4**	客戶端錯誤，請求包含語法錯誤或沒法完成請求
5**	服務器錯誤，服務器在處理請求的過程當中發生了錯誤

 

　　　　

狀態碼	狀態碼英文名稱	中文描述
100	Continue	繼續。客戶端應繼續其請求
101	Switching Protocols	切換協議。服務器根據客戶端的請求切換協議。只能切換到更高級的協議，例如，切換到HTTP的新版本協議
200	OK	請求成功。通常用於GET與POST請求
201	Created	已建立。成功請求並建立了新的資源
202	Accepted	已接受。已經接受請求，但未處理完成
203	Non-Authoritative Information	非受權信息。請求成功。但返回的meta信息不在原始的服務器，而是一個副本
204	No Content	無內容。服務器成功處理，但未返回內容。在未更新網頁的狀況下，可確保瀏覽器繼續顯示當前文檔
205	Reset Content	重置內容。服務器處理成功，用戶終端（例如：瀏覽器）應重置文檔視圖。可經過此返回碼清除瀏覽器的表單域
206	Partial Content	部份內容。服務器成功處理了部分GET請求
300	Multiple Choices	多種選擇。請求的資源可包括多個位置，相應可返回一個資源特徵與地址的列表用於用戶終端（例如：瀏覽器）選擇
301	Moved Permanently	永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。從此任何新的請求都應使用新的URI代替
302	Found	臨時移動。與301相似。但資源只是臨時被移動。客戶端應繼續使用原有URI
303	See Other	查看其它地址。與301相似。使用GET和POST請求查看
304	Not Modified	未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端一般會緩存訪問過的資源，經過提供一個頭信息指出客戶端但願只返回在指定日期以後修改的資源
305	Use Proxy	使用代理。所請求的資源必須經過代理訪問
306	Unused	已經被廢棄的HTTP狀態碼
307	Temporary Redirect	臨時重定向。與302相似。使用GET請求重定向
400	Bad Request	客戶端請求的語法錯誤，服務器沒法理解
401	Unauthorized	請求要求用戶的身份認證
402	Payment Required	保留，未來使用
403	Forbidden	服務器理解請求客戶端的請求，可是拒絕執行此請求
404	Not Found	服務器沒法根據客戶端的請求找到資源（網頁）。經過此代碼，網站設計人員可設置"您所請求的資源沒法找到"的個性頁面
405	Method Not Allowed	客戶端請求中的方法被禁止
406	Not Acceptable	服務器沒法根據客戶端請求的內容特性完成請求
407	Proxy Authentication Required	請求要求代理的身份認證，與401相似，但請求者應當使用代理進行受權
408	Request Time-out	服務器等待客戶端發送的請求時間過長，超時
409	Conflict	服務器完成客戶端的PUT請求是可能返回此代碼，服務器處理請求時發生了衝突
410	Gone	客戶端請求的資源已經不存在。410不一樣於404，若是資源之前有如今被永久刪除了可以使用410代碼，網站設計人員可經過301代碼指定資源的新位置
411	Length Required	服務器沒法處理客戶端發送的不帶Content-Length的請求信息
412	Precondition Failed	客戶端請求信息的先決條件錯誤
413	Request Entity Too Large	因爲請求的實體過大，服務器沒法處理，所以拒絕請求。爲防止客戶端的連續請求，服務器可能會關閉鏈接。若是隻是服務器暫時沒法處理，則會包含一個Retry-After的響應信息
414	Request-URI Too Large	請求的URI過長（URI一般爲網址），服務器沒法處理
415	Unsupported Media Type	服務器沒法處理請求附帶的媒體格式
416	Requested range not satisfiable	客戶端請求的範圍無效
417	Expectation Failed	服務器沒法知足Expect的請求頭信息
500	Internal Server Error	服務器內部錯誤，沒法完成請求
501	Not Implemented	服務器不支持請求的功能，沒法完成請求
502	Bad Gateway	充當網關或代理的服務器，從遠端服務器接收到了一個無效的請求
503	Service Unavailable	因爲超載或系統維護，服務器暫時的沒法處理客戶端的請求。延時的長度可包含在服務器的Retry-After頭信息中
504	Gateway Time-out	充當網關或代理的服務器，未及時從遠端服務器獲取請求
505	HTTP Version not supported	服務器不支持請求的HTTP協議的版本，沒法完成處理

 

 

AJAX:

 　　AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。

　　 經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

ajax特色：
    1.緩存
        瀏覽器訪問同一個地址 會產生緩存
        時間戳  +Math.random()

    2.從服務器返回的數據都是string
        eval 解析json的時候 必須加括號
        拿到數據 先檢驗一下合法性再解析數據    

    3.編碼格式要統一
        先後臺統一
        國際通用編碼    utf-8    
        中國大陸    gb2312

    4. 與後綴名無關
        後綴名只是給人看的

 

function json2str(json){    //將json轉str
    json.t=Math.random();
    var arr=[];
    for(var name in json){
        arr.push(name+'='+encodeURIComponent(json[name]));  //encodeURIComponent兼容漢字
    }
    return arr.join('&');
}

//json:url,data,type,success,error   data是url？後面的東西,type是獲取方式
function ajax(json){  
    json=json||{}; //判斷json是否存在,存在則爲json
    if(!json.url) return;//json.url爲空則中止
    json.data=json.data||{};//判斷json.data是否存在,存在則爲json.data
    json.type=json.type||'GET';//獲取方式默認爲GET
    json.timeout=json.timeout||10000;//超時處理
    
    //1.建立一個ajax對象
    if(window.XMLHttpRequest){//能夠用undefined做爲判斷條件,但不能用error做爲判斷條件;變量不定義,加window至關於undefinded;
        var oAjax = new XMLHttpRequest();   //用於非ie6
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHttp');//用於ie6;Microsoft公司的插件
    }
    switch(json.type.toLowerCase()){
        case 'get':
                        //2.創建鏈接  是否異步
                    oAjax.open('GET',json.url+'?'+json2str(json.data),true);
                    //3.發送
                    oAjax.send();
                    break;
        case 'post':
                    oAjax.open('POST',json.url,true);
                    oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded')
                    oAjax.send(json2str(json.data));
                    break;
    }
        json.loading&&json.loading();  //加載事件
        
    //若是超過指定時間沒有請求到數據
    var timer=setTimeout(function(){
            json.complete&&json.complete();//完成事件,跟成功失敗無關
            json.error&&json.error(oAjax.status);
            oAjax.onreadystatechange=null;
    },json.timeout);
    //4.接收
    oAjax.onreadystatechange = function(){
             //網絡狀態readyState
        if(oAjax.readyState == 4){   //接收完成   0,初始化1,創建鏈接2.發送3.接收4.完成
            //http的狀態status
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status == 304){   //接收成功  200-300接收成功 304未修改 404未找到
                //從服務器返回的文本
                    clearTimeout(timer);   //成功失敗都要關定時器
                    json.complete&&json.complete();
                    json.success&&json.success(oAjax.responseText);    //若是成功,服務器返回的文本內容    
            }else{
                    clearTimeout(timer);
                    json.complete&&json.complete();
                    json.error&&json.error(oAjax.status);//若是錯誤,服務器返回的錯誤碼
            }
        }
    };
    
}