AJAX問題總結（針對JAVA）

標籤：使用   exce   支援   判斷   ide   完成   非同步   public   win   

1.什麼是AJAX？

　　Asynchronous JavaScript and Xml (非同步JavaScript 和 Xml)

　　AJAX是一種用來改善使用者體驗的技術，通過瀏覽器提供的AJAX對象(即XMLHttpRequest對象)非同步向伺服器發送請求，伺服器返回部分資料而不是一個完整的頁面，以頁面無重新整理的效果更改頁面中的局部資料。

　　關鍵點：1.瀏覽器端的頁面不會被銷毀

　　　　　　2.瀏覽器向伺服器發送請求的同時使用者可以繼續操作頁面

　　　　　　3.頁面只是局部更新，而不是更新整個頁面

　　　　　　4.AJAX對象即XMLHttpRequest對象（兩者說的是同一個對象）

　　　　　　5.XMLHttpRequest是瀏覽器提供的對象

　　　　　　6.網路傳輸效能提升（網路不再傳輸整個頁面，而是傳輸部分資料，避免了大量冗餘資料的傳輸佔用網路頻寬）

　　　　　　7.由AJAX對象向伺服器發送請求以及接收伺服器返回的請求，所以AJAX對象提供了一些屬性和方法可以對發送的請求以及接收到的請求進行處理。

　

2. 如何獲得AJAX對象？

　　function getXmlHttpRequest(){

　　　　var xhr=null;

　　　　if(window.XMLHttpRequest){

　　　　　　//這種方式適用於非IE瀏覽器，比如：Firefox，Chrome.....

　　　　　　xhr=new XMLHttpRequest();

　　　　}else{

　　　　　　//這種方式適用於IE瀏覽器

　　　　　　xhr=new ActiveXObject(‘Microsoft.XMLHttp‘);

　　　　}

　　　　return xhr;

　　　   //注意：IE從IE11開始支援XMLHttpRequest()方式（當然也支援ActiveXObject()方式）

        //AJAX的思想最初是由微軟提出的並使用ActiveXObject()方式獲得AJAX對象，隨後由W3C組織統一為XMLHttpRequest()方式獲得AJAX對象，所以其他瀏覽器廠商統一為使用　      　//XMLHttpRequest()方式獲得AJAX對象，而微軟在IE11之前一直堅持使用ActiveXObject()方式獲得AJAX對象，微軟從IE11之後才開始支援XMLHttpRequest()方式獲得AJAX對象。

　　}

 

3.AJAX對象提供了一些常用的屬性和方法

　　1>常用的屬性

　　　　(1) readystate　　

　　　　　　---表示請求的狀態，即AJAX對象與伺服器通訊的狀態

　　　　　　---總共有五個值可以取：分別為 0,1,2,3,4

　　　　　　    0---表示尚未初始化　　1---表示正在發送請求　　2---表示請求完成　　3---表示請求成功，正在接收伺服器響應的資料　　

　　　　　　    4---資料接收成功（此狀態比較重要，表示ajax對象已經獲得伺服器返回的全部資料，可以進行下一步的操作）

　　　　(2) onreadystatechange　　

　　　　　　---表示當readystate發生變化的時候會觸發onreadystatechange屬性綁定的事件處理函數（注意：onreadystatechange屬性的值是一個事件處理函數）

　　　　(3) status

　　　　　　---表示伺服器返回的http請求的響應值

　　　　　　---常用的傳回值有：

　　　　　　　　200：表示請求成功（OK）　　202：表示伺服器已接受請求，但處理未完成（Accept）

　　　　　　　　302：表示重新導向（Move temporarily）

　　　　　　　　400：表示錯誤的請求（Bad Request）　　404：表示資源未找到（Not Found）

　　　　　　　　500：內部伺服器錯誤（Internal Server Error）　　　　　

　　　　(4) responseText

　　　　　　---表示伺服器返回的是文本資訊（此種方式用於返回簡單的資料資訊）

　　　　(5) responseXML

　　　　　　---表示伺服器返回的是XML(此種方式現在不常用 ，現在一般使用JSON對象來返回比較複雜的資料資訊)

　　2>常用的方法

　　　　(1) open(method,url,True/False);

　　　　　　---用於建立請求

　　　　　　　　---method:表示請求的方式，常用的有GET和POST兩種方式；

　　　　　　　　---url：表示請求的地址，GET請求方式可以在url後面指定請求參數資訊

　　　　　　　　---True：表示以非同步請求方式請求伺服器，False：表示以同步請求方式請求伺服器。

　　　　(2) send()

　　　　　　---用於發送請求

　　　　　　　　---send(null)：用於GET請求方式

　　　　　　　　---send(name=value&name=value....)：用於POST請求方式，括弧中用於指定請求參數資訊

　　　　(3) setRequestHeader()

　　　　　　---用於指定請求的Http頭

　　　　(4) getResponseHeader()

　　　　　　---用於擷取指定的Http頭

　　　　(5) getAllResponseHeaders()

　　　　　　---用於擷取響應的所有Http頭

　　　　(6) abort()

　　　　　　---用於取消請求

 

4. AJAX的使用步驟

　　1> 獲得AJAX對象

　　2> 建立請求

　　3> 設定回呼函數

　　4> 發送請求

　　5> 編寫伺服器端代碼

 

執行個體示範：

1>獲得AJAX對象

　　function getXmlHttpRequest(){

　　　　var xhr=null;

　　　　if(window.XMLHttpRequest){

　　　　　　xhr=new XMLHttpRequest();

　　　　}else{

　　　　　　xhr=new ActiveXObject(‘Microsoft.XMLHttp‘);

　　　　}

　　　　return xhr;

　　}

2> 建立請求

　　(1) GET方式建立請求

　　　　<script type="text/javascript">
                 function check(){
                　　 var xhr=getXmlHttpRequest();
           　　　　xhr.open(‘get‘,‘check.form?code=xxx‘,true);
　　　　　　　  ......
               }
          </script>

　　(2) POST方式建立請求

　　　　 <script type="text/javascript">
      　　　　  function check(){
         　　　　   var xhr=getXmlHttpRequest();
          　　　　  xhr.open(‘post‘,‘check.form‘,true);

　　　　　　　　//注意：因為HTTP協議要求發送post請求時，必須有content-type訊息頭，所以當使用AJAX對象發送post請求時需要明確指定請求訊息頭

   　　　　　　   xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);

　　　　　      　......

    　　    }
           </script>　　　

3>編寫回調事件處理函數

　<script type="text/javascript">
        function check(){
            var xhr=getXmlHttpRequest();
            xhr.open(‘get‘,‘check.form?code=xxx‘,true);

　　　　//注意：xhr.onreadystatechange=function(){.......}; 的作用是為onreadystatechange屬性綁定事件處理函數，當readystate發生改變的時候會調用此函數內部的處理邏輯進行　　　　//相應的處理。
            xhr.onreadystatechange=function(){

　　　　　　//readyState==4 表示ajax對象已經獲得伺服器返回的所有資料; status==200 表示請求成功

　　　　　　//下面的判斷條件保證了資料的完整性和正確性
                if(xhr.readyState==4 && xhr.status==200){
                    var txt=xhr.responseText;
                    $("span_msg").innerHTML=txt;
                }
            };
            ......
        }
    </script>

4> 發送請求

　　(1) GET方式發送請求

　　　　<script type="text/javascript">
                 function check(){
                　　 var xhr=getXmlHttpRequest();
           　　　　xhr.open(‘get‘,‘check.form?code=lily&pwd=123‘,true);
　　　　　　　    xhr.onreadystatechange=function(){

               　　　　 if(xhr.readyState==4 && xhr.status==200){
                　　　　    var txt=xhr.responseText;
                 　　　　   $("span_msg").innerHTML=txt;
              　　　　  }
         　　　　   };

　　　　　　　//GET請求方式下send方法傳入null

　　　　　　　xhr.send(null);
               }
          </script>

　　(2) POST方式發送請求

　　　　 <script type="text/javascript">
      　　　　  function check(){
         　　　　   var xhr=getXmlHttpRequest();
          　　　　  xhr.open(‘post‘,‘check.form‘,true);

   　　　　　　   xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);

　　　　　         xhr.onreadystatechange=function(){

               　　　　 if(xhr.readyState==4 && xhr.status==200){
                　　　　    var txt=xhr.responseText;
                 　　　　   $("span_msg").innerHTML=txt;
              　　　　  }
         　　　　   };

　　　　　　　//POST請求方式下通過send()方法傳遞參數

　　　　　　　xhr.send(‘code=lily&pwd=123‘);

    　　    }
           </script>

5> 編寫伺服器端代碼

package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {　  
        req.setCharacterEncoding("utf-8");     　　 //設定伺服器端解碼方式為utf-8,防止出現中文亂碼的情況發生
        String uri=req.getRequestURI();       　　  //獲得請求資源路徑 
        String action=uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));         //分析請求資源路徑，獲得路徑中最後一個 / 和最後一個 . 之間的內容
        res.setContentType("text/html;charset=utf-8");　　//設定伺服器端編碼方式為utf-8,防止出現中文亂碼的情況發生
      

　　 PrintWriter out=res.getWriter();
        //依據分析的結果，進行不同的處理

　　  //要學會使用下面的方式進行相等的判斷，好處是：防止當action為空白時系統拋出null 指標異常。
        if("/Login".equals(action)) {
            String code=req.getParameter("code");
             if(......){

　　　　　　//伺服器端通過out.println("....") 方法返回部分資料給ajax對象，ajax對象可以在瀏覽器端通過responseText屬性值獲得此方法返回的資料。

　　　　　　out.println("帳號正確，歡迎登入");

　　　　}else{

　　　　　　out.println("帳號有誤，請重新輸入");

　　　　}　　　　
        }else(......){

　　　......

　　  }
    }
}

 

5. AJAX的應用

　　1>使用者輸入的資料需要校正（例如：檢測註冊時使用者輸入的使用者名稱是否有效）

　　2>搜尋時出現的自動提示列表

　　3>級聯顯示（串聯功能表）

　　4>資料錄入和列表顯示在同一個頁面（例如：建立對象/修改對象和顯示所有對象記錄在同一頁上）

　　5>不需要重新整理的翻頁

AJAX問題總結（針對JAVA）