现在的位置: 首页 > 综合 > 正文

ajax 小例子 示例 简单应用 如何使用

2018年02月06日 ⁄ 综合 ⁄ 共 2221字 ⁄ 字号 评论关闭

最近想实现以下ajax检测用户名,无奈发现网上很多例子讲的都不清不楚的,最后终于在一个项目发现了一个自己认为写得比较简单易懂的例子,我讲它简化整理了以下。

本例子中将不会详细描述ajax的一些基本概念(如XMLHttpRequest,readyState),这些可以参考http://www.w3school.com.cn/ajax/,里面讲的慢好的。

下面开始将这个检测用户名的小例子,只要新建两个jsp页面即可完成本实验。为了方便起见,本例验证用户名没用去查询数据库,而是当提交的用户名是admin时提示用户名已存在,否则的话提示用户名可用。

ajax.jsp源码:

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ajax检测用户名实验</title>
<script type="text/javascript">
	var req;
	function validate() {
		var idField = document.getElementById("userid");
		var url = "Validate.jsp?userid=" + idField.value;
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		req.open("GET", url, true);
		req.onreadystatechange = callback;
		req.send(null);
	}
	
	function callback() {
		if(req.readyState == 4) {
			if(req.status == 200) {
				//alert(req.responseText);
				var msg = req.responseXML.getElementsByTagName("msg")[0];
				//alert(msg);
		        setMsg(msg.childNodes[0].nodeValue);
			}
		}
	}
	
	function setMsg(msg) {
		//alert(msg);
		mdiv = document.getElementById("usermsg");
		if(msg == "invalid") {
			mdiv.innerHTML = "<font color='red'>username exists</font>";
		} else {
			mdiv.innerHTML = "<font color='green'>congratulations! you can use this username!</font>";
		}
	}
</script>
</head>
<body>
	<form method="post"  action="###" onSubmit="###">
	<table align="center" cellpadding="4" cellspacing="1">
		<tr>
			<td colspan="2" >注册 - 必填内容</td>
		</tr>
		<tr>
			<td colspan="2" ><span id="usermsg"></span></td>
		</tr>
		<tr>
			<td>用户名:</td>
			<td><input id="userid" name="userid" type="text" onblur="validate()"></td>
		</tr>
		<tr>
			<td>密码:</td>
			<td ><input name="password"  type="password"></td>
		</tr>
		<tr>
			<td >确认密码:</td>
			<td ><input name="password2"  type="password"></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><input  value="提   交" type="submit"></td>
		</tr>
	</table>
	</form>
</body>
</html>

Validate.jsp源码:

<%
String userid=request.getParameter("userid");
userid=new String(userid.getBytes("ISO8859_1"),"gb2312");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevents catching at proxy server
if(userid.equals("admin")){
response.getWriter().write("<msg>invalid</msg>");
}else{
	response.getWriter().write("<msg>valid</msg>");
}
%>

 

 

抱歉!评论已关闭.