Java學習--Ajax介紹及使用

一、使用Ajax

1、什么是ajax？

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

2、獲取ajax對象

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

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

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

4、編程步驟

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;
             頁面更新...
         }

二、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")