這是學習AJAX的第一篇文章，我把自己學習一些心得寫出來，因為是從初學者的腳度出發，可能會寫得比較詳細，因為我就是一個初學者，也知道作為一個初學者，隨隨便便的拿一個例子就看看，是只知道要這樣，但為什么要這樣卻不清楚，我這里就盡我自己的語言，讓初學者和我一樣，能夠看了這篇文章之后，“哦，這里原來是這樣的”。我個人還是喜歡從實例出發，對我自己而言，看了過后如果沒有實例鞏固，效果就不會那么好，也就不會減除對這個東西的神秘感，其實，從我個人的腳度出發后，因為前面寫了兩篇關于使用innerHTML實現動態效果的文章，再學這個就做了一個很好的鋪墊了。因為這里面許多的時候都會使用 innerHTML，不過，這個要注意，這個東東只支持微軟的瀏覽器（我的FireFox不行，其它牌子支持與否我沒有測試過，不過，在瀏覽器界中，好像只有微軟的獨樹一家，亂來，呵呵），你可以看一下我先面的兩篇文章：
利用innerHTML實現隱顯效果-兩種實現方法
通過改變innerHTML的內容，動態增加選擇項
學習使用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代碼

1. < html > ??
2. < head > ??
3. < title > </ title > ??
4. < script ? language = "javascript" ? > ??
5. var?httpRequest; ??
6. //下面這個函數可以返回一個適合任何瀏覽器的httpRequest，步子如下： ??
7. //1.試著創建一個XMLHttpRequest()示例，該示例可適合于除了微軟以外的所有瀏覽器 ??
8. //2.增加錯誤判斷，如果當前瀏覽器是微軟的，那么就創建適用于微軟的瀏覽器 ??
9. //3.但微軟的瀏覽器又有兩個版本之分，不過據說微軟已經在7.0中增加對XMLHttpRequest()的支持 ??
10. //4.但這樣也需要對原來的瀏覽器支持，否則你寫出來的程序那些用老版本瀏覽器的用戶就是看不到效果的。 ??
11. function?createRequest() ??
12. { ??
13. ????try{ ??
14. ???????? request = new ?XMLHttpRequest(); ??
15. ????}catch(trymicrosoft) ??
16. ????{ ??
17. ????????try{ ??
18. ???????????? request = new ?ActiveXObject("Msxml2.XMLHTTP"); ??
19. ????????}catch(othermicrosoft) ??
20. ????????{ ??
21. ????????????try{ ??
22. ???????????????? request = new ?ActiveXObject("Microsoft.XMLHTTP"); ??
23. ????????????} ??
24. ????????????catch(failed) ??
25. ????????????{ ??
26. ???????????????? request = false ; ??
27. ????????????} ??
28. ????????} ??
29. ????} ??
30. ????if(!request) ??
31. ????{ ??
32. ???????alert("err?Happend!"); ??
33. ???????return?null; ??
34. ????}??????? ??
35. ????return?request; ??
36. } ??
37. //這個函數就是用戶的動作所有觸發的函數，如下面的onblur()時，就會調用該函數 ??
38. //經過的步驟如下： ??
39. //1.從HTML頁面得到你需要的數據，可以采有document.getElementById("")方法。 ??
40. //2.建立需要的URL，該URL就和在FORM里面的method為get時并采用submit提交在地址欄里面到的一樣 ??
41. //3.打開與服務器的連接，這里面有三個必要的參數，雖然文檔規定只有兩個，但是我個人覺得最好用三個， ??
42. //??第一個可以是GET,POST或者是POST，但常用的就是前面的兩個，并且最好都用大寫，因為有些瀏覽器如FireFox可能會報錯， ??
43. //??第二個就是打報的URL，這肯定你是必須的。 ??
44. //??第三個就是下面的看到的true，這里可以是false。true表示同步處理，你提交后可以做其它的事情， ??
45. //??這就是AJAX里面的A，即asynchronous;如是false，那就得等到服務器的返回才能夠做其它的事情。 ??
46. //4.等到服務器完成，并且確定返回執行了正確執行的提示，我們就可以做下面我們想做的事情。這些后面的事情就必須通過 ??
47. //??Javascript去完成了，因為XMLHttpRequest的唯一用途就是發送請求及接收服務器的響應結果。 ??
48. //5.上面都完成了后，就可以采用send()方法向服務器發送你需要發送的信息了，它的參數可以是任何類型，發送的數據格式必須為 ??
49. //??這樣的格式： name = value & anothername = othervalue & so = on ，如果你想傳送數據，你必須更改MIME類型： ??
50. //??httpRequest.setRequestHeader('Content-type','application/x-www-form-urnlencoded'); ??
51. //??否則服務器將會丟棄發送的數據。 ??
52. function?getBackInfo() ??
53. { ??
54. ????var? username = document .getElementById("username").value; ??
55. ????var? url = 'checkUser.jsp?username=' +username; ??
56. ????request.open("GET",url,"true"); ??
57. ????//下面相當于是一個隱性的循環，在函數中規定只有都接收完畢數據后才做處理 ??
58. ????//onreadystatechange有5個值： ??
59. ????//?0:未初始化 ??
60. ????//?1:初始化 ??
61. ????//?2:發送數據 ??
62. ????//?3:接收數據中 ??
63. ????//?4:數據接收完畢 ??
64. ????//另外還要注意就是在注冊回調函數onreadystatechange時，后面的函數不能夠帶參數 ??
65. ????//如下disResult是一個函數，不能夠帶參。 ??
66. ???? reqeust.onreadystatechange = disResult ;//隱性的循環 ??
67. ????request.send(null); ??
68. } ??
69. function?disResult() ??
70. { ??
71. ????//1.一定要確定 readystate ==4的完成狀態才做下面的事，否則會在建立連接即 readystate ==1的時候就開始， ??
72. ????//??然后會在 readystate ==2， readystate ==3， readystate ==4的時候都會執行，不信你可以alert("")一個 ??
73. ????//??提示信息試試。 ??
74. ????//2.服務器通知完成了，并且還要保證是正確完成的，得到的是我們需要的結果才能夠繼續，這里常用響應碼有： ??
75. ????//??200:成功執行 ??
76. ????//??401:未授權 ??
77. ????//??403:禁止 ??
78. ????//??404:沒有找到文件 ??
79. ????if( request.readystate ==4) ??
80. ????{ ??
81. ????????if( request.status ==200) ??
82. ????????{ ??
83. ????????????//一切都OK了，那就該用Javascript去執行你想要的動作了。 ??
84. ????????????document.getElementById("disCheckResult") .value = request .responseText; ??
85. ????????????alert('done'); ??
86. ????????} ??
87. ????????else ??
88. ????????{ ??
89. ????????????alert('Something?Wrong?has?Happend!'); ??
90. ????????} ??
91. ????} ??
92. } ??
93. </ script > ??
94. </ head > ??
95. < body > ??
96. ?? < form > ??
97. ???? < table > ??
98. ???????? < tr > ??
99. ???????????? < td > ??
100. ???????????????? < input ? type = text ? id = "username" ? onblur = "getBackInfo();" > ??
101. ???????????? </ td > ??
102. ???????????? < td > ?????????????? ??
103. ???????????????? < dd ? id = "disCheckResult" > 這里用于在執行后顯示結果的地方 </ dd > ??
104. ???????????? </ td > ??
105. ???????? </ tr > ??
106. ???? </ table > ??
107. ?? </ form > ??
108. </ body > ??
109. </ html > ??

    <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>
  

第二個用于驗證的JSP頁面：checkUser.jsp

Java代碼

1. <!DOCTYPE?HTML?PUBLIC? "-//W3C//DTD?HTML?4.01?Transitional//EN" ??
2. "http://www.w3.org/TR/html4/loose.dtd" > ??
3. <%@?page?contentType= "text/html;charset=GBK" %> ??
4. <%@?page? import = "project1.DBMS_Conn" %> ??
5. <html> ??
6. ??<head> ??
7. ????<meta?http-equiv= "Content-Type" ?content= "text/html;?charset=GBK" /> ??
8. ????<title>checkUser</title> ??
9. ??</head> ??
10. ??<body> ??
11. ??<% ??
12. ????String?username=request.getParameter( "username" ); ??
13. ????DBMS_Conn?conn= new ?DBMS_Conn(); ??
14. ???? if (conn.checkUser(username)) ??
15. ????????out.println( "用戶名已經存在！" ); //這個信息就是發送到前臺去顯示的信息，即服務器返回的信息 ??
16. ???? else ??
17. ????????out.println( "可以繼續！" ); ??
18. ??%> ??
19. ??</body> ??
20. </html>??

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=GBK"%>
<%@ page import="project1.DBMS_Conn"%>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
    <title>checkUser</title>
  </head>
  <body>
  <%
    String username=request.getParameter("username");
    DBMS_Conn conn=new DBMS_Conn();
    if(conn.checkUser(username))
        out.println("用戶名已經存在！");//這個信息就是發送到前臺去顯示的信息，即服務器返回的信息
    else
        out.println("可以繼續！");
  %>
  </body>
</html>
  

第三個數據庫連接JAVA程序：

Java代碼

1. package ?project1; ??
2. ??
3. import ?java.sql.Connection; ??
4. import ?java.sql.DriverManager; ??
5. import ?java.sql.ResultSet; ??
6. import ?java.sql.SQLException; ??
7. import ?java.sql.Statement; ??
8. ??
9. public ? class ?DBMS_Conn?{ ??
10. ????Connection?conn; ??
11. ????Statement?st; ??
12. ???? public ?DBMS_Conn()?{ ??
13. ????????conn_init(); ??
14. ????} ??
15. ???? void ?conn_init()?{ ??
16. ????????setConnection(); ??
17. ????????setStatement(); ??
18. ????} ??
19. ???? public ? void ?setConnection()?{ ??
20. ???????? try ?{ ??
21. ???????????? //Class.forName("org.gjt.mm.mysql.Driver").newInstance(); ??
22. ????????????Class.forName( "sun.jdbc.odbc.JdbcOdbcDriver" ); ??
23. ???????????? //db.mdb有一個名為user表，至少有一個名為username的字段 ??
24. ????????????String?strurl?= ??
25. ???????????????? "jdbc:odbc:driver={Microsoft?Access?Driver?(*.mdb)};DBQ=E:\\db.mdb" ; ??
26. ???????????? //conn?= ??
27. ???????????? //DriverManager.getConnection("jdbc:mysql://localhost/palfinger?user=root&password=admin&useUnicode=true&characterEncoding=8859_1"); ??
28. ????????????conn?=?DriverManager.getConnection(strurl); ??
29. ????????}? catch ?(Exception?e)?{ ??
30. ????????????e.printStackTrace(); ??
31. ????????} ??
32. ????} ??
33. ???? /** ?
34. ?????*?設置Statement ?
35. ?????*/ ??
36. ???? public ? void ?setStatement()?{ ??
37. ???????? try ?{ ??
38. ????????????st?= ??
39. ????conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,?ResultSet.CONCUR_READ_ONLY); ??
40. ????????}? catch ?(SQLException?e)?{ ??
41. ????????????e.printStackTrace(); ??
42. ????????} ??
43. ????} ??
44. ???? /** ?
45. ?????*?根據用戶名確定用戶是否存在 ?
46. ?????*/ ??
47. ???? public ? boolean ?checkUser(String?username)?{ ??
48. ????????String?sql= "select?*?from?user?where?username='" +username+ "'" ; ??
49. ????????ResultSet?rs; ??
50. ???????? try ?{ ??
51. ????????????rs?=?st.executeQuery(sql); ??
52. ???????????? if (rs.next()) ??
53. ????????????{ ??
54. ????????????????conn.close(); ??
55. ???????????????? return ? true ; ??
56. ????????????}??????????? ??
57. ????????}? catch ?(SQLException?e)?{ ??
58. ????????????e.printStackTrace(); ??
59. ????????} ??
60. ???????? try ?{ ??
61. ????????????conn.close(); ??
62. ????????}? catch ?(SQLException?e)?{ ??
63. ????????????e.printStackTrace(); ??
64. ????????} ??
65. ???????? return ? false ; ??
66. ????}?? ??
67. }??

ajax和jsp