ajax---简单使用Demo

最新推荐文章于 2024-10-07 21:00:41 发布

crianzy

最新推荐文章于 2024-10-07 21:00:41 发布

阅读量636

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/chen930724/article/details/8829823

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单的ajax 使用demo。

前台文本框失去焦点（还可以是其他事件）就后台执行查询。

同时还会回馈给前台。

<script type="text/javascript">
	function Createregxml() {
		try {
			regxml = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
			try {

				regxml = new ActiveXObject("Msxm12.XMLHTTP");
			} catch (E) {
				regxml = false;
			}
		}

		if (!regxml && typeof XMLHttpRequest != 'undefined') {
			regxml = new XMLHttpRequest();
		}
		return regxml;
	}

	function returnI() {

		if (regxml.readyState == 4) {
			var Data = regxml.responseText;
			// alert(Data);
			var str = Data.substring(0, 3);
			//alert(str);
			if (str == "yes") {
				var divobj = document.getElementById("divusername");
				divobj.innerHTML = "<font color=greed>√</font>可以注册检查通过。";
			} else {
				var divobj = document.getElementById("divusername");
				divobj.style.display = "block";
				divobj.innerHTML = "<font color=red>×</font>这个用户名已经被注册了，请换一个";
			}
		}
	}

	function chcek() {
		var username = document.getElementById("username").value;
		alert(username);
		regxml = Createregxml();
		regxml.onreadystatechange = returnI;
		var url = "service.jsp?";
		regxml.open("post", url + "username=" + username);
		regxml.send(null);
	}
</script>

<body>
	<input type="text" name="username" id="username" οnblur="chcek()">
	<div id="divusername"></div>
</body>

service.jsp

后台执行查询操作

<%
	String username = request.getParameter("username");
	System.out.println(username);
	out.clear();
	if ("chen".equals(username)) {
		out.print("no");
	} else {
		out.print("yes");
	}
%>