【零基础学JavaScript】第15章 Ajax介绍

15.3 Ajax技术的优缺点
Ajax技术的优点几乎都是由异步处理技术所带来 的,其优点主要表现在:(具体内容请参照书.)
15.4 Ajax技术的组成部分
前面说过,Ajax并不是什么新技术,而是包括 HTML,XHTML,CSS,DOM,XML,XSTL和 HMLHttpRequest等技术在内的一个技术集合.只 是在Ajax之前,这些技术大多都是独立运用,后 来随着网络的发展,这些技术之间的综合运用越 来越广,才逐步行成了Ajax. 当然,也不是要将以上几种技术完全使用才叫 Ajax技术.在Ajax包含的几个技术中,使用得最 多的JavaScript,XMLHttpRequest,CSS,DOM和 XML.
第15章 Ajax介绍
Ajax(Asynchronous JavaScript And XML)是异 步JavaScript和XML技术的缩写.从Ajax的名字就 可以看出Ajax是多种技术的集合,至少包括 JavaScript和XML两项技术.事实上,Ajax也并不 是什么新技术,只是包括了HTML,XHTML,CSS, DOM,XML,XSTL和HMLHttpRequest等技术在内的 一个技术集合.
15.6.6 发送HTTP请求
在经过以上几个步骤的设置之后,就可以将HTTP 请求发送到Web服务器上去了.发送HTTP请求可以 使用XMLHttpRequest对象的send()方法,请语法 代码如下所示: XMLHttpRequest.send(data)
15.6.7 局部更新
15.6.7.1 表单对象的数据更新 15.6.7.2 IE浏览器中标签间ቤተ መጻሕፍቲ ባይዱ本的更新 15.6.7.3 DOM技术的局部刷新
15.4.4 DOM
DOM(Document Object Model)是文档对象模型 的简称.在DOM中将HTML文档看成是树型结构, DOM是可以操作HTML和XML的一组应用程序接口 (API).通过DOM可以获得树型结构中的某一个 元素,并通过DOM提供的方法和属性操作该元素. 在Ajax中,DOM的主要作用是刷新局部数据.DOM 不是本书介绍的重点,有兴趣的读者可以自己查 阅相关内容.
(具体内容请参照书.)
15.5.3 XMLHttpRequest的事件
XMLHttpRequest对象可以响应readystatechange 事件, 该事件在XMLHttpRequest对象的 readyState属性值产生变化时所要激发.
15.6 实现Ajax的步骤
Ajax的主要作用是异步调用和局部刷新.要实现 异步调用就需要使用XMLHttpRequest对象,要实 现局部刷新就需要使用到JavaScript和DOM.下面 介绍使用XMLHttpRequest和JavaScript来实现 Ajax的方法.
15.5.1 XMLHttpRequest的方法
XMLHttpRequest的方法都是与发送HTTP请求相关, 其中最常用的方法有设置请求URL的open()方法, 发送请求的send()方法和停止请求的abort()方法. (具体内容请参照书.)
15.5.2 XMLHttpRequest的属性
在上一节中,设置了响应HTTP请求状态变化的函 数,当XMLHttpRequest对象的readyState属性值 改变时,会自动激发该函数.如果 XMLHttpRequest对象的readyState属性值等于4, 则表示异步调用过程完毕,就可以通过 XMLHttpRequest对象的responseText属性或 responseXml属性来获取数据.(具体内容请参照 书.)
15.4.1 JavaScript
JavaScript就不用再介绍了,这种客户端的脚本 语言是本书的重点,也是Ajax技术的主要开发语 言.使用JavaScript可以组织要传递给Web服务器 的数据,并将这些数据传递给Ajax引擎.在Ajax 引擎获得Web服务器返回的数据之后,也可以通过 JavaScript来选择要在浏览器窗口中哪个位置显 示哪些数据. 在Ajax中,运用得更多的是使用JavaScript来检 验表单数据的有效性,或通过JavaScript来操作 XMLHttpRequest以达到与Web服务器或数据库交互 的目的.
15.1 传统的Web技术
传统的Web技术采取的是同步交互的技术,例如一 个用户要浏览一个网页,那么就需要经过以下几 个步骤:(具体内容请参照书.)
15.2 Ajax技术原理
与传统的Web技术不同,Ajax采用的是异步交互处 理的技术.Ajax技术的出现,打破了传统Web技术 的局限性.当用户提交数据或在网页中更改少量 数据时,可以不用加载整个网页.Ajax的异步处 理,可以将提交的数据在后台进行处理,并让更 改数据时不刷新网页.
15.6.1 实现Ajax的步骤
要完整实现一个Ajax异步调用和局部刷新,通常 需要使用以下几个步骤:(1)创建 XMLHttpRequest对象,也就是创建一个异步调用 对象.(2)创建一个新的HTTP请求,并指定该 HTTP请求的方法,URL以及验证信息.(3)设置 响应HTTP请求状态变化的函数.(4)发送HTTP请 求.(5)获取异步调用返回的数据.(6)使用 JavaScript和DOM实现局部刷新.
15.5 XMLHttpRequest对象
Ajax的核心是异步处理和局部刷新,而异步处理 的核心是XMLHttpRequest对象.无论是在IE浏览 器中使用的HMLHTTP组件中的XMLHttpRequest对象 还是在Netscape浏览器中则使用XMLHttpRequest 组件,其方法和属性都十分类似.这些方法与属 性如下所示.
15.4.5 XML
XML与HTML都是SGML(Standard Generalized Markup Language,通用标识语言标准)延伸出来 的标记性语言.HTML是为了设计网页而出现的语 言,主要着重于数据的显示.XML是以数据的建立 和管理为目标,可以当作一种通用数据库,也能 使不同的应用程序来读取XML里的数据.网页的发 展方向将会是用XML来建立数据,再由HTML结合 CSS来显示. 在Ajax中,XML主要是存储数据和文档,并让其他 程序共享.XML不是本书介绍的重点,有兴趣的读 者可以自己查阅相关内容.
15.4.2 XMLHttpRequest
XMLHttpRequest是XMLHTTP组件的一个对象,也是 Ajax异步处理的核心所在.XMLHttpRequest允许 以异步方式从服务器中获取数据,而不需要每次 都刷新网页,也不需要将所有的数据都交付给服 务器处理.因此,可以大大地加快响应速度,减 少了用户等待的时间,也可以减轻服务器的负担.
15.4.3 CSS
CSS(Cascading Style Sheet)是层叠样式表的 简称.CSS的主要作用是分担HTML的功能,让HTML 只承担数据以及结构方面的功能,而CSS则负责显 示文档的功能(即元素的样式).例如显示文字 大小及颜色,网页的背景及颜色,元素与元素之 间的距离等. 在Ajax中,可以在异步获得服务器数据之后,根 据实际需要来更改网页中某些元素样式.CSS不是 本书介绍的重点,有兴趣的读者可以自己查阅相 关内容.
15.6.8 一个完整的Ajax实例
经过前面章节的介绍,相信读者对实现一个Ajax 的步骤已经有所了解.以下为一个完整的Ajax异 步调用的实例,(具体内容请参照书.)
15.7 小结
Ajax不是一种语言,而是集成了很多方法与技术 的集合.Ajax有很多优点,如可以异步调用数据, 减少网络延迟等等.Ajax最大的两个优点是异步 调用和局部刷新.实现Ajax的步骤通常为:创建 XMLHttpRequest对象 创建HTTP请求 设置响应 HTTP请求状态的函数 获取服务器返回的数据 刷新网页局部内容.在下一章里将会介绍一些与 Ajax相关的技术.
15.6.3 创建HTTP请求
创建了XMLHttpRequest对象之后,必须为 XMLHttpRequest对象创建HTTP请求,用于说明 XMLHttpRequest对象要从哪里获取数据.通常要 获取的数据可以是网站中的数据,也可以是本地 中其他文件中的数据.
15.6.4 设置响应HTTP请求状态变化的函 数
15.6.2 创建XMLHttpRequest对象
不同的浏览器使用的异步调用对象有所不同,在 IE浏览器中异步调用使用的是XMLHTTP组件中的 XMLHttpRequest对象,而在Netscape,Firefox浏 览器中则直接使用XMLHttpRequest组件.因此, 在不同浏览器中创建XMLHttpRequest对象的方法 都有所不同.
创建完HTTP请求之后,应该就可以将HTTP请求发 送给Web服务器了.然而,发送HTTP请求的目的是 为了可以接收从服务器中返回的数据.从创建 XMLHttpRequest对象开始,到发送数据,接收数 据,XMLHttpRequest对象一共会经历以下5种状态. (具体内容请参照书.)
15.6.5 设置获取服务器返回数据的语句
�