Ajax的初步使用

下面用一个小示例，检测用户是否注册，来演示Ajax的使用：

index.jsp：

<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">

<style>
<!--
#toolTip {
	position: absolute;
	left: 400px;
	top: 50px;
	width: 98px;
	height: 48px;
	padding-left: 25px;
	padding-top: 45px;
	padding-right: 25px;
	z-index: 1;
	display: none;
	color: red;
}
-->
</style>

<script language="JavaScript">
	http_request = false;
	//创建请求
	function createRequest(url) {
		if (window.XMLHttpRequest) {
			http_request = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					http_request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
				}
			}
		}
		if (!http_request) {
			alert("不能创建XMLHttpRequest对象实例！");
			return false;
		}
		http_request.onreadystatechange = getResult;
		http_request.open('GET',url,true);
		http_request.send(null);
	}

	//Ajax回调函数
	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('result.jsp?user=' + username.value);
		}
	}
</script>

<title>起始页</title>
</head>
<body>

	<form method="post" action="" name="form1">
		用户名：<input name="username" type="text" id="username" size="32" /> <img
			src="images/check.jpg" width="104" height="23" style="cursor: hand;"
			onclick="checkUser(form1.username);">
		<br> 密码：<input name="pwd1" type="password" id="pwd1" size="35">
		<br> 确认密码：<input name="pwd2" type="password" id="pwd2" size="35">
		<br> E-mail：<input name="email" type="text" id="email" size="45">
		<br> <input name="imageField" type="image"
			src="images/register.jpg">
	</form>

  <div id="toolTip"></div>

</body>
</html>

result.jsp：

<%@page import="java.sql.*"%>
<%@ page language="java" import="java.util.*" autoFlush="true"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/stringUtil" prefix="w"%>
<!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>
</head>
<body>
	<%
	    String[] userList = { "明日科技","mr","mrsoft","wgh" };
	    String user = new String(request.getParameter("user").getBytes("ISO-8859-1"),"UTF-8");
	    Arrays.sort(userList);
	    int result = Arrays.binarySearch(userList,user);
	    if (result > -1) {
	        out.println("很抱歉，该用户名已经被注册！");
	    } else {
	        out.println("恭喜您，该用户名没有被注册！");
	    }
	%>
</body>
</html>

Ajax的初步使用

猜你在找的Ajax相关文章