2014年【零基础学JavaScript】第15章 Ajax介绍.pptVIP

第15章 Ajax介绍 Ajax（Asynchronous JavaScript And XML）是异步JavaScript和XML技术的缩写。从Ajax的名字就可以看出Ajax是多种技术的集合，至少包括JavaScript和XML两项技术。事实上，Ajax也并不是什么新技术，只是包括了HTML、XHTML、CSS、DOM、XML、XSTL和HMLHttpRequest等技术在内的一个技术集合。 15.1 传统的Web技术 传统的Web技术采取的是同步交互的技术，例如一个用户要浏览一个网页，那么就需要经过以下几个步骤：（具体内容请参照书。） 15.2 Ajax技术原理 与传统的Web技术不同，Ajax采用的是异步交互处理的技术。Ajax技术的出现，打破了传统Web技术的局限性。当用户提交数据或在网页中更改少量数据时，可以不用加载整个网页。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.4.1 JavaScript JavaScript就不用再介绍了，这种客户端的脚本语言是本书的重点，也是Ajax技术的主要开发语言。使用JavaScript可以组织要传递给Web服务器的数据，并将这些数据传递给Ajax引擎。在Ajax引擎获得Web服务器返回的数据之后，也可以通过JavaScript来选择要在浏览器窗口中哪个位置显示哪些数据。 在Ajax中，运用得更多的是使用JavaScript来检验表单数据的有效性，或通过JavaScript来操作XMLHttpRequest以达到与Web服务器或数据库交互的目的。 15.4.2 XMLHttpRequest XMLHttpRequest是XMLHTTP组件的一个对象，也是Ajax异步处理的核心所在。XMLHttpRequest允许以异步方式从服务器中获取数据，而不需要每次都刷新网页，也不需要将所有的数据都交付给服务器处理。因此，可以大大地加快响应速度、减少了用户等待的时间，也可以减轻服务器的负担。 15.4.3 CSS CSS（Cascading Style Sheet）是层叠样式表的简称。CSS的主要作用是分担HTML的功能，让HTML只承担数据以及结构方面的功能，而CSS则负责显示文档的功能（即元素的样式）。例如显示文字大小及颜色、网页的背景及颜色、元素与元素之间的距离等。 在Ajax中，可以在异步获得服务器数据之后，根据实际需要来更改网页中某些元素样式。CSS不是本书介绍的重点，有兴趣的读者可以自己查阅相关内容。 15.4.4 DOM DOM（Document Object Model）是文档对象模型的简称。在DOM中将HTML文档看成是树型结构，DOM是可以操作HTML和XML的一组应用程序接口（API）。通过DOM可以获得树型结构中的某一个元素，并通过DOM提供的方法和属性操作该元素。 在Ajax中，DOM的主要作用是刷新局部数据。DOM不是本书介绍的重点，有兴趣的读者可以自己查阅相关内容。 15.4.5 XML XML与HTML都是SGML（Standard Generalized Markup Language，通用标识语言标准）延伸出来的标记性语言。HTML是为了设计网页而出现的语言，主要着重于数据的显示。XML是以数据的建立和管理为目标，可以当作一种通用数据库，也能使不同的应用程序来读取XML里的数据。网页的发展方向将会是用XML来建立数据，再由HTML结合CSS来显示。 在Ajax中，XML主要是存储数据和文档，并让其他程序共享。XML不是本书介绍的重点，有兴趣的读者可以自己查阅相关内容。 15.5 XMLHttpRequest对象 Ajax的核心是异步处理和局部刷新，而异步处理的核心是XMLHttpRequest对象。无论是在IE浏览器中使用的HMLHTTP组件中的XMLHttpRequest对象还是在Netscape浏览器中则使用XMLHttpRequest组件，其方法和属性都十分类似。这些方法与属性如下所示。 15