本文主要是介绍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的valuevar regionValue = field.value;// 创建XMLHttpRequest对象,需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码// 针对FireFox，Mozillar，Opera，Safari，IE7，IE8if (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) {// 获取城市selectvar citySelect = window.document.getElementById("province");// 往城市select添加option之前先清空之前的optioncitySelect.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创建新的optionvar 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引擎跟服务器交互失败");}}
}这篇关于1.AJAX:客户端(服务器返回的是XML数据格式)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
