Ajax基础入门(基于jQuery).ppt

ASP动态网页设计与Ajax技术 唐四薪 主编 第九章 基于jQuery的Ajax技术 Ajax概述 Ajax：异步JavaScript和XML（Asynchronous JavaScript and XML） 特点： ① 使用XHTML和CSS处理网页的内容和表现； ② 使用 DOM进行动态显示及交互； ③ 使用 XML 和 XSLT 进行数据交互和操作（可选，也可以使用其他格式）； ④ 使用 XMLHttpRequest对象在用户和服务器之间异步交换数据； ⑤ 使用 JavaScript 将上述几项绑定在一起 传统的Web应用程序 传统的Web应用程序：发送请求给服务器→服务器对请求进行处理（此时客户端需等待）→处理完成后服务器发送回全新的页面 基于Ajax的Web应用程序 基于Ajax的Web应用程序 Ajax程序： 在与Web服务器交互的过程中只传输页面上需要做更改的区域，而不传输整个页面； 同时，在与Web服务器交互的过程中，客户端仍然可以在当前页面继续操作，而不必等待服务器的响应。 Ajax技术的优点 ① 更好的用户体验，用户感觉响应速度更快； ② 可以把一些由服务器负担的工作转嫁到客户端，利用客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本； ③ Ajax由于可以调用外部数据，能方便地实现网站间数据的共享； ④ 基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序； ⑤ Ajax使Web中的界面与应用分离 9.1.2 载入页面的方法比较 iframe标记 远程脚本技术 Ajax技术 9.1.3 用原始的Ajax技术载入文档 Ajax技术的核心：XMLHttpRequest对象 XMLHttpRequest对象可以在不重新加载页面的情况下更新页面的局部，也就是在页面加载后仍然能向服务器请求数据，并接收服务器端返回的数据 XMLHttpRequest对象异步获取服务器端的数据包括以下几个步骤： ① 创建XMLHttpRequest对象的实例 创建XMLHttpRequest对象的实例 var xmlHttpReq; if (window.ActiveXObject){ xmlHttpReq = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest){ xmlHttpReq = new XMLHttpRequest(); } ② 使用open()方法指定载入文档请求 使用XMLHttpRequest对象的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式 xmlHttpReq.open(GET, 9-2.html, True); ③ 使用send()方法发送请求 使用open()方法指定了请求后，还要用send()方法将请求发送出去 xmlHttpReq.send(null); ④ 使用onreadystatechange事件监听服务器 用send()方法发送了一个载入文档的请求后，还要准备接收服务器端返回的文档或内容。但是客户端无法确定服务器端什么时候会完成这个请求。这时需要用事件监听机制来捕获请求的状态，XMLHttpRequest对象提供了onreadystatechange事件实现这一功能。 xmlHttpReq.onreadystatechange=RequestCallBack; function RequestCallBack(){ if(xmlHttpReq.readyState == 4 xmlHttpReq.status == 200){document.getElementById(target).innerHTML = xmlHttpReq.responseText; } } 说明 ①onreadystatechange事件中的事件处理函数只有在readyState属性发生改变时才会触发，readyState的值表示服务器对当前请求的处理状态，可以根据这个值来进行不同的处理。 readyState有五种可取值（0：尚未初始化；1：正在加载；2：加载完毕；3：正在处理；4：处理完毕）。 status属性表明请求是否已经成功，如果status属性值为200表明一切正常，服务器已成功接收了客户端的请求 说明 ② 服务器在收到客户端的请求后，根据请求返回相应的内容。返回的内容通常有两种形式，一种是文本形式，存储在responseText中，另一种是XML格式，存储在responseXML中。它们都是只读属性，只有当readyState属性值为4的时候，才能通过它们获取完整的