目前，編寫應用程序時有兩種基本的選擇：
- 桌面應用程序
- Web應用程序
它們有什么區別呢？桌面應用程序一般很快（就在您的計算機上運行，不用等待互聯網連接），具有漂亮的用戶界面（通常和操作系統有關）和非凡的動態性。可以單擊、選擇、輸入、打開菜單和子菜單、到處巡游，基本上不需要等待。而相對而言，Web應用程序是最新的潮流，它提供了在桌面上不能實現的服務（比如 Amazon.com和eBay）。但是，伴隨着Web的強大而出現的是等待，等待服務器響應，等待屏幕刷新，等待請求返回和生成新的頁面。
Ajax能做什么呢？它就是嘗試在Web應用程序中使用像桌面應用程序中常見的那些動態用戶界面和漂亮的控件。現在就讓我們來看看Ajax如何將笨拙的Web界面轉化成能迅速響應的Ajax應用程序吧。
舉一個小例子，大家都經常在一些網站注冊用戶。早幾年，這是個不太愉快的經歷。簡單回想一下吧，在您千辛萬苦輸入用戶名，密碼，電子郵箱等一大片個人信息后，點擊提交按鈕將信息提交到服務器上，然后頁面一片空白，您開始痛苦地等待。更不幸的是，您的用戶名已經被人家注冊過了！這時候您又會回到原先的注冊頁面，而前面填寫過的信息已經盪然無存，您又開始陷入重新填寫，提交，等待的循環，直到所填寫的信息全部通過服務器端驗證……這對您的耐心真是一種莫大的考驗！您已經受夠了。
幸好，AJAX橫空出世。有了它，一切都不一樣啦。當您輸入注冊名並點擊旁邊的一個驗證按鈕后，可以立刻在輸入框的后面無刷新地顯示該用戶名是否被注冊。哈哈，您被拯救了！那么，它是怎么做到的呢？其實道理非常簡單，它就是通過客戶端腳本，判斷您已經輸入了用戶名，然后去創建一個組件（XMLHTTP），異步地將用戶名提交到服務器檢測，服務器會把檢測結果輸出給客戶端組件，那么客戶端組件在知道結果后，就可以通過DOM去顯示結果。我們不明白這個不要緊，先來看ajax應用的第一個demo（這里做了一個前台HTML頁面和一個后台Servlet）:
regedit.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
var xmlHttpReq;
//創建一個XmlHttpRequest對象
function createXmlHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlHttpReq = new XMLHttpRequest();//非IE瀏覽器
}else
{
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器
}
}
//檢測用戶名是否已經被注冊
function checkUser()
{
var username = document.getElementById("user").value;
if(username=="")
{
alert("用戶名必須填寫！");
return false;
}
//首先創建精靈對象
createXmlHttpRequest();
//指明准備狀態改變時回調的函數名
xmlHttpReq.onreadystatechange=handle;
//嘗試以異步的get方式訪問某個URL
//請求服務器端的一個servlet
var url = "check?username="+username;
xmlHttpReq.open("get",url,true);
//向服務器發送請求
xmlHttpReq.send(null);
}
//狀態發生改變時回調的函數
function handle()
{
//准備狀態為4
if(xmlHttpReq.readyState==4)
{
//響應狀態碼為200，代表一切正常
if(xmlHttpReq.status==200)
{
var res = xmlHttpReq.responseText;
var result = document.getElementById("result");
result.innerHTML = "<font color=red>"+res+"</font>";
}
}
}
</script>
</head>
<body>
<center><h1>表單注冊</h1></center>
<hr>
姓名:
<input type="text" id="user">
<input type="button" value="檢測用戶名" onclick="checkUser()">
<span id="result"></span>
</body>
</html>
Check.java:
package com.wepull.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Check extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //解決返回中文亂碼問題 response.setCharacterEncoding("utf-8"); String user = request.getParameter("username"); //解決接收中文亂碼問題 user = new String(user.getBytes("iso-8859-1"),"gb2312"); System.out.println(user); String msg = null; if("許老師".equals(user)) { msg = "用戶名已經被占用!"; }else { msg = "用戶名可以使用!"; } response.getWriter().println(msg); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }