该资源主要介绍了AJAX技术在实际生活中的应用实例,通过创建XMLHttpRequest对象,实现异步数据交互。 在网页开发中,AJAX(Asynchronous JavaScript and XML)是一种用于创建动态网页的技术,它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。下面将详细解释这个实例中涉及到的AJAX知识点: 1. 创建XMLHttpRequest对象: - 在IE浏览器中,使用`new ActiveXObject("Microsoft.XMLHTTP")`创建XMLHttpRequest对象。 - 对于非IE浏览器,如Firefox、Chrome等,使用`new XMLHttpRequest()`创建对象。`createXMLHttpRequest()`函数就是为了兼容不同浏览器而设计的。 2. 发送请求: - 在`setCoUnis(o)`函数中,首先调用了`createXMLHttpRequest()`来确保XMLHttpRequest对象已经创建。然后根据传入的对象`o`的`id`属性,拼接成一个请求URL,例如`serShowCoUnis?coId=某个值`。 - 使用`xmlrequest.open()`方法初始化请求,第一个参数是请求类型(这里是GET),第二个参数是请求的URL,第三个参数为布尔值,表示请求是否异步(通常设为true)。 - `xmlrequest.onreadystatechange`事件监听器用于检查请求状态,当状态改变时,调用`getCoUnis()`函数处理响应。 3. 处理响应: - 当`xmlrequest.readyState`等于4时,表示请求已完成,`xmlrequest.status`等于200表示请求成功。这时,`getCoUnis()`函数被调用。 - `xmlrequest.responseXML`属性返回服务器响应的数据,如果服务器返回的是XML格式,可以使用`getElementsByTagName()`方法解析XML数据,获取到`province`元素的集合。 - 在这个例子中,遍历得到的`province`元素,生成HTML表格结构,并绑定点击事件`setProUnis(this)`,以便用户选择省份时,继续发送新的AJAX请求获取对应省份的城市信息。 4. 事件绑定和传递参数: - `setProUnis(this)`函数通过`this`关键字传递当前元素对象,可以获取到省份ID和对应的`coId`,这使得我们可以在不重新发送整个请求的情况下,仅用省份ID就能获取城市信息。 这个实例展示了如何使用AJAX进行数据的获取和页面动态更新,以及如何处理和展示返回的数据。通过这种方式,用户可以更加流畅地与网页互动,而无需等待整个页面刷新,提高了用户体验。
function createXMLHttpRequest() {
if (window.ActiveXObject) { //IE浏览器
xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
} else { //其他浏览器(Window.XMLHttpRequest)
xmlrequest = new XMLHttpRequest();
}
}
function setCoUnis(o) {
createXMLHttpRequest();
if (xmlrequest) {
//准备发送请求
// window.alert(o.id);
var req = "serShowCoUnis?coId=" + o.id;
//打开请求,参数为请求方式,请求那个servlet,是否为异步请求
xmlrequest.open("get", req, true);
//指定处理结果的函数,回调函数
xmlrequest.onreadystatechange = getCoUnis; //可用function(){}匿名函数
//发送请求
xmlrequest.send(req);
}
}
function getCoUnis() {
if (xmlrequest.readyState == 4) {
if (xmlrequest.status == 200) { //200为正常响应
var pros = xmlrequest.responseXML.getElementsByTagName("province"); //responseXML得到响应的XML,responseText得到响应的文本;
var con = "<table width='100%'><tr>";
//window.alert(pros.length);
for (var i = 1; i <= pros.length; i++) {
con += "<td><a onclick='setProUnis(this)' href='javascript:void(0);' id='" + pros[i - 1].childNodes[0].childNodes[0].data + "' coId='" + pros[i - 1].childNodes[2].childNodes[0].data + "' class='xh'>" + pros[i - 1].childNodes[1].childNodes[0].data + "</a></td>";
if (i % 15 == 0) {
con += "</tr><tr>";
}
}
con += "</tr></table>";
}else{
con = " ";
}
document.getElementById("proTbl").innerHTML = con;
var unis = xmlrequest.responseXML.getElementsByTagName("unis");
var con2 = "<table width='100%'><tr>";
for (var i = 1; i <= unis.length; i++) {
con2 += "<td><li><a onclick='showMyUni(this)' href='javascript:void(0);' id='" + unis[i - 1].childNodes[0].childNodes[0].data + "' class='xh'>" + unis[i - 1].childNodes[1].childNodes[0].data + "</a></li></td>";
if (i % 3 == 0) {
con2 += "</tr><tr>";
}
}
con2 += "</tr></table>";
document.getElementById("uniTbl").innerHTML = con2;
}
}
}
//响应用户点击省市
function setProUnis(o) {
剩余5页未读,继续阅读
- 粉丝: 0
- 资源: 3
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- WebLogic集群配置与管理实战指南
- AIX5.3上安装Weblogic 9.2详细步骤
- 面向对象编程模拟试题详解与解析
- Flex+FMS2.0中文教程:开发流媒体应用的实践指南
- PID调节深入解析:从入门到精通
- 数字水印技术:保护版权的新防线
- 8位数码管显示24小时制数字电子钟程序设计
- Mhdd免费版详细使用教程:硬盘检测与坏道屏蔽
- 操作系统期末复习指南:进程、线程与系统调用详解
- Cognos8性能优化指南:软件参数与报表设计调优
- Cognos8开发入门:从Transformer到ReportStudio
- Cisco 6509交换机配置全面指南
- C#入门:XML基础教程与实例解析
- Matlab振动分析详解:从单自由度到6自由度模型
- Eclipse JDT中的ASTParser详解与核心类介绍
- Java程序员必备资源网站大全