ajax專題

ajax簡介：

　　ajax = 異步 JavaScript 和 XML。
　　ajax是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。咱們知道，傳統的網頁（不使用ajax）若是須要更新內容，必須從新加載整個網頁。Ajax的出現，使得使網能夠實現異步更新，這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

工做原理：

　　ajax技術的核心或者說負責ajax進行同步或者異步服務器請求是XMLHttpRequest對象。在用使用ajax技術時，其實就是操做XMLHttpRequest進行相應的業務。

關於XMLHttpRequest對象：

建立XMLHttpRequest對象：

　　全部現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 對象。

　　經過一行簡單的 JavaScript 代碼，咱們就能夠建立 XMLHttpRequest 對象。

建立 XMLHttpRequest 對象的語法：

xml =new XMLHttpRequest();

XMLHttpRequest對象的屬性和方法

屬性

　　readyState屬性

　　當XMLHttpRequest對象把一個HTTP請求發送到服務器時將經歷若干種狀態：一直等待直到請求被處理；而後，它才接收一個響應。這樣以來，腳本才正確響應各類狀態-XMLHttpRequest對象暴露一個描述對象的當前狀態的readyState屬性，如表格1所示。

　　表格1.XMLHttpRequest對象的ReadyState屬性值列表。

ReadyState取值	描述
0	描述一種"未初始化"狀態；此時，已經建立一個XMLHttpRequest對象，可是尚未初始化。
1	描述一種"發送"狀態；此時，代碼已經調用了XMLHttpRequest open()方法而且XMLHttpRequest已經準備好把一個請求發送到服務器。
2	描述一種"發送"狀態；此時，已經經過send()方法把一個請求發送到服務器端，可是尚未收到一個響應。
3	描述一種"正在接收"狀態；此時，已經接收到HTTP響應頭部信息，可是消息體部分尚未徹底接收結束。
4	描述一種"已加載"狀態；此時，響應已經被徹底接收。

　　responseText屬性

　　這個responseText屬性包含客戶端接收到的HTTP響應的文本內容。當readyState值爲0、1或2時，responseText包含一個空字符串。當readyState值爲3(正在接收)時，響應中包含客戶端還未完成的響應信息。當readyState爲4(已加載)時，該responseText包含完整的響應信息。

　　responseXML屬性

　　此responseXML屬性用於當接收到完整的HTTP響應時(readyState爲4)描述XML響應；此時，Content-Type頭部指定MIME(媒體)類型爲text/xml，application/xml或以+xml結尾。若是Content-Type頭部並不包含這些媒體類型之一，那麼responseXML的值爲null。不管什麼時候，只要readyState值不爲4，那麼該responseXML的值也爲null。

　　其實，這個responseXML屬性值是一個文檔接口類型的對象，用來描述被分析的文檔。若是文檔不能被分析(例如，若是文檔不是良構的或不支持文檔相應的字符編碼)，那麼responseXML的值將爲null。

　　status屬性

　　這個status屬性描述了HTTP狀態代碼，並且其類型爲short。並且，僅當readyState值爲3(正在接收中)或4(已加載)時，這個status屬性纔可用。當readyState的值小於3時試圖存取status的值將引起一個異常。

　　statusText屬性

　　這個statusText屬性描述了HTTP狀態代碼文本；而且僅當readyState值爲3或4纔可用。當readyState爲其它值時試圖存取statusText屬性將引起一個異常。

方法（用於初始化和處理HTTP請求）

　　abort()方法

　　你可使用這個abort()方法來暫停與一個XMLHttpRequest對象相聯繫的HTTP請求，從而把該對象復位到未初始化狀態。

　　open()方法

　　你須要調用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一個XMLHttpRequest對象。其中，method參數是必須提供的-用於指定你想用來發送請求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。爲了把數據發送到服務器，應該使用POST方法；爲了從服務器端檢索數據，應該使用GET方法。另外，uri參數用於指定XMLHttpRequest對象把請求發送到的服務器相應的URI。藉助於window.document.baseURI屬性，該uri被解析爲一個絕對的URI-換句話說，你可使用相對的URI-它將使用與瀏覽器解析相對的URI同樣的方式被解析。async參數指定是否請求是異步的-缺省值爲true。爲了發送一個同步請求，須要把這個參數設置爲false。對於要求認證的服務器，你能夠提供可選的用戶名和口令參數。在調用open()方法後，XMLHttpRequest對象把它的readyState屬性設置爲1(打開)而且把responseText、responseXML、status和statusText屬性復位到它們的初始值。另外，它還復位請求頭部。注意，若是你調用open()方法而且此時readyState爲4，則XMLHttpRequest對象將復位這些值。

　　send()方法

　　在經過調用open()方法準備好一個請求以後，你須要把該請求發送到服務器。僅當readyState值爲1時，你才能夠調用send()方法；不然的話，XMLHttpRequest對象將引起一個異常。該請求被使用提供給open()方法的參數發送到服務器。當async參數爲true時，send()方法當即返回，從而容許其它客戶端腳本處理繼續。在調用send()方法後，XMLHttpRequest對象把readyState的值設置爲2(發送)。當服務器響應時，在接收消息體以前，若是存在任何消息體的話，XMLHttpRequest對象將把readyState設置爲3(正在接收中)。當請求完成加載時，它把readyState設置爲4(已加載)。對於一個HEAD類型的請求，它將在把readyState值設置爲3後再當即把它設置爲4。

　　send()方法使用一個可選的參數-該參數能夠包含可變類型的數據。典型地，你使用它並經過POST方法把數據發送到服務器。另外，你能夠顯式地使用null參數調用send()方法，這與不用參數調用它同樣。對於大多數其它的數據類型，在調用send()方法以前，應該使用setRequestHeader()方法(見後面的解釋)先設置Content-Type頭部。若是在send(data)方法中的data參數的類型爲DOMString，那麼，數據將被編碼爲UTF-8。若是數據是Document類型，那麼將使用由data.xmlEncoding指定的編碼串行化該數據。

　　setRequestHeader()方法

　　該setRequestHeader(DOMString header，DOMString value)方法用來設置請求的頭部信息。當readyState值爲1時，你能夠在調用open()方法後調用這個方法；不然，你將獲得一個異常。

　　getResponseHeader()方法

　　getResponseHeader(DOMString header，value)方法用於檢索響應的頭部值。僅當readyState值是3或4(換句話說，在響應頭部可用之後)時，才能夠調用這個方法；不然，該方法返回一個空字符串。

　　getAllResponseHeaders()方法

　　該getAllResponseHeaders()方法以一個字符串形式返回全部的響應頭部（每個頭部佔單獨的一行）。若是readyState的值不是3或4，則該方法返回null。

 

AJAX的用法

　　

function to_store(){
    $.ajax({
                        type: "post",
                        url : "${basePath}user/updateDetails",
                        data: "field="+field+"&content="+content+"&username="+username,
                        success: function(i){
                            if (i==1){
                                contentElement.text(content);
                            }else{
                                alert("修改失敗");
                                contentElement.text(oldContent);
                                
                            }

                        }
                        
                    }); 

}

上述是最基本的用法，post請求進入這個url的路徑，攜帶着data裏面的幾個參數，對返回結果進行判斷！

固然，ajax裏面不可能只有這幾個參數，其他的參數在這就不說了，感興趣的同窗能夠本身研究下！

ajax中還存在同步和異步的問題，固然自己默認是異步的，所謂同步：能夠理解成單線程工做，一旦寫成同步，那麼用戶都必須等這個請求完成以後才能進行其餘的操做！ 

　　 async：false即變成同步

ajax提交表單

衆所周知，form表單提交會影響整個頁面刷新，可是若是即提交了表單，又可讓頁面不刷新，而刷新頁面的一部分，因此，咱們的前輩想出了一個絕妙的主意，那就是利用ajax來提交表單，來達到這一舉雙得的目標。具體事例以下：

不帶文件流的提交數據

我的認爲利用ajax提交表單須要注意兩點：1，將須要提交的表單附上ID，2:，提交的表單上不須要再寫action的路徑了

 function login() {
            $.ajax({
            //幾個參數須要注意一下
                type: "POST",//方法類型
                dataType: "json",//預期服務器返回的數據類型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服務端返回的數據(調試用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("異常！");
                }
            });
        }

帶文件流的提交數據

function login() {
                var data=new FormData($( "#addForm" )[0]);
            $.ajax({
            //幾個參數須要注意一下
                type: "POST",//方法類型
                dataType: "json",//預期服務器返回的數據類型
                url: "/users/add" ,//url
                cache: false,    //上傳文件不需緩存
                processData: false, //需設置爲false。由於data值是FormData對象，不須要對數據作處理
                contentType: false, //需設置爲false。由於是FormData對象，且已經聲明瞭屬性enctype="multipart/form-data"
                data: data,
                success: function (result) {
                    console.log(result);//打印服務端返回的數據(調試用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("異常！");
                }
            });
        }       

 

其實ajax傳表單數據還有一種寫法，可是這裏就不演示了，若感興趣的朋友能夠自行上網查查，歡迎與我討論！！！