1.AJAX簡介
AJAX是實現web2.0服務中的核心技術,全稱為「非同步JavaScript和XML技 術」（Asynchronous JavaScript and XML）；Ajax的核心技術理念在於使用XMLHttpRequest對象發送非同步請求.最初為XMLHttpRequest對象提供瀏覽器支持的是微軟公司.AJAX技術的出現,可以說是挽救了傳統的B/S結構,並賦與web應用新的生命.簡單的說,通過AJAX,我們可以用XMLHttpRequest對象來直接與伺服器進行通信,通過這個對象,我們就可以在不重載頁面的情況與 Web 伺服器交換數據.
2.AJAX的優點
在傳統的 JavaScript 編程中,假如您希望從伺服器上的文件或資料庫中得到任何的信息,或者向伺服器發送信息的話,就必須利用一個 HTML 表單向伺服器 GET 或 POST 數據.而用戶則需要單擊「提交」按鈕來發送/獲取信息,等待伺服器的響應,然後一張新的頁面會載入結果.
由於每當用戶提交輸入后伺服器都會返回一張新的頁面,傳統的 web 應用程序變得運行緩慢,且越來越不友好.
通過利用 AJAX,您的 JavaScript 會通過 JavaScript 的 XMLHttpRequest 對象,直接與伺服器來通信.
通過使用 HTTP 請求,web 頁可向伺服器進行請求,並得到來自伺服器的響應,而不載入頁面.用戶可以停留在同一個頁面,他或她不會注意到腳本在後台請求過頁面,或向伺服器發送過數據.
3.AJAX中用到的技術
實際上,Ajax不是一種技術,而是幾種技術.每種技術都具有獨特之處,合在一起就形成功能強大的新技術.Ajax包括：
javaScript:實現客戶端的數據發送和界面更新,是ajax實現的編程語言；
XMLHttpRequest：瀏覽器內置的用以進行非同步數據發送和接收的對象,是AJAX核心對象；
Css div:對用戶而言,AJAX的價值是用戶界面更加友好---這當然還是依靠css div實現；
DOM模型：AJAX常見的技巧就是使用js響應dom組件事件或更新其；
Xml:XML僅是一種傳輸數據的格式,在ajax應用中常以xml格式在c/s間交換數據；
Html
4.AJAx的實現步驟
實現AJAX的第一步就是要創建XMLHttpRequest對象
而在不同的瀏覽器中,創建該對象的方法是不同的
IE 瀏覽器使用 ActiveXObject,而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內建對象.
為了是程序更加的兼容,我們可以使用if語句或者是try catch語句來創建該對象
如：function ajaxFunction（）
{
var xmlHttp;
try
{
// Firefox, Opera 8.0 , Safari
xmlHttp=new XMLHttpRequest（）；
}
catch （e）
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject（"Msxml2.XMLHTTP"）；
}
catch （e）
{
try
{
xmlHttp=new ActiveXObject（"Microsoft.XMLHTTP"）；
}
catch （e）
{
alert（"您的瀏覽器不支持AJAX！"）；
return false;
}
}
}
}
</script>
在上面的例子中 ,
聲明一個保存 XMLHttpRequest 對象的 xmlHttp 變數.
然後使用 XMLHttp=new XMLHttpRequest（） 來創建此對象.這條語句針對 Firefox、Opera 以及 Safari 瀏覽器.假如失敗,則嘗試針對 Internet Explorer 6.0 的 xmlHttp=new ActiveXObject（"Msxml2.XMLHTTP"）,假如也不成功,則嘗試針對 Internet Explorer 5.5 的 xmlHttp=new ActiveXObject（"Microsoft.XMLHTTP"）.
第二步是向伺服器發送數據和請求
要想把請求發送到伺服器,我們就需要使用 open（） 方法和 send（） 方法.
open（） 方法需要三個參數.第一個參數定義發送請求所使用的方法（GET 還是 POST）.第二個參數規定伺服器端腳本的 URL.第三個參數規定應當對請求進行非同步地處理.
主要形式為：xmlHttp.open（"GET",url,true）；
xmlHttp.send（null）；
第三步,也是很重要的一步就是獲得伺服器的響應后採取相應的操作：如改變WEB頁面的某一個元素的值等
在獲得伺服器的響應前,我們有必要解釋一下 XMLHttpRequest 對象的幾個重要的屬性.
1、onreadystatechange 屬性
onreadystatechange 屬性存有處理伺服器響應的函數
2、responseText 屬性
可以通過 responseText 屬性來取回由伺服器返回的數據.
下面是我用AJAX寫的一個小程序,目的是在不載入頁面的情況下,當滑鼠從用戶欄離開時在時間欄里顯示當前時間
主要代碼如下：
頁面的代碼是：<html>
<head>
<title>Ajax1.0.html</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<script type="text/javascript">
function AjaxFunction（）{
var xmlHttp;
//1、
是創建XMLHttpRequest對象
try
{
//FireFox,Poera 8.0 ,Safari
xmlHttp=new XMLHttpRequest（）；
}
catch（e）{
try{
//IE6.0
xmlHttp=new ActiveXObject（"Msxml2.XMLHTTP"）；
}
catch（e）{
try{
//IE5.5
xmlHttp=new ActiveXObject（"Microsoft.XMLHTTP"）；
}
catch（e）{
alert（"您的瀏覽器不支持AJAX！"）；
return false;
}
}
//3、獲取伺服器的響應並顯示時間
}
xmlHttp.onreadystatechange=function（）
{
if（xmlHttp.readyState==4）{
document.myForm.time.value=xmlHttp.responseText;
}
}
//2、發送請求給伺服器
xmlHttp.open（"GET","time",true）；//time是Servlet的名字,也是其URL地址
xmlHttp.send（null）；
}
</script>
<body>
<form name="myForm" >
<table>
<tr> <td>用戶</td>
<td><input type="text" name="username" onblur ="AjaxFunction（）；"/></td>
//onblur ="AjaxFunction（）；來激活javascript中的代碼
</tr>
<tr> <td>時間</td>
<td><input type="text" name="time" /></td>
</tr>
</table>
</form><br>
</body>
</html>
Servlet time的主要代碼是：
public void doGet（HttpServletRequest request, HttpServletResponse response）
throws ServletException, IOException {
response.setContentType（"text/html;charset=UTF-8"）；
PrintWriter out = response.getWriter（）；
Date d=new Date（）；
int h=d.getHours（）；
int m=d.getMinutes（）；
int s=d.getSeconds（）；
System.out.println（d）；
out.println（h ":" m ":" s）；//這裡就將剛創建的時間傳遞給了html頁面
out.flush（）；
out.close（）；
}
