前言
AJAX 是在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁的技術。需要知道的是，Ajax技術并不是一項新的技術，而是使用現有技術解決問題的新方法。Ajax（Asynchronous JavaScript and XML）也叫異步JavaScript和XML，該技術最早應用于Google maps上，也是Google把這項技術帶到千家萬戶，可以發現目前主流的Web開發框架都集成了Ajax的功能，這點也說明了這項技術的優越性。Ajax技術的工作原理很簡單：通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
概述
首先我們已經知道ajax是一種局部刷新技術，那么為什么要使用局部刷新技術呢？如果不使用局部刷新就意味著就得刷新整個網頁，這個過程可能會提交不必要的請求，所以使用ajax技術的直接原因是可以減少服務器的響應負擔，加速響應過程。使用ajax技術與使用普通表單最直接的區別是前者刷新的時候地址欄不會發生變化，而后者會發生變化。
簡易留言本開發
先演示一下整個項目，請注意瀏覽器的地址是否發生變化：
從上面的演示中，我們可以看到瀏覽器并沒有發生刷新，地址欄的地址也沒有發生變化。現在我們應該對ajax技術有了一個初步的印象（一種地址欄不會發生變化的技術，先這樣理解咯）。
下面我們來一步步實現這個簡易的留言本：
搭建開發環境
創建一個工程gbook，項目結構（已經實現好）如下：
action包：控制器，用于分發請求給服務層
dao包：實現留言本的頂層接口
dao.impl包：dao包接口的實現類
entity包：JavaBean
service包：服務層，用于對外提供功能
utils：工具類
編寫首頁
簡要編寫如下：
<html><body><table id="tbl"></table><input type="text" id="sname"><br><input type="text" id="title"><br><textarea rows="5" cols="20" id="content"></textarea><br><button id="add">添加
</button></body>
</html> 編寫ajax.js
這個js文件是這個項目的核心之一，表單的所有請求都使通過這個js來完成的，請看代碼：
function del(url){var xmlhttp = getXmlHttpRequest();xmlhttp.onreadystatechange=
function(){if (xmlhttp.readyState==
4 && xmlhttp.status==
200){load();}};xmlhttp.open(
"GET",url,
true);xmlhttp.send();
}
function getXmlHttpRequest() {var xmlhttp;
if (window.XMLHttpRequest) {xmlhttp =
new XMLHttpRequest();}
else {xmlhttp =
new ActiveXObject(
"Microsoft.XMLHTTP");}
return xmlhttp;
}
function load(){var table = $(
"tbl");
var xmlhttp = getXmlHttpRequest();xmlhttp.onreadystatechange=
function(){if(xmlhttp.readyState ==
4 && xmlhttp.status ==
200){table.innerHTML = xmlhttp.responseText;}}xmlhttp.open(
"GET",
"gbookAction?item=list",
true);xmlhttp.send();
}window.onload =
function(){load();
var btn = $(
"add");btn.onclick =
function(){var sname = $(
"sname").value;
var title = $(
"title").value;
var content = $(
"content").value;
var xmlhttp = getXmlHttpRequest();xmlhttp.open(
"GET",
"http://localhost:8080/gbook/gbookAction?item=add&sname=" + sname +
"&title=" + title +
"&content=" + content,
true);xmlhttp.send();xmlhttp.onreadystatechange =
function(){if(xmlhttp.readyState ==
4 && xmlhttp.status ==
200){load();}}$(
"sname").value=
"";$(
"title").value=
"";$(
"content").value=
"";}
}
我們注意到，使用ajax提交表單請求，通過創建XmlHttpRequest對象，并調用其open方法以及send方法，向服務器發起請求，當成功收到響應的時候會調用onreadystatechange 事件，這個事件就是響應服務器的請求的。如果有返回值，則返回值會被封裝到XMLHttpRequest對象的responseText域中，然后瀏覽器愛干嘛干嘛。
創建gbookAction（類似Struts1中的ActionMapping）
gbookAction類主要用于接收ajax的請求，并調用服務層（如果需要的話）進行響應。在這個留言本中，使用到的功能包括添加留言、顯示所有留言、刪除留言。所以在gbookAction中只需要處理這三類請求就可以了，具體源碼如下：
package
com.gbook.actionimport java
.io.IOException
import java
.io.PrintWriter
import java
.util.Listimport javax
.servlet.ServletException
import javax
.servlet.http.HttpServlet
import javax
.servlet.http.HttpServletRequest
import javax
.servlet.http.HttpServletResponseimport
com.gbook.entity.Gbook
import
com.gbook.service.GbookServicepublic class GbookAction extends HttpServlet {private static final long serialVersionUID = -
5872201223353026952Lprivate GbookService service = new GbookService()@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request
.setCharacterEncoding(
"utf-8")String item = request
.getParameter(
"item")if(item
.equals(
"add")){//添加留言String sname = request
.getParameter(
"sname")String title = request
.getParameter(
"title")String content = request
.getParameter(
"content")Gbook gbook = new Gbook()gbook
.setSname(sname)gbook
.setTitle(title)gbook
.setContent(content)service
.add(gbook)}else if(item
.equals(
"list")){//加載所有留言request
.setCharacterEncoding(
"utf-8")response
.setContentType(
"text/html;charset=utf-8")PrintWriter
out = response
.getWriter()List<Gbook> list = service
.queryAllGbooks()
out.print(
"<tr>")
out.print(
"<th>姓名</th>")
out.print(
"<th>標題</th>")
out.print(
"<th>內容</th>")
out.print(
"<th>操作</th>")
out.print(
"</tr>")for (Gbook gbook : list) {
out.print(
"<tr>")
out.print(
"<td>"+gbook
.getSname()+
"</td>")
out.print(
"<td>"+gbook
.getTitle()+
"</td>")
out.print(
"<td>"+gbook
.getContent()+
"</td>")
out.println(
"<td><a href=\"javascript:del('http://localhost:8080/gbook/gbookAction?item=del&id="+gbook
.getId()+
"')\">del</a></td>")
out.print(
"</tr>")}}else if(item
.equals(
"del")){//刪除留言int id = Integer
.parseInt(request
.getParameter(
"id"))service
.deleteGbookById(id)}}
}
在處理添加留言請求的時候，使用service層，service層代碼調用dao層，dao層完成具體的添加留言實現，而在dao層繼續調用持久層（也就是上面DBUtils.java類），最終完成留言的添加。
同樣地，在處理加載所有留言的請求的時候，調用service層，然后使用PrintWriter對象直接把留言信息顯示到瀏覽器上。刪除留言類似，就不再贅述了。
配置web.xml
代碼如下：
<servlet><servlet-name>GbookAction
</servlet-name><servlet-class>com.gbook.action.GbookAction
</servlet-class></servlet><servlet-mapping><servlet-name>GbookAction
</servlet-name><url-pattern>/gbookAction
</url-pattern></servlet-mapping> 這里省略了JDBC連接數據庫相關源碼，這部分較簡單就不再贅述了。
完整源碼可以參看這里。
ajax技術小結
這只不過是ajax技術的一個最簡答的應用了，還遠遠沒有沒有發揮其威力，其威力可以在Google map中得到體現：當拖動鼠標時顯示不同的位置信息就是一個很好體現。ajax技術優化了前端代碼，實現了頁面的局部刷新，這個特點可以在高訪問量的情況得到體現，對ajax技術的研究還沒有停止，至少知道ajax技術的原理與實際應用了。
總結
以上是生活随笔為你收集整理的J2EE开发技术点4：ajax技术的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
