Ajax技术使用

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
<!--
#toolTip{
 position: absolute;
 left: 311px;
 top: 39px;
 width: 98px;
 height: 48px;
 padding-top: 45px;
 padding-left: 25px;
 padding-right: 25px;
 z-index: 1;
 display: none;
 color: red;
 background-image: url(images/tooltip.jpg);
}
-->
</style>
</head>
<body>
<form action="" method="post" name="form1">
用户名:<input name="username" type="text" id="username" size="32">
<img src="images/checkBt.jpg" width="104" height="23" style="cursor: hand;" onclick="checkUser(form1.username);"><br><br>
密 码:<input name="password1" type="text" id="password1" size="35" onclick="checkUser(form1.username);"><br><br>
确认密码:<input name="passowrd2" type="text" id="password2" size="35"><br><br>
E-mail :<input name="email" type="text" id="email" size="35">
<input type="image" name="imageField" src="images/registerBt.jpg">
</form>
<div id="toolTip"></div>
</body>
</html>
<script language="javascript">
function createRequest(url) {
    http_request = false;
    if (window.XMLHttpRequest) {                                   // 非IE浏览器
        http_request = new XMLHttpRequest();                          //创建XMLHttpRequest对象
    } else if (window.ActiveXObject) {                                // IE浏览器
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");       //创建XMLHttpRequest对象
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");  //创建XMLHttpRequest对象
           } catch (e) {}
        }
    }
    if (!http_request) {
        alert("不能创建XMLHttpRequest对象实例!");
        return false;
    }
    http_request.onreadystatechange = getResult;                       //调用返回结果处理函数
    http_request.open('GET', url, true);                               //创建与服务器的连接
    http_request.send(null);                                       //向服务器发送请求
}
function getResult() {
    if (http_request.readyState == 4) {             // 判断请求状态
        if (http_request.status == 200) {             // 请求成功,开始处理返回结果
            document.getElementById("toolTip").innerHTML=http_request.responseText;    //设置提示内容
            document.getElementById("toolTip").style.display="block";    //显示提示框
        } else {                             // 请求页面有错误
            alert("您所请求的页面有错误!");
        }
    }
}
function checkUser(userName){
    if(userName.value==""){
        alert("请输入用户名!");userName.focus();return;
    }else{
        createRequest('checkUser.jsp?user='+userName.value);
    }
}
</script>
 1 <%@page import="java.util.Arrays"%>
 2 <%@ page language="java" contentType="text/html; charset=UTF-8"
 3     pageEncoding="UTF-8"%>
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5 <html>
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 8 <title>Insert title here</title>
 9 </head>
10 <body>
11 <%
12 String[] userList={"123456","111111"};
13 String user = new String(request.getParameter("user").getBytes("ISO-8859-1"),"UTF-8");
14 Arrays.sort(userList);
15 int result = Arrays.binarySearch(userList, user);
16 if(result>-1){
17     out.println("很抱歉,该用户名已经被注册!");
18 }else{
19     out.println("恭喜您,该用户名没有被注册!");
20 }
21 %>
22 </body>
23 </html>

 

posted @ 2016-11-14 19:40  荆小八  阅读(277)  评论(0编辑  收藏  举报