jsp中ajax的基本应用

乔兵

本帖最后由段光宇于 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>

复制代码

帐号		自动登录	找回密码
密码			加入黑马

jsp中ajax的基本应用

评分

0 个回复