AJAX入门

使用XMLHttpRequest对象进行异步的操作

效果：输入时，进行同步的用户名检验
第一步：静态的html页面，作为进行检验的对象，当光标离开输入框的时候，触发validate()方法，查找数据库进行检验

<td>用户名：</td>
	<td>
		<input type=text name=username id=userid onblur="validate()" />
		<div id=usermsg ></div>
	</td>

第二步：编写validate()方法

<script type="text/javascript" >
	var req;
	function validate() {
        //拿到输入用户名的节点
		var username = document.getElementById("userid");
       //写明请求的url地址，使用encodeURI/escape/encodeURIComponent方法对特殊字符进行编码
		var url = "validate.jsp?id=" + encodeURI(username.value);
        //根据不同的操作系统创建不同的XMLHttpRequest对象
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
        //使用open方法进行请求，第三个参数如果是true表示异步，false表示同步
		req.open("get", url , true);
        //onreadystatechange属性相当于监听器，此处相当于函数指针，触发时调用callback()方法
		req.onreadystatechange = callback;
		req.send(null);
	}
	
	function callback() {
//请求分为四个状态，1：已经连接上，2：连接上并成功发送请求，3：进行请求处理的过程中，4：请求处理完成
		if(req.readyState == 4) {
        //确定请求的状态为已经完成
			if(req.status == 200) {
             //确定请求的结果是正确的，而不是tomcat自己生成的结果
                 //对响应的数据进行处理，此处响应的是XML页面
				var node = req.responseXML.getElementsByTagName("msg")[0];
				var msg = node.childNodes[0].nodeValue;
				setMsg(msg);
			}
		}
	}
	//此方法根据响应的数据，进行相应的界面显示
	function setMsg(msg) {
		var node = document.getElementById("usermsg");		
		if(msg == "valid") {
			node.innerHTML = "<font color='green' >可以注册</font>";
		} else {
			node.innerHTML = "<font color='red' >用户名已经被注册过</font>";
		}
	}
</script>

使用AJAX产生二级菜单的联动
准备产生联动效果的静态页面的代码：

<form name="form2" method="post" >
	<select name="category1" onchange="changeCategory()" >
		<option selected >--选择一级目录--</option>
		<option value=93 >电脑/软件/网络/办公</option>
		<option value=95 >珠宝手饰/银饰礼品</option>
		<option value=96 >运动户外/休闲</option>
	</select>
	<select name="category2" >
		<option selected >--选择二级目录--</option>
	</select>
</form>

第一种方法：不使用AJAX产生二级联动的效果，直接从数据库中读出所有的数据：
第一：在客户端动态的生成javascript代码

<%!
private String getSecondCategoriesStr(List<Category> categories , Category category) {
	StringBuilder str = new StringBuilder();
	str.append("if(document.form2.category1.value == " + category.getId() + ") {\n");
	str.append("subNode.options.length = 1;\n");
	for(int i = 0; i < categories.size(); i++) {
		Category c = categories.get(i);
		if(c.getPid() == category.getId()) {
			str.append("var selOption" + i + " = document.createElement('option');\n");
			str.append("selOption" + i + ".innerText = '" + c.getName() + "';\n");
			str.append("selOption" + i + ".value = " + c.getId() + ";\n");
			str.append("subNode.appendChild(selOption" + i + ");\n\n");
		}
	}
	str.append("}\n");
	return str.toString();
}
%>

第二步：编写javascript代码做动态展示

<script type="text/javascript">
	<!--
	function changeCategory() {
		var subNode = document.form2.category2;
		<%=str %>
	}
	-->
</script>

第二种方法：使用AJAX产生返回作息为非xml的二级联动

<script type="text/javascript">
	<!—
     //向处理的文件发送请求，进行异步处理
	var req;
	function changeCategory() {		
		var id = document.form2.category11;
		url = "getchildcategory.jsp?id=" + escape(id.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) {
				parse(req.responseText);
			}
		}
	}
	//编写处理返回信息的函数，对返回的信息进行解析
	function parse(msg) {
		var subNode = document.form2.category22;
         //使用正则表达式，去除首尾的空格
		msg = msg.replace(/(^\s+)|(\s+$)/g,"");
         //对返回信息为空串的信息进行特殊处理
		if(msg == null || new String(msg) == "") {
			subNode.options.length = 1;
		} else {
			var categories = msg.split(",");
			subNode.options.length = 1;
			for(var i = 0; i < categories.length; i ++) {
				var categoryProperty = categories[i].split("_");
				var id = categoryProperty[0];
				var name = categoryProperty[1];
				var selOption = document.createElement("option");
				selOption.innerText = name;
				selOption.value = id;
				subNode.appendChild(selOption);
			}
		}
	}
	-->
</script>

编写处理请求的函数，处理请求并返回处理结果

<%@ page import="yuan.rui.love.*" %>
<%@ page import="java.util.*" %>
<%
String strId = request.getParameter("id");
int id = -1;
if(strId != null && !strId.equals("")) {
	id = Integer.parseInt(strId);
}
List<Category> categories = new ArrayList<Category>();
categories = Category.getChilds(id);
StringBuilder strBuild = new StringBuilder();
for(int i = 0; i < categories.size(); i++) {
	Category c = categories.get(i);
	if(i != categories.size() - 1) {
		strBuild.append(c.getId() + "_" + c.getName() + ",");
	} else {
		strBuild.append(c.getId() + "_" + c.getName());
	}
}
response.setContentType("text/xml;charset=gbk");
response.setHeader("Cache-Control", "no-store");  //HTTP 1.1
response.setHeader("Pragma", "no-cache");  //HTTP 1.0
response.setDateHeader("Expires", 0);  //prevents caching at the proxy server
response.getWriter().write(strBuild.toString());
%>

第三种方法：在服务器端生成javascript代码，在用户端直接执行

<script type="text/javascript">
	<!--
	var req;
	function changeCategory() {		
		var id = document.form2.category11;
		url = "getchildcategory_1.jsp?id=" + escape(id.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) {
				var subNode = document.form2.category22;
				eval(req.responseText);
			}
		}
	}
	-->
</script>

处理请求的程序，服务器端动态地生成javascript代码

<%@ page import="yuan.rui.love.*" %>
<%@ page import="java.util.*" %>

<%
String strId = request.getParameter("id");
int id = -1;
if(strId != null && !strId.equals("")) {
	id = Integer.parseInt(strId);
}
List<Category> categories = new ArrayList<Category>();
categories = Category.getChilds(id);
StringBuilder strBuild = new StringBuilder();
strBuild.append("subNode.options.length = 1;\n");
for(int i = 0; i < categories.size(); i++) {
	Category c = categories.get(i);
	strBuild.append("var selOption" + i + " = document.createElement('option');\n");
	strBuild.append("selOption" + i + ".innerText = '" + c.getName() + "';\n");
	strBuild.append("selOption" + i + ".value = " + c.getId() + ";\n");
	strBuild.append("subNode.appendChild(selOption" + i + ");\n");
}
response.setContentType("text/html;charset=gbk");
response.setHeader("Cache-Control", "no-store");  //HTTP 1.1
response.setHeader("Pragma", "no-cache");  //HTTP 1.0
response.setDateHeader("Expires", 0);  //prevents caching at the proxy server
response.getWriter().write(strBuild.toString());
%>

第四种方法：使用AJAX产生返回信息为xml的二级联动

<script type="text/javascript">
	<!--
	var req;
	function changeCategory() {		
		var id = document.form2.category11;
		url = "getchildcategory_2.jsp?id=" + escape(id.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) {
				parseXML(req.responseXML);
			}
		}
	}
	
	function parseXML(xml) {
		var categories = xml.getElementsByTagName("categories")[0];
		var subNode = document.form2.category22;
		subNode.options.length = 1;
		for(var i = 0; i < categories.childNodes.length; i++) {
			var category = categories.childNodes[i];
			var id = category.childNodes[0].childNodes[0].nodeValue;
			var name = category.childNodes[1].childNodes[0].nodeValue;
			var selOption = document.createElement("option");
			selOption.innerText = name;
			selOption.value = id;
			subNode.appendChild(selOption);
		}
	}
	-->
</script>

处理请求并返回格式为xml处理信息的页面：

<%@ page import="yuan.rui.love.*" %>
<%@ page import="java.util.*" %>

<%
String strId = request.getParameter("id");
int id = -1;
if(strId != null && !strId.equals("")) {
	id = Integer.parseInt(strId);
}
List<Category> categories = new ArrayList<Category>();
categories = Category.getChilds(id);
StringBuilder strBuild = new StringBuilder();
for(int i = 0; i < categories.size(); i++) {
	Category c = categories.get(i);
	strBuild.append("<category><id>" + c.getId() + "</id><name>" + c.getName() + "</name></category>");
}
//xml文件中必需有要节点，最好也写上头文件
strBuild.insert(0,"<?xml version='1.0' encoding='gb2312'?><categories>");
strBuild.append("</categories>");

response.setContentType("text/xml;charset=gbk");
response.setHeader("Cache-Control", "no-store");  //HTTP 1.1
response.setHeader("Pragma", "no-cache");  //HTTP 1.0
response.setDateHeader("Expires", 0);  //prevents caching at the proxy server
response.getWriter().write(strBuild.toString());
%>