本帖最后由 段光宇 于 2013-12-31 22:35 编辑
这两天一直在研究jsp中ajax技术,所谓ajax在jsp中主要应用就是在不刷新当前页面的情况下,后台与服务器进行交互从而刷新当前页面的部分内容,使得网页操作更加快捷美观,更大大减小了网络资源的占用。
下面实现了ajax最基础的应用,注册页面在不刷新的情况下判断用户输入的用户名是否已存在。
基本截图:
输入用户名前:
输入用户名后:
ajax自动将输入数据与服务器进行异步交互,在不刷新页面的情况下,显示出了用户名的占用情况。
实现核心代码:
表单部分:
在输入框属性中定义失去焦点时触发js检查用户名函数。- <tr>
- <td width="20%" height="35">用户名:<br /></td>
- <td width="88%"><input name="textusername" id="inputusername" onBlur="javaScript:CheckName();" type="text" size="30" />
- <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>
- </tr>
复制代码
js部分:
- function GetO() {
- var ajax=false;
- try {
- ajax = new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e) {
- try {
- ajax = new ActiveXObject("Microsoft.XMLHTTP");
- }
- catch (E) {
- ajax = false;
- }
- }
- if (!ajax && typeof XMLHttpRequest!='undefined') {
- ajax = new XMLHttpRequest();
- }
- return ajax;
- }
- function getMyHTML(serverPage, objID) {
- var ajax = GetO();
- //得到了一个html元素,在下面给这个元素的属性赋值
- var obj = document.all[objID];
- //设置请求方法及目标,并且设置为异步提交
- ajax.open("post", serverPage, true);
- ajax.onreadystatechange = function() {
- if (ajax.readyState == 4 && ajax.status == 200) {
- //innerHTML是HTML元素的属性,如果您不理解属性那就理解为HTML元素的变量
- //ajax.responseText是服务器的返回值,把值赋给id=passport1的元素的属性
- //innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容
- obj.innerHTML = ajax.responseText;
- }
- }
- //发送请求
- ajax.send(null);
- }
- function CheckName() {
- var username=regform.textusername.value;
- if(username==""){
- alert('没有输入用户名!');
- return false;
- }
- if(username.length < 5){
- alert("用户名过短!请重新输入用户名!");
- return false;
- }
- getMyHTML("checkusername1.jsp?username="+username, "passport1");
- }
复制代码 jsp判断用户名部分:
- <p> </p><p><%@ page contentType="text/html;charset=GBK"%>
- <%@page import="java.sql.*"%>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
- <title>checkUser</title>
- </head>
- <body>
- <%
- //request.setCharacterEncoding("GBK");//解决request识别中文为乱码
- String username=request.getParameter("username");
- // 定义数据库用变量
- Connection conn = null;
- Statement stmt = null;
- ResultSet rs;
- // 连接数据库
- Class.forName("com.mysql.jdbc.Driver");
- conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bluerainbbs", "root", "root");
- // 保存数据
- stmt = conn.createStatement();
- rs = stmt.executeQuery("select * from bluerain_user where user_name='"+username+"'");
- if(rs.next())
- {
- out.println("用户名已经存在!");
- }
- else
- {
- out.println("用户名可以使用!");
- }
- %>
- </body>
- </html></p><p>
- </p>
复制代码
|