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>?? <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>??
<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
- <!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>??
<!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程序：
- package?project1; ?? ?? import?java.sql.Connection; ?? import?java.sql.DriverManager; ?? import?java.sql.ResultSet; ?? import?java.sql.SQLException; ?? import?java.sql.Statement; ?? ?? public?class?DBMS_Conn?{ ?? ????Connection?conn; ?? ????Statement?st; ?? ????public?DBMS_Conn()?{ ?? ????????conn_init(); ?? ????} ?? ????void?conn_init()?{ ?? ????????setConnection(); ?? ????????setStatement(); ?? ????} ?? ????public?void?setConnection()?{ ?? ????????try?{ ?? ????????????//Class.forName("org.gjt.mm.mysql.Driver").newInstance(); ?? ????????????Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); ?? ????????????//db.mdb有一个名为user表，至少有一个名为username的字段 ?? ????????????String?strurl?= ?? ????????????????"jdbc:odbc:driver={Microsoft?Access?Driver?(*.mdb)};DBQ=E:\\db.mdb"; ?? ????????????//conn?= ?? ????????????//DriverManager.getConnection("jdbc:mysql://localhost/palfinger?user=root&password=admin&useUnicode=true&characterEncoding=8859_1"); ?? ????????????conn?=?DriverManager.getConnection(strurl); ?? ????????}?catch?(Exception?e)?{ ?? ????????????e.printStackTrace(); ?? ????????} ?? ????} ?? ????/** ? ?????*?设置Statement ? ?????*/?? ????public?void?setStatement()?{ ?? ????????try?{ ?? ????????????st?= ?? ????conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,?ResultSet.CONCUR_READ_ONLY); ?? ????????}?catch?(SQLException?e)?{ ?? ????????????e.printStackTrace(); ?? ????????} ?? ????} ?? ????/** ? ?????*?根据用户名确定用户是否存在 ? ?????*/?? ????public?boolean?checkUser(String?username)?{ ?? ????????String?sql="select?*?from?user?where?username='"+username+"'"; ?? ????????ResultSet?rs; ?? ????????try?{ ?? ????????????rs?=?st.executeQuery(sql); ?? ????????????if(rs.next()) ?? ????????????{ ?? ????????????????conn.close(); ?? ????????????????return?true; ?? ????????????}??????????? ?? ????????}?catch?(SQLException?e)?{ ?? ????????????e.printStackTrace(); ?? ????????} ?? ????????try?{ ?? ????????????conn.close(); ?? ????????}?catch?(SQLException?e)?{ ?? ????????????e.printStackTrace(); ?? ????????} ?? ????????return?false; ?? ????}?? ?? }??