【Asp.net精品源码栏目提醒】:网学会员在Asp.net精品源码频道为大家收集整理了“【精品】【js】16 Ajax应用 - 其它资料“提供大家参考,希望对大家有所帮助!
第16章 Ajax应用 从1995年底JavaScript正式出现到2005年的10年间, JavaScript在Web编程中的应用已经发展得非常成熟。
在这 期间,随着计算机技术的发展,互联网技术从Web 1.0发展 到了Web 2.0。
Web 2.0编程逐渐形成热潮,Web 2.0比Web 1.0更注重用户的上网体验,它提供了与桌面应用程序相似 的使用经验。
在Web 2.0技术中,一种称为Ajax的技术出现并以令人吃惊 的速度成为最热门的技术。
本章将引领读者去探寻Ajax的 奥秘,相信通过体验Ajax的优秀表现,读者一定能超越传 统的Web编程。
本章主要内容包括Ajax的基本知识,XMLHttpRequest对象 及其属性和方法,Ajax的实现模式与框架,通过简单实用 的Ajax开发实例讲解帮助读者体会Ajax编程的过程,引导 读者进行实际开发实战。
16.1 Ajax概述 Ajax的出现使动态网页逐渐摆脱了同步更新的弊 端,采用了先进的异步交互模式,大大改善了用 户的上网体验。
Ajax是一系列技术的结合,这些 技术是已经出现,并已经发展成熟的常见技术。
学习Ajax的技术难度并不大,但是涉及的技术较 多,学习需要较长的时间和较大的精力。
学习之 前,读者需要首先了解Ajax的基本知识,本节讲 解Ajax的基础。
16.1.1 Ajax简介 对大多数的开发者来说Ajax是个新名词,有的开发者可能会想到 荷兰的Ajax(阿贾克斯)足球队,我们这里讨论的Ajax其实不是 一种编程语言,而是一个创建更好Web应用程序的技术过程。
Blogger Don在《Web 2.0概念诠释》一文中提到“Web 2.0是以 Flickr、Craigslist、Linkedin、Tribes、Ryze、Friendster、 Del.icio.us、43Things.com等网站为代表,以Blog、TAG、SNS、 RSS、wiki等社会软件的应用为核心,依据六度分隔、Xml、Ajax 等新理论和技术实现的互联网新一代模式。
”从这段话中可以看 出,Ajax是新一代Web 2.0的关键技术。
因为Ajax不是指一种单一 的技术,而是用来描述一组技术,它使浏览器可以为用户提供更 接近于桌面应用程序的体验。
在Ajax之前,Web站点强制用户进入 “提交”-“等待”-“重新显示”的循环,用户必须等待服务 器响应完成后,才可以再进行操作。
总体而言,用户不得不花费 大量的时间面对空白的浏览器,用户体验非常糟糕。
16.1.2 Ajax定义 Ajax是指“Asynchronous JavaScript and XML” (异步JavaScript和XML)。
2005年2月, Adaptive Path的咨询顾问Jesse James Garrett 在网上发表了《Ajax:一种Web应用程序开发的新 方法》,在该文章中他首次提出了名词 “Ajax”,是指一种运用于浏览器中的技术。
在 浏览器和服务器之间,它使用异步数据进行转 换,并允许网页向服务器索取少量信息而非整个 网页。
这项技术标志着网络应用程序的微小化、 迅捷化以及便捷化,是一种不需依靠服务器软件 而独立运行的浏览器技术。
16.1.3 传统Web应用程序开发中的问题及对策 传统的Web应用程序结构采用同步交互过程,在这 种情况下,由于用户每次提交输入信息的时候服 务器都将传回一个新的页面,传统的网络应用程 序通常运行缓慢且使用不便。
这种结构形式中, 用户请求之后,到浏览器显示请求返回的结果的 时间间隔里服务器处理请求,用户在大多数时间 处于等待服务器返回结果的等待状态,浏览器是 显示空白的。
在这种交互中是不连贯的用户Web体 验,浪费用户大量时间。
16.1.4 Ajax的原则 Ajax Web应用程序基于JavaScript和HTTP请求。
通过Ajax,用户可以创建更好、更快以及更友好 的Web应用程序。
Ajax编程虽然使用了多种技术, 它的最终目的都是为了改善用户Web体验。
在编程 过程中有一些通用的原则需要遵守,软件开发及 可用性专家Michael Mahemoff指出了一个好的 Ajax应用程序应遵循的关键原则,16.1.5 Ajax的应用现状 1.Ajax适用场景 2.Ajax的应用实例16.2 XMLHttpRequest对象及其使用 在JavaScript编程中,尽管可以使用、和 标签进行HTTP脚本编程,但是实际使用中并不方 便,我们使用XMLHttpRequest对象,它的功能非常强大。
XMLHttpRequest对象是Ajax的核心。
XMLHttpRequest使用 户可以使用JavaScript向服务器发送请求并处理响应,而 不用中断用户的操作。
XMLHttpRequest对象是微软在Internet Explorer 5.0中第 一次引入的,是随XML的引入而出现的,它使用MSXML ActiveX库中实现XML的功能。
为了在JavaScript中创建 ActiveX对象,微软提供了一个新的ActiveXObject类,开 发人员可以在Web页面使用XMLHTTP ActiveX组件扩展自身 的功能,不用从当前的Web页面导航就可以直接传输数据到 服务器或者从服务器接收数据。
而从Internet Explorer 7 开始,IE提供了内置的XMLHttpRequest构造函数创建 XMLHttpRequest对象。
16.2.1 创建XMLHttpRequest对象 在使用XMLHttpRequest对象发送请求和处理响应 之前,必须首先使用JavaScript创建一个 XMLHttpRequest对象的实例。
由于 XMLHttpRequest对象一直没有被标准化,在不同 浏览器中的创建过程也不同。
Internet Explorer7之前的版本中XMLHttpRequest是一个 ActiveX对象,应该使用ActiveXObject构造器 创建HttpRequest的实例。
而其他大多数浏览器 中,例如Opera、Firefox,把XMLHttpRequest实 现为一个本地JavaScript对象。
应该使用本地 JavaScript对象技术来创建XMLHttpRequest的实 例。
16.2.2 XMLHttpRequest对象的属性和方法 1.XMLHttpRequest的属性 2.XMLHttpRequest的方法16.2.3 发送HTTP请求 一旦创建了XMLHttpRequest对象,下一步就应该 发送请求到Web服务器。
这个发送请求的过程有可 以大体分为3个内容。
1.初始化XMLHttpRequest对象 2.指定响应处理程序 3.发送HTTP请求16.2.4 同步或异步处理服务器响应 当HTTP请求发送完毕,服务器返回响应数据,系 统首先检测XMLHttpRequest对象的readyState属 性值,判断HTTP请求的当前状态。
当该属性值为4 时,代表服务器传送数据完毕,可以开始处理返 回的信息并更新网页。
例如: if Http_request.readyState 4 //表示信息已经返回,可以开始处理 else //表示信息还没有返回,等待中 16.3 Ajax技术应用实例 前面我们学习了Ajax技术的基本知识,本节我们 通过实例讲解Ajax的应用,通过学习这几个实 例,尤其是树形菜单和留言本,使用传统的技术 比较容易实现,读者可以同传统的实现方式比 较,从而能够直观地感受Ajax提供的改进的上网 体验。
本章的实例只是Ajax强大功能的体现,读 者学习了本章之后,最好继续研读Ajax的相关书 籍资料,才能完全掌握Ajax。
16.3.1 获取服务器响应首部 用户有时需要从服务器获取信息,以便确定服务器的类 型,比如,IIS或Apache。
从而为网站的设计提供服务器参 考。
这时只需要读取服务器发送的响应首部,就能够获得 服务器的信息,而响应的具体内容则不考虑。
通过响应首 部可以获得的信息包括:Server(服务器类型)、Date (日期)、Last-Modified(最后修改日期)、Content- Type(首部类型)、Content-Length(首部长度)等。
此时,Ajax的open方法的请求方式使用HEAD请求即可, 服务器接收到HEAD请求并做出响应,它只会发送回响应首 部,而不返回响应的内容。
由于不需要返回内容,所以 HEAD请求的响应速度更快。
16.3.2 Ajax+ASP实现树形菜单 树形菜单在各种学习网站中使用最多,各
上一篇:
【精品】JQuery教程
下一篇:
投简历到国外的公司需考虑哪些东西?