黑马程序员技术交流社区

标题: jsp中ajax的基本应用 [打印本页]
作者: 段光宇    时间: 2013-12-31 22:28
标题: jsp中ajax的基本应用
本帖最后由 段光宇 于 2013-12-31 22:35 编辑

这两天一直在研究jsp中ajax技术，所谓ajax在jsp中主要应用就是在不刷新当前页面的情况下，后台与服务器进行交互从而刷新当前页面的部分内容，使得网页操作更加快捷美观，更大大减小了网络资源的占用。
下面实现了ajax最基础的应用，注册页面在不刷新的情况下判断用户输入的用户名是否已存在。
基本截图：
输入用户名前：


输入用户名后：
ajax自动将输入数据与服务器进行异步交互，在不刷新页面的情况下，显示出了用户名的占用情况。



实现核心代码：
表单部分：
在输入框属性中定义失去焦点时触发js检查用户名函数。
  1. <tr>
  2. <td width="20%" height="35">用户名：<br /></td>
  3. <td width="88%"><input name="textusername" id="inputusername" onBlur="javaScript:CheckName();" type="text" size="30" />
  4. <font size='-1' color="red">*（用户名位数不得少于6位）</font> <input type="button" name="Button" value="检测用户" onClick="checkname('Checkusername.jsp')"><div id="passport1" style="color: red"></div> </td>
  5. </tr>
复制代码


js部分：
  1. function GetO() {
  2. var ajax=false;
  3. try {
  4. ajax = new ActiveXObject("Msxml2.XMLHTTP");
  5. }
  6. catch (e) {
  7. try {
  8. ajax = new ActiveXObject("Microsoft.XMLHTTP");
  9. }
  10. catch (E) {
  11. ajax = false;
  12. }
  13. }
  14. if (!ajax && typeof XMLHttpRequest!='undefined') {
  15. ajax = new XMLHttpRequest();
  16. }
  17. return ajax;
  18. }
  19. function getMyHTML(serverPage, objID) {
  20. var ajax = GetO();
  21. //得到了一个html元素，在下面给这个元素的属性赋值
  22. var obj = document.all[objID];
  23. //设置请求方法及目标，并且设置为异步提交
  24. ajax.open("post", serverPage, true);
  25. ajax.onreadystatechange = function() {
  26. if (ajax.readyState == 4 && ajax.status == 200) {
  27. //innerHTML是HTML元素的属性，如果您不理解属性那就理解为HTML元素的变量
  28. //ajax.responseText是服务器的返回值，把值赋给id=passport1的元素的属性
  29. //innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容
  30. obj.innerHTML = ajax.responseText;
  31. }
  32. }
  33. //发送请求
  34. ajax.send(null);
  35. }
  36. function CheckName() {
  37. var username=regform.textusername.value;
  38. if(username==""){
  39. alert('没有输入用户名！');
  40. return false;
  41. }
  42. if(username.length < 5){
  43. alert("用户名过短！请重新输入用户名！");
  44. return false;
  45. }
  46. getMyHTML("checkusername1.jsp?username="+username, "passport1");
  47. }
复制代码
jsp判断用户名部分：




  2. <p> </p><p><%@ page contentType="text/html;charset=GBK"%>
  3. <%@page import="java.sql.*"%>
  4. <html>
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
  7.     <title>checkUser</title>
  8. </head>
  9. <body>
  10. <%
  11.         //request.setCharacterEncoding("GBK");//解决request识别中文为乱码
  12. String username=request.getParameter("username");
  13.         // 定义数据库用变量
  14. Connection conn = null;
  15.         Statement stmt = null;
  16.         ResultSet rs;
  17.         // 连接数据库
  18. Class.forName("com.mysql.jdbc.Driver");
  19.         conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bluerainbbs", "root", "root");
  20.         // 保存数据
  21. stmt = conn.createStatement();
  22.         rs = stmt.executeQuery("select * from bluerain_user where user_name='"+username+"'");
  23.         if(rs.next())
  24.         {
  25.                 out.println("用户名已经存在！");
  26.         }
  27. else
  28.         {
  29.                 out.println("用户名可以使用！");
  30.         }
  31. %>
  32. </body>
  33. </html></p><p>
  34. </p>
复制代码





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2