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

來源:互聯網
上載者:User

對比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);        }    }

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

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。