当前位置： 代码迷 >> JavaScript >> ajax跟jsp
  详细解决方案

ajax跟jsp

热度：406   发布时间：2012-11-04 10:42:41.0
ajax和jsp

这是学习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. }??
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.