JavaScript网页特效案例教程 王莹 第八章课件 第八章新.pptVIP

JavaScript网页特效案例教程 主编：王莹 副主编：印梅 齐燕 8.2 XMLHttpRequest对象 * * 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 第八章AJAX技术 4课时 课时建议 案例教学 自主学习 探究训练 教学方法 Ajax技术的组成 实现Ajax的基本步骤 AJAX程序库 本章重点 AJAX实现及时更新信息 技能目标 了解什么Ajax Ajax技术的组成 实现Ajax的基本步骤 AJAX程序库 知识目标 8.1 AJAX介绍 JavaScript的缺陷之一是无法与Web服务器进行通信，如果像 把数据传送给服务器，需要提交一个页面，如果获取数据也需要 加载和显示一个新页面。 AJAX（异步JavaScript和XML）是解决上述问题的。 Ajax并不是一门新的语言或技术，它是JavaScript、XML、 CSS、DOM等多种已有技术的组合，它可以实现客户端 的异步请求操作。这样可以实现在不需要刷新页面的情况下与服务器 进行通信，从而减少了用户的等待时间。 1 AJAX运行机制 （1）脚本创建一个XMLHttpRequest对象，然后将其发送给服务器， 接下来可以继续发送请求。 （2）服务器通过发送包含内容的文件表示响应 （3）当接到响应后，响应的JavaScript函数就被触发，处理相关数据。 （4）脚本通常用DOM来显示服务器的数据，从而无需再次刷新页面。 2 服务器端程序 应用程序驻留在Web服务器上的那部分被称为后台。最简单的 后台是静态文件，最常见的是JSP程序，PHP、Perl等。 JavaScript可以使用GET（或者POST）方式向服务器应用端发送数 据，事实上与HTML表单工作方式类似。 3 XML介绍 AJAX中的X代表XML（扩展标记语言）,XML是Extensible Markup Language （可扩展的标记语言）的缩写，它提供了用于描述结构化数据的格式。AJAX 与服务器交换的数据，通常采用XML格式，但也可以是基于文本的其他格式。 4 AJAX典型应用 AJAX的典型应用有Google的Gmail邮件服务，该服务使用AJAX技 术快速响应用户的邮件服务应用程序。无需加载新页面就可以删除 消息或执行其它任务。远程脚本已经广泛应用于整个Web中，用户 可能没有明显的觉察，但是和过去相比，等待加载页面的时间大大 减少。 Ajax技术之中，最核心的技术就是XMLHttpRequest，它是一个具 有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP） 连接一个服务器。 创建请求 （1）IE浏览器 IE浏览器把XMLHttpRequest实例化为一个ActiveX对象。具体方法如下： var http_request = new ActiveXObject(Msxml2.XMLHTTP); 或者 var http_request = new ActiveXObject(Microsoft.XMLHTTP); （2）其他浏览器 Mozilla、Safari等其他浏览器把它实例化为一个本地JavaScript对象。 具体方法如下： var http_request = new XMLHttpRequest(); 为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。 } } } catch (e) {} ajaxreq = new ActiveXObject(Microsoft.XMLHTTP); try { } catch (e) { ajaxreq = new ActiveXObject(Msxml2.XMLHTTP); try { else if (window.ActiveXObject) { //IE浏览器 } ajaxreq = new XMLHttpRequest(); if (window.XMLHttpRequest) { //其它浏览器