學習使用AJAX之前，有幾樣的東西是必須的：
1、HTML
2、DHTML，就是動態HTML，這裡可能會常用到document.getElementById([id])方法，或者是使用 window.id.value=[value]等等，如果不熟悉，不及，看看下面的例子，如果還不能夠理解，再把網上搜搜， 這方面的解釋多得不能夠再多了。
3、Javascript。這個就是非常的重要的，因為好多東西都需要通過這個去操作。
4、DOM。這個不是必須的，就算我們不知道這個東西，照樣可以用JAVASCRIT做很多的東西了。
5、資料庫操作及SQL知識。現在應用程式好多都是與資料庫打交道，常見的使用者名稱資訊等等，都是放在數 據庫中的。
下面進行正題吧，這個執行個體非常的簡單，採用JSP實現使用者輸入的使用者是否存在於資料庫中，並且給以相應 的提示，所謂“麻雀雖小，五髒俱全”，其它的發揮就是在這個方向上發揮開發。
總共有三個檔案，有兩個JSP面，一個用於前台顯示，一個用於確定使用者是否存在;另外一個JAVA頁面，用 於做資料庫連接。
註：請注意其中注釋，那是非常的有助於你理解
前台顯示：index.jsp
<html>
<head>
<title></title>
<script language="javascript" >
var httpRequest;
/**
下面這個函數可以返回一個適合任何瀏覽器 的httpRequest，步子如下：
1.試著建立一個XMLHttpRequest()樣本，該樣本可適合於除了微軟以外的所 有瀏覽器
2.增加錯誤判斷，如果當前瀏覽器是微軟的，那麼就建立適用於微軟的瀏覽器
3.但微軟的瀏 覽器又有兩個版本之分，不過據說微軟已經在7.0中增加對XMLHttpRequest()的支援
4.但這樣也需要對原 來的瀏覽器支援，否則你寫出來的程式那些用老版本瀏覽器的使用者就是看不
到效果的。
*/
function createRequest()
{
try{
request=new XMLHttpRequest();
}catch(trymicrosoft)
{
try{
request=new ActiveXObject ("Msxml2.XMLHTTP");
}catch(othermicrosoft)
{
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
request=false;
}
}
}
if(!request)
{
alert("err Happend!");
return null;
}
return request;
}
/**
這個函數就是使用者的動作所有觸發的函數，如下面的 onblur()時，就會調用該函數
經過的步驟如下：
1.從HTML頁面得到你需要的資料，可以采有 document.getElementById("")方法。
2.建立需要的URL，該URL就和在FORM裡面的method為get時並採用 submit提交在地址欄
裡面到的一樣
3.開啟與伺服器的串連，這裡面有三個必要的參數，雖然文檔規定 只有兩個，但是我個
人覺得最好用三個，
第一個可以是GET,POST或者是POST，但常用的就是前面的兩 個，並且最好都用大寫，因
為有些瀏覽器如FireFox可能會報錯，
第二個就是打報的URL，這肯定你是 必須的。
第三個就是下面的看到的true，這裡可以是false。true表示同步處理，你提交後可以做
其 它的事情，這就是AJAX裡面的A，即asynchronous;如是false，那就得等到伺服器的返
回才能夠做其它的 事情。
4.等到伺服器完成，並且確定返回執行了正確執行的提示，我們就可以做下面我們想做的
事情 。這些後面的事情就必須通過Javascript去完成了，因為XMLHttpRequest的唯一用途
就是發送請求及接收 伺服器的響應結果。
5.上面都完成了後，就可以採用send()方法向伺服器發送你需要發送的資訊了，它的 參數
可以是任何類型，發送的資料格式必須為這樣的格式：
name=value&anothername=othervalue&so=on，如果你想傳送資料，你必須更改MIME類型：
httpRequest.setRequestHeader('Content-type','application/x-www-form-urnlencoded');
否則服 務器將會丟棄發送的資料。
*/
function getBackInfo()
{
var username=document.getElementById("username").value;
var url='checkUser.jsp? username='+username;
request.open("GET",url,"true");
//下面相當於是一個隱性的迴圈 ，在函數中規定只有都接收完畢資料後才做處理
//onreadystatechange有5個值：
// 0:未初 始化
// 1:初始化
// 2:發送資料
// 3:接收資料中
// 4:資料接收完畢
//另外還要注意就是在註冊回呼函數onreadystatechange時，後面的函數不能夠帶參數
//如下 disResult是一個函數，不能夠帶參。
reqeust.onreadystatechange=disResult;//隱性的迴圈
request.send(null);
}
function disResult()
{
/**
1.一定要確定readystate==4的完 成狀態才做下面的事，否則會在建立串連即readystate==1的
時候就開始，然後會在readystate==2， readystate==3，readystate==4的時候都會執行，不信
你可以alert("")一個提示資訊試試。
2.服務 器通知完成了，並且還要保證是正確完成的，得到的是我們需要的結果才能夠繼續，這裡
常用響應碼有：
200:成功執行
401:未授權
403:禁止
404:沒有找到檔案
*/
if (request.readystate==4)
{
if(request.status==200)
{
//一切都OK了，那就該用Javascript去執行你想要的動作了。
document.getElementById ("disCheckResult").value=request.responseText;
alert('done');
}
else
{
alert('Something Wrong has Happend!');
}
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type=text id="username" onblur="getBackInfo();">
</td>
<td>
<dd id="disCheckResult">這裡用於在執行後顯示結果的地方 </dd>
</td>
</tr>
</table>
</form>
</body>
</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
