ajax互動的兩種方式：html與xml

對比jquery對這兩種互動的實現：

基於html互動:

function verify(){    //解決中文亂碼問題的方法 1，頁面端發出的資料做一次encodeURI，伺服器端使用 new String(old.getBytes("iso8859-1"),"utf-8")    //var url= "AJAXServer?name="+encodeURI($("#userName").val() ) ; // encodeURI處理中文亂碼問題   // 解決中文亂碼問題的方法 2.頁面端發出的資料做兩次encodeURI處理， 伺服器端用URLDecoder.decode(old,"utf-8");    var url= "AjaxServer?name="+encodeURI(encodeURI($("#userName").val() )); // encodeURI處理中文亂碼問題    url=convertURL(url);//擷取函數的傳回值'login?uname='+ uname + '&psw=' + psw          $.get(url,null,function(data){              $("#result").html(data); //簡潔版          });System.out.println(url);}//給URL增加時間戳記，騙過瀏覽器，不讀取緩衝function convertURL(url){    //擷取時間戳記   var timstamp=(new Date()).valueOf();    //將時間戳記資訊拼接到URL上    if(url.indexOf("?")>=0){//用indexof判斷該URL地址是否有問號    url=url+"&t="+timstamp;    }else{       url=url+"?t="+timstamp;      }   return  url;}

後台頁面：

package com.xidian.ajax;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;public class AjaxServer extends HttpServlet {        protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)                throws ServletException, IOException {            try{              httpServletResponse.setContentType("text/html;charset=utf-8");               PrintWriter out= httpServletResponse.getWriter();                               Integer inte = (Integer)httpServletRequest.getSession().getAttribute("total"); //用來測試緩衝的；在IE下如果多次請求的地址相同，則他不會再去伺服器端互動讀資料，而是直接讀取緩衝                  int temp=0;                if(inte==null){                    temp=1;                }else{                    temp=inte.intValue()+1;                }                   httpServletRequest.getSession().setAttribute("total",temp);               //1.取參數           String old =httpServletRequest.getParameter("name");               // String name=new String(old.getBytes("iso8859-1"),"utf-8"); //處理中文亂碼1，需和前台js檔案中的encodeURI配合               String name= URLDecoder.decode(old,"utf-8"); //處理中文亂碼2              //2.檢查參數是否有問題          if(old==null||old.length()==0){              out.println("使用者名稱不可為空！");          } else{              //String name=old;              //3.校正操作              if(name.equals("123")){                    //4.與傳統應用不同的是，這一步將使用者感興趣的資料返回給頁面端。而不是將一個新的頁面返回給頁面端                  //寫法沒有改變，本質變化了                  out.println("使用者名稱【"+name+"】已經存在，請使用其他的使用者名稱！,"+temp);              } else{                  out.println("使用者名稱【"+name+"】未存在，您可以使用該使用者名稱！,"+temp);              }          }        }catch(Exception e){               e.printStackTrace();            }        }        protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)            throws ServletException, IOException {           doGet(httpServletRequest,httpServletResponse);        }    }

以上實現的基於html是比較常用的，而比較的簡單；

下面我們實現基於XML互動來實現：js：

//定義使用者名稱校正的方法function verify(){    //首先測試下頁面的按鈕按下，可以調用這個方法    //使用javascript裡的alert方法，顯示個彈出提示框   // alert("按鈕被按下"); 測試是否已進到了js內    //1擷取到文字框中的內容   // document.getElementById("username") dom的擷取方法    //jquery尋找節點的方式，參數中的#加id參數值可以找到一個節點    //jquery的方法返回的都是jquery的對象，可以在上面繼續執行其他的jquery方法   var jqueryObj= $("#userName")    //擷取節點的值    var userName=jqueryObj.val();   // alert(userName);測試是否得到username    //2.將文字框的資料發送給伺服器端的servlet    //javascript當中，一個簡單對象的定義方法     // var obj={name:"123",age:30}    //使用jquery的XMLHttprequest對象get請求的封裝 $.ajax({     type:"post",     //http請求方式     url:"AjaxXmlServer",     // 伺服器端url地址     data:"name="+userName,  //  發送給伺服器的資料      dataType:"xml",//告訴伺服器返回的資料類型     success:callback //定義互動完成，並且伺服器正確返回資料時調用的回呼函數 })    }//回呼函數,data為伺服器端返回的資料function callback(data){   //alert("伺服器端的資料回來了");測試與伺服器端的互動     //3.接受伺服器端返回的資料  // alert(data); 測試data    //需要將data這個dom對象中的資料解析出來    //首先需要將dom對象轉化為jquery對象    var jqueryObj=$(data);    //擷取message節點    var messsage= jqueryObj.children();    //擷取常值內容    var text=message.text();//這裡獲得的是所有子節點的傳回值，因為message返回的是一個數組    //4.將伺服器端返回的資料動態顯示在頁面上  // 找到儲存資料的節點    var resultObj=$("#result");    //動態改變頁面中div的內容    resultObj.html(data);}

背景代碼：

package com.xidian.ajax;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;public class AjaxXmlServer extends HttpServlet {        protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)                throws ServletException, IOException {            try{                //修改點1----響應的 Content-Type必須是text/xml，這很重要           httpServletResponse.setContentType("text/xml;charset=utf-8");           PrintWriter out= httpServletResponse.getWriter();               //1.取參數           String old =httpServletRequest.getParameter("name");              //2.檢查參數是否有問題                 //修改點2----返回的資料需要封裝成xml格式            StringBuilder builder=new StringBuilder();            builder.append("<message>"); //XML的返回內容要包含在<message></message>                 if(old==null||old.length()==0){//要驗證接受的文字框內容是否為空白              builder.append("使用者名稱不可為空！").append("</message>");          } else{              String name=old;              //3.校正操作              if(name.equals("123")){                    //4.與傳統應用不同的是，這一步將使用者感興趣的資料返回給頁面端。而不是將一個新的頁面返回給頁面端                  //寫法沒有改變，本質變化了                  builder.append("使用者名稱【"+name+"】已經存在，請使用其他的使用者名稱！").append("</message>");                 // out.println("使用者名稱【"+name+"】已經存在，請使用其他的使用者名稱！");              } else{                 // out.println("使用者名稱【"+name+"】未存在，您可以使用該使用者名稱！");                  builder.append("使用者名稱【"+name+"】未存在，您可以使用該使用者名稱！").append("</message>");               }              out.println(builder.toString());//這是必須的              System.out.println("輸出內容為："+builder.toString());//輸入sout後按Tab鍵會自動產生          }        }catch(Exception e){               e.printStackTrace();            }        }        protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)            throws ServletException, IOException {           doGet(httpServletRequest,httpServletResponse);        }    }

我已經將兩種方式的不一樣的點全部標註出來了，大家可以對比下，使用自己比較能接受的那種方式；