亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

ajax和jsp

系統 1566 0

這是學習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


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧，站長會非常 感謝您的哦?。。?/p>

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板： 午夜主播国产福利视频在线 | 高清国产一区二区三区 | 亚洲欧美在线中文字幕不卡 | 国产一区 在线视频 | 亚洲欧美强伦一区二区另类 | 麻豆国产高清精品国在线 | 狠狠干天天爽 | 欧美性猛交xxxxxxxx软件 | 中文字幕在线观看日本 | 综合久久精品 | 在线激情网址 | 天堂成人av | 国产九九热 | 国产一级影片 | 日本aaaa| 99久久精品国产综合男同 | 国产成人免费在线观看 | 在线播放 亚洲 | 精品乱人伦一区二区 | 一机毛片| 精品国产一区二区三区久久影院 | 国产成人亚洲精品无广告 | 欧美亚洲国产另类在线观看 | 国产精品免费久久久久影院 | 一区二区三区在线视频观看 | 亚洲视频在线观看不卡 | 欧美一级久久久久久久大 | 50-60岁老妇女一级毛片 | jizzz亚洲美女 | 中文字幕精品视频在线 | 一级毛片在线观看视频 | 色噜噜狠狠一区二区三区 | 站长推荐国产精品视频 | 手机看片久久高清国产日韩 | 这里只有精品66 | 波多结衣一区二区三区 | 国内精品小视频 | 免费在线观看h片 | 最近中文字幕无免费视频 | 日本一区毛片免费观看 | 免费观看一级特黄欧美大片 |