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

最新推荐文章于 2023-06-26 21:51:24 发布

Sup_Heaven

最新推荐文章于 2023-06-26 21:51:24 发布

阅读量782

点赞数 1

分类专栏： Ajax 文章标签： ajax xmlhttprequest function callback string input

本文链接：https://blog.csdn.net/Sup_Heaven/article/details/7015095

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近想实现以下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" οnblur="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>");
}
%>

Sup_Heaven

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax 小例子示例简单应用如何使用

最近想实现以下ajax检测用户名，无奈发现网上很多例子讲的都不清不楚的，最后终于在一个项目发现了一个自己认为写得比较简单易懂的例子，我讲它简化整理了以下。本例子中将不会详细描述ajax的一些基本概念（如XMLHttpRequest，readyState），这些可以参考http://www.w3school.com.cn/ajax/，里面讲的慢好的。下面开始将这个检测用户名的小例子，只要新建
复制链接

扫一扫