jquery是對javascript很好的封裝，而且很輕量級，可以近似的將其稱其為架構，下面就來對比javascript與jquery對ajax的實現，以突出jquery對其封裝後，在實現方便的簡易性，而且不僅如此，用jquery代替javascript來實現一些功能對於瀏覽器的相容性也會帶來意想不到的好處；
首先也一個簡單的頁面端：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>使用者名稱校正的ajax執行個體</title><script type="text/javascript" src="jslib/verifyown.js"></script></head><body> 使用者名稱校正的ajax執行個體,請輸入使用者名稱：<br/> <input type ="text" id="userName"/><span id="result"></span> <br/><div id="result"></div><input type="button" value="檢驗" onclick="verify()"/></body></html>
頁面端定義了一個單擊事件onclick = "verify()";即點擊按鈕後呼叫事件方法verify()；
這裡我們首先用javascript來實現整個ajax
//使用者校正的方法//這個方法將使用XMLHttpRequest對象進行AJAX的非同步互動var xmlhttp;//設定全域變數，使回呼函數也能使用它function verify(){ //1.dom的方法獲文字框中的值方法 // document.getElementById("username")是dom擷取元素節點的一種方法，一個元素節點對應HTML頁面中的一個標籤，如<input> //value可以擷取一個元素節點的value屬性值 var userName=document.getElementById("userName").value //2.建立XMLHTTPRequest對象 //這是XMLHTTPRequest對象使用中最複雜的一步 //需要針對IE和其他類型的瀏覽器建立這個對象的不同方式寫不同的代碼 if(window.XMLHttpRequest){ //針對firefox Mozillor Opera Safari,IE7,IE8 xmlhttp=new XMLHttpRequest(); //針對某些特定版本的 Mozillor 的瀏覽器的bug進行修正 if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //針對IE6 IE5.5 IE5 //兩個可以用於建立XMLHttpRequest對象的控制項名稱，儲存在一個js的數組中 //排在前面的版本較新 var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for( var i = 0;i < activexName.length;i++){ try{ //取出一個建立名進行建立，如果建立成功就終止迴圈 //如果建立失敗，會拋出異常，然後可以繼續迴圈，繼續嘗試串連 xmlhttp=new ActiveXObject(activexName[i]); break; }catch(e){ } } } //確認XMLHttpRequest建立成功 if(!xmlhttp){ alert("XMLHttpRequest建立失敗！"); return; }else{ alert(xmlhttp.readyState); } //2.註冊回呼函數 //該處註冊函數時，只需函數名，不需加括弧 //我們需要將函數名註冊，如果加上括弧，就會把函數傳回值註冊上，這是錯誤的 xmlhttp.onreadystatechange=callback; //3.設定串連資訊 //第一個參數表示Http的請求方式，支援所有的Http請求方式，主要使用get和post。 //第二個參數表示請求的URL地址，get方式請求的參數也在URL中， //第三個參數表示採用同步還是非同步，true表示採用非同步 xmlhttp.open("GET","AjaxServer?name="+userName,true); /*post方式的請求 xmlhttp.open("POST","AJAXServer",true); post方式需要自己設定http的要求標頭 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") xmlhttp.send("name"+username); */ //4.發送資訊，和伺服器端互動 //同步方式下，send這句話會在伺服器端的資料回來後才執行完 //非同步方式下，send這句話會立即執行完 xmlhttp.send(null);}function callback(){ alert(xmlhttp.readyState); //測試 readyState 的不同時間的狀態 , //判斷對象的狀態是互動完成 if(xmlhttp.readyState==4){ //判斷http的互動是否成功 if(xmlhttp.status==200){ //最好不要將兩個if條件寫一起，因為開始readyState會有0，1，2，3的過程，此時都會調用回呼函數，此是就不滿足判斷的條件了 // 擷取伺服器端返回的資料 //擷取伺服器端輸出的純文字資料 var responseText=xmlhttp.responseText; //將資料顯示在頁面上 // 通過dom方式找到div標籤所對應的元素的節點 var divNode=document.getElementById("result"); //設定元素節點中html的內容 divNode.innerHTML = responseText; } }}
代碼中已經包含了詳細的注釋了，我這裡就不進行解釋了；
下面採用jquery來實現上面的代碼：
//定義使用者名稱校正的方法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 //使用jquery的XMLHttprequest對象get請求的封裝 $.get("AjaxServer?name="+userName,null,callback);}//回呼函數,data為伺服器端返回的資料function callback(data){ //alert("伺服器端的資料回來了");測試與伺服器端的互動 //3.接受伺服器端返回的資料 // alert(data); 測試data //4.將伺服器端返回的資料動態顯示在頁面上 // 找到儲存資料的節點 var resultObj=$("#result"); //動態改變頁面中div的內容 resultObj.html(data); }
大家發現了吧，用jquery來實現，出去注釋以後代碼不足10行，可見jquey已經幫我們做了大量的基礎工作了
為了將整個過程展示下，我現在將背景操作類AjaxServer.java也進行實現，我這裡為了簡單起見就不使用架構了，直接用servlet進行實現：
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); } }
大家在上面的代碼時可以看到這裡對緩衝的處理，其實我們在時間應用中很少會這樣處理，這裡我只是為了就這個問題而寫了上面的代碼，我們一般情況下是不希望瀏覽器
去讀取緩衝的，所有我們為了騙過瀏覽器，就會在Ajax請求的地址中加上一個參數時間戳記，這樣就能保證每次請求的地址都不一樣的了；
具體的使用大家可以去看：http://www.cnblogs.com/shenliang123/archive/2012/04/19/2456758.html
還有就是基於Ajax的兩種互動方式：http://www.cnblogs.com/shenliang123/archive/2012/04/19/2456800.html
我們這邊實現的是基於HTML互動的；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
