Java學習--Ajax介紹及使用

1、使用Ajax

一、什麼是ajax？

是一種用來改善用戶體驗的技術，本質上是利用瀏覽器提供的一個
     特殊對象(XMLHttpRequest對象，通常也能夠稱之爲ajax對象)向
     服務器發送異步請求；服務器返回部分數據，瀏覽器利用這些數據
     對當前頁面作部分更新；整個過程，頁面無刷新，不打斷用戶的操做。
     注：
         異步請求，指的是，當ajax對象發送請求時，瀏覽器不會銷燬
     當前頁面，用戶仍然能夠對當前頁面作其它操做

二、獲取ajax對象

function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非ie瀏覽器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('MicroSoft.XMLHttp'); } return xhr; }

三、ajax對象的幾個重要屬性

onreadystatechange: 綁訂事件處理函數，用來處理readystatechange
         事件。
         注：當ajax對象的readyState屬性值發生了任何的改變，好比
         從0變成了1，就會產生readystatechange事件。
     readyState：有5個值(分別是0,1,2,3,4),用來獲取ajax對象與服務
         器通訊的進展。其中,4表示ajax對象已經得到了服務器返回的所
         有的數據。
     responseText:得到服務器返回的文本數據。
     responseXML:得到服務器返回的xml數據。
     status:得到狀態碼。

四、編程步驟

step1. 得到ajax對象
         好比   var xhr = getXhr();
step2. 調用ajax對象的方法，發送請求
         方式一 get請求
         xhr.open('get','check.do?adminCode=king',true);
         xhr.onreadystatechange = f1;
         xhr.send(null);
         注:
             true: 異步 (瀏覽器不會銷燬當前頁面，用戶仍然能夠
                     對當前頁面作其它操做)
             false:同步 (瀏覽器不會銷燬當前頁面,可是會鎖定當前
                     頁面，用戶不可以對當前頁面作任何操做)。
    

         方式二 post請求
                 xhr.open('post','check.do',true);
                 xhr.setRequestHeader('content-type',
                                  'application/x-www-form-urlencoded');
                 xhr.onreadystatechange = f1;   
                 xhr.send('adminCode=king');
         注(瞭解)：
             按照http協議要求，若是發送的是post請求，應該包含有
             content-type消息頭，可是，ajax默認不會帶這個消息頭，
             因此，須要調用setRequestHeader方法來添加這個消息頭。

            
     step3. 編寫服務器端的程序
         注：不須要返回完整的頁面，只須要返回部分數據。
     step4. 編寫事件處理函數
         if(xhr.readyState == 4 &&
             xhr.status == 200){
             //ajax對象已經得到了服務器返回的全部數據，
             //並且服務器處理正確。
             var txt = xhr.responseText;
             頁面更新...
         }

2、Ajax的使用問題

1. 編碼問題  
(1)get請求
     1)爲何會有亂碼?
     ie瀏覽器提供的ajax對象，在發送get請求時，會對中文參數
     值使用"gbk"來編碼，其它瀏覽器會使用"utf-8"來編碼。服務器
     端默認會使用"iso-8859-1"來解碼。因此會有亂碼。
     2)如何解決?
         step1. 服務器端，統一使用"utf-8"來解碼。
         能夠修改
             <Connector URIEncoding="utf-8" />
         step2.客戶端，使用encodeURI函數對中文參數值進行編碼。
         注：
             encodeURI函數是javascript內置的函數，會使用"utf-8"
             來編碼。(

//step2. 發送請求 var uri = 'check.do?adminCode=' + $F('adminCode'); xhr.open('get',encodeURI(uri),true);

)

(2)post請求         1)爲何會有亂碼?     瀏覽器提供的ajax對象在發送post請求時，對中文參數值會使用     "utf-8"來編碼，而服務器端會使用"iso-8859-1"來解碼。(在servlet添加request的方法)     2)如何解決?         request.setCharacterEncoding("utf-8")