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交互的；