第九章 Ajax.pptVIP

第十章 Ajax技术 本节内容: Ajax简介 掌握Ajax应用程序的开发步骤 掌握XMLHttpRequest对象和常用方法 了解XMLHttpRequest响应的状态值含义 了解在Ajax回调函数中，使用DOM改变页面内容 Ajax简介 Ajax概念 Ajax 是Web 开发一个流行的词汇，全称 Asynchronous JavaScript and XML，异步的JavaScript和XML 。是几种技术的强强联合。 Ajax如何工作 Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。 为什么要学习Ajax 使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。 传统Web应用模式的流程 AJAX应用模式的流程 Ajax应用到的技术 基于 DHTML 和 CSS 的标准 Web 页面内容 由 DOM(Document Object Model)实现动态显示与交互 通过 XML 和 XSLT 进行数据交换以及处理 运用 XMLHttpRequest 对象实现异步数据获取 运用 JavaScript 整合上述技术 Ajax 交互流程 1、用户在 Web 页面的交互动作触发 DOM 事件 2、DOM事件处理程序收到事件发生的消息 3、事件处理程序创建 XMLHttpRequest 对象，设置目标URL、HTTP方法(Get、Post)等内容，注册服务器响应的回调函数 4、向服务器发生异步的HTTP请求 5、异步请求发出后，浏览器不必等待服务器响应，用户可以继续与页面交互 6、服务器收到请求后，调用相应的 Servlet 处理请求 7、将结果数据序列化成 XML 作为响应内容，返回给浏览器 8、调用在XMLHttpRequest对象上注册的回调函数 9、回调函数解析响应内容 XML文档 ，依据其中的数据使用JavaScript 操纵DOM对象更新页面内容 Ajax开发步骤 AJAX应用的五个步骤 1.建立XMLHttpRequest对象 2.设置回调函数 3.使用open方法与服务器建立链接 4.向服务器端发送数据 5.在回调函数针对不同响应状态进行处理 示例:用 Ajax 完成一个简单的 HelloWorld 程序 XMLHttpRequest对象简介 XMLHttpRequest对象是整个Ajax开发的基础 提供客户端和服务器异步通信的能力 能够向服务器发出请求 能够接收服务器的返回页面 最早出现在IE，随着应用的广泛，渐渐推广到其他浏览器中 XMLHttpRequest对象 创建XMLHttpRequest对象 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象, 创建 XMLHttpRequest 对象的语法： variable = new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： variable=new ActiveXObject(Microsoft.XMLHTTP); 创建XMLHttpRequest对象 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ： var xmlhttp; if (window.XMLHttpRequest) // code for IE7+, Firefox xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject(Microsoft.XMLHTTP); } XMLHttpRequest对象属性 XMLHttpRequest 对象的属性 (1)就绪状态readystate：描述HTTP请求的状态 0 表未初始化，即XMLHttpRequest 对象未创建open()方法未调用 1 表XMLHttpRequest对象被创建，但请求未发出send()未调用 2 表HTTP请求已经发出正在处理中，这时