AJAX 初探

前端之家收集整理的这篇文章主要介绍了AJAX 初探前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
之前用过一次AJAX,太久忘光了,最近找工作拿起来复习一下。AJAX的英文全程为Asynchronous JavaScript and XML,即异步的javascript 和 xml 结合。这种技术已经用了很多年,举一个例子就是注册用户名时,用ajax技术去访问后台数据库,查看用户名是否已被注册,然后在文本框后面或者下面给出提示,少去了@R_329_404@面的步骤,增加了交互性。在此我们就可以用这个例子来练练手:
用户名属性哪里设置
onblur = "validate()"
,即当用户名的文本框失去焦点时触发这个事件。
接下来就用js来实现validate()函数
 <script type="text/javascript">
	var req;
	function validate() {
		var idField = document.getElementById("userid");//取得文本框里用户名
		
		var url = "validate.jsp?id=" + escape(idField.value);//设置待会跳转的URL,并把用户名传进过去
		//alert(url);
		if(window.XMLHttpRequest) { //判断是否为IE7+,Firefox,Chrome,Opera,Safari浏览器
			req = new XMLHttpRequest()//浏览器内部的对象-XMLHttpRequest-用来实现发送和接收HTTP请求与响应信息
		} else if (window.ActiveXObject) {//ie5, ie6
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		req.open("GET",url,true);//用get方式打开刚才设置的url,true设置为异步
		req.onreadystatechange = callback; //req调完open后,readystate的值为1,当state的状态改调用callback()
		req.send(null);
	}
	
	function callback() {
		if(req.readyState == 4) { //readystate为4表示已把xml数据加载完毕
			if(req.status == 200) { //http协议中server反馈给客户端时,status=200表示正常,404表示不正常
				//alert(req.responseText);
				var msg = req.responseXML.getElementsByTagName("msg")[0];//接收标签为msg的内容
				//alert(msg);
		        setMsg(msg.childNodes[0].nodeValue);//调用setmsg函数
			}
		}
	}
	
	function setMsg(msg) {
		
		mdiv = document.getElementById("usermsg");
		
		if(msg == "invalid") {
			mdiv.innerHTML = "<font color='red'>用户名已经存在</font>";//判断xml中传来的数据,如果用户名已被注册,既提示用户名已存在”
		} else {
			mdiv.innerHTML = "<font color='green'>恭喜你,此用户名可以注册!</font>";//否则提示可以注册
		}
	}
	

</script>
 

XM里面的部分内容
   <%@page import="com.User" pageEncoding="ISO-8859-1"%>

<%
	
	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
	//前面四句是设置返回的头文件名
	
	//下面是到后台数据库,然后用<msg>标签返回不同的结果
	String name = request.getParameter("id");
	//System.out.println(name);
	if(name != null && !name.trim().equals("")) {
		boolean isExist = User.idExist(name);
		
		if(isExist) {
			response.getWriter().write("<msg>invalid</msg>");
		} else {
			response.getWriter().write("<msg>valid</msg>");
		}
	}
	
%>
 
这就是一个简单的Ajax例子。 原文链接:https://www.f2er.com/ajax/165656.html

猜你在找的Ajax相关文章