1.AJAX:客户端(服务器返回的是XML数据格式)

/** 
        <?xml version="1.0" encoding="UTF-8"?> 
         
        <items> 
            <item> 
                <id>10003</id> 
                <name>保定</name> 
            </item> 
            <item> 
                <id>10004</id> 
                <name>天津</name> 
            </item> 
        </items> 
*/ 
     
// XMLHttpRequest对象
var xmlHttpRequest;

/**
 *	大区select的option发生变化时调用此函数,把大区对应的城市查出来,放在城市select的option中
 *  这个方法将使用XMLHttpRequest对象来进行AJAX的异步数据交互
 */
function getCities(field) {

	// 获取大区select的option的value
	var regionValue = field.value;

	// 创建XMLHttpRequest对象,需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码

	// 针对FireFox，Mozillar，Opera，Safari，IE7，IE8
	if (window.XMLHttpRequest) {
		xmlHttpRequest = new XMLHttpRequest();

		//	针对某些特定版本的mozillar浏览器的BUG进行修正
		if (xmlHttpRequest.overrideMimeType) {
			xmlHttpRequest.overrideMimeType("text/xml");
		}

		// 针对IE6，IE5.5，IE5
	} else if (window.ActiveXObject) {
		// 两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中,排在前面的版本较新
		var activeXName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];

		for ( var int = 0; int < activeXName.length; int++) {
		
			try {
				// 取出一个控件名进行创建，如果创建成功就终止循环,如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
				xmlHttpRequest = new ActiveXObject(activeXName[int]);
				break;

			} catch (e) {
			}
		}
	}

	// 确认XMLHTtpRequest对象创建成功
	if (!xmlHttpRequest) {
		window.alert("XMLHttpRequest对象创建失败!");
		return false;
	}
	
	// 注册回调函数,需要函数名，不要加括号
	xmlHttpRequest.onreadystatechange = callback;
	
	// 设置连接信息
    // 第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
    // 第二个参数表示请求的url地址，get方式请求的参数也在url中
    // 第三个参数表示采用异步还是同步方式交互，true表示异步
    xmlHttpRequest.open("GET", "../servlet/StatReportServlet?command=${getCity}®ionId=" + regionValue + "&date=" + new Date(), true);
	
	// 发送数据，客户端设置信息发送给AJAX引擎
	xmlHttpRequest.send(null);
}

/**
 * 回调函数
 */
function callback() {
	
	// 接收响应数据,AJAX引擎跟服务器交互完成
	if (xmlHttpRequest.readyState == 4) {
		// AJAX引擎跟服务器交互成功
		if (xmlHttpRequest.status == 200) {
		
			// 服务器(servlet)返回的是XML数据
			var domObj = xmlHttpRequest.responseXML;
			
			// 正确返回XML数据对象
			if (domObj) {
				
				// 获取节点item(数组)
				var itemElement = domObj.getElementsByTagName("item");
				
				// 节点item长度大于0才是正常情况
				if (itemElement.length > 0) {
					
					// 获取城市select
					var citySelect = window.document.getElementById("province");
					// 往城市select添加option之前先清空之前的option
					citySelect.options.length = 0;
					// 添加默认的option(全部)
					var allOption = new Option("--全部--", 0);
					citySelect.add(allOption);
					
					// 遍历节点item,取出子节点id和name的内容,设置在城市select的option中
					for ( var int = 0; int < itemElement.length; int++) {
						var id = itemElement[int].childNodes[0].firstChild.nodeValue;
						var name = itemElement[int].childNodes[1].firstChild.nodeValue;
						
						// 根据name,id创建新的option
						var nameIdOption = new Option(name, id);
						citySelect.add(nameIdOption);							
					}
					
					
				} else {
					window.alert("XML数据格式错误,原始的文本内容是 " + xmlHttpRequest.responseText);
				}
				
			} else {
				window.alert("XML数据格式错误,原始的文本内容是 " + xmlHttpRequest.responseText);
			}
		
			// AJAX引擎跟服务器交互失败	
		} else {
			window.alert("AJAX引擎跟服务器交互失败");
		}
	}
}