16 Ajax应用

第16章Ajax应用•从1995年底JavaScript正式出现到2005年的10年间，JavaScript在Web编程中的应用已经发展得非常成熟。在这期间，随着计算机技术的发展，互联网技术从Web1.0发展到了Web2.0。Web2.0编程逐渐形成热潮，Web2.0比Web1.0更注重用户的上网体验，它提供了与桌面应用程序相似的使用经验。•在Web2.0技术中，一种称为Ajax的技术出现并以令人吃惊的速度成为最热门的技术。本章将引领读者去探寻Ajax的奥秘，相信通过体验Ajax的优秀表现，读者一定能超越传统的Web编程。•本章主要内容包括Ajax的基本知识，XMLHttpRequest对象及其属性和方法，Ajax的实现模式与框架，通过简单实用的Ajax开发实例讲解帮助读者体会Ajax编程的过程，引导读者进行实际开发实战。•本资料由-大学生创业|创业|创业网提供资料•在线代理|网页代理|代理网页|减肥药排行榜|淘宝最好的减肥药|什么减肥药效果最好|减肥瘦身药|概述•Ajax的出现使动态网页逐渐摆脱了同步更新的弊端，采用了先进的异步交互模式，大大改善了用户的上网体验。Ajax是一系列技术的结合，这些技术是已经出现，并已经发展成熟的常见技术。学习Ajax的技术难度并不大，但是涉及的技术较多，学习需要较长的时间和较大的精力。学习之前，读者需要首先了解Ajax的基本知识，本节讲解Ajax的基础。16.1.1Ajax简介•对大多数的开发者来说Ajax是个新名词，有的开发者可能会想到荷兰的Ajax（阿贾克斯）足球队，我们这里讨论的Ajax其实不是一种编程语言，而是一个创建更好Web应用程序的技术过程。BloggerDon在《Web2.0概念诠释》一文中提到“Web2.0是以Flickr、Craigslist、Linkedin、Tribes、Ryze、Friendster、Del.icio.us、43Things.com等网站为代表，以Blog、TAG、SNS、RSS、wiki等社会软件的应用为核心，依据六度分隔、Xml、Ajax等新理论和技术实现的互联网新一代模式。”从这段话中可以看出，Ajax是新一代Web2.0的关键技术。因为Ajax不是指一种单一的技术，而是用来描述一组技术，它使浏览器可以为用户提供更接近于桌面应用程序的体验。在Ajax之前，Web站点强制用户进入“提交”－“等待”－“重新显示”的循环，用户必须等待服务器响应完成后，才可以再进行操作。总体而言，用户不得不花费大量的时间面对空白的浏览器，用户体验非常糟糕。16.1.2Ajax定义•Ajax是指“AsynchronousJavaScriptandXML”（异步JavaScript和XML）。2005年2月，AdaptivePath的咨询顾问JesseJamesGarrett在网上发表了《Ajax：一种Web应用程序开发的新方法》，在该文章中他首次提出了名词“Ajax”，是指一种运用于浏览器中的技术。在浏览器和服务器之间，它使用异步数据进行转换，并允许网页向服务器索取少量信息而非整个网页。这项技术标志着网络应用程序的微小化、迅捷化以及便捷化，是一种不需依靠服务器软件而独立运行的浏览器技术。16.1.3传统Web应用程序开发中的问题及对策•传统的Web应用程序结构采用同步交互过程，在这种情况下，由于用户每次提交输入信息的时候服务器都将传回一个新的页面，传统的网络应用程序通常运行缓慢且使用不便。这种结构形式中，用户请求之后，到浏览器显示请求返回的结果的时间间隔里服务器处理请求，用户在大多数时间处于等待服务器返回结果的等待状态，浏览器是显示空白的。在这种交互中是不连贯的用户Web体验，浪费用户大量时间。16.1.4Ajax的原则•AjaxWeb应用程序基于JavaScript和HTTP请求。通过Ajax，用户可以创建更好、更快以及更友好的Web应用程序。Ajax编程虽然使用了多种技术，它的最终目的都是为了改善用户Web体验。在编程过程中有一些通用的原则需要遵守，软件开发及可用性专家MichaelMahemoff指出了一个好的Ajax应用程序应遵循的关键原则，16.1.5Ajax的应用现状•1．Ajax适用场景•2．Ajax的应用实例16.2XMLHttpRequest对象及其使用•在JavaScript编程中，尽管可以使用img、iframe和script标签进行HTTP脚本编程，但是实际使用中并不方便，我们使用XMLHttpRequest对象，它的功能非常强大。XMLHttpRequest对象是Ajax的核心。XMLHttpRequest使用户可以使用JavaScript向服务器发送请求并处理响应，而不用中断用户的操作。•XMLHttpRequest对象是微软在InternetExplorer5.0中第一次引入的，是随XML的引入而出现的，它使用MSXMLActiveX库中实现XML的功能。为了在JavaScript中创建ActiveX对象，微软提供了一个新的ActiveXObject类，开发人员可以在Web页面使用XMLHTTPActiveX组件扩展自身的功能，不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。而从InternetExplorer7开始，IE提供了内置的XMLHttpRequest()构造函数创建XMLHttpRequest对象。16.2.1创建XMLHttpRequest对象•在使用XMLHttpRequest对象发送请求和处理响应之前，必须首先使用JavaScript创建一个XMLHttpRequest对象的实例。由于XMLHttpRequest对象一直没有被标准化，在不同浏览器中的创建过程也不同。InternetExplorer7之前的版本中XMLHttpRequest是一个ActiveX对象，应该使用ActiveXObject()构造器创建HttpRequest的实例。而其他大多数浏览器中，例如Opera、Firefox，把XMLHttpRequest实现为一个本地JavaScript对象。应该使用本地JavaScript对象技术来创建XMLHttpRequest的实例。16.2.2XMLHttpRequest对象的属性和方法•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.3Ajax技术应用实例•前面我们学习了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.2Ajax＋ASP实现树形菜单•树形菜单在各种学习网站中使用最多，各种使用JavaScript编写树形菜单的程序比比皆是。此处采用Ajax实现树形菜单，由于采用了异步交互方式，页面载入速度快。而且，对于使用JavaScript编写的树形菜单源代码，一般情况下，用户可以直接在浏览器中查看JavaScript源代码，这样安全性稍差。使用Ajax技术，不仅可以保证载入速度，而且菜单的代码一般是位于服务器端，返回到浏览器的只是生成的JavaScript代码，提高了安全性。16.3.3Ajax＋ASP实现留言本•留言本是网站中必不可少的部分，可以用于收集信息，反馈意见，以及网络教学中的学习答疑等场合。各种主流动态网页制作技术，包括ASP、PHP、JSP、ASP.NET，结合JavaScript和数据库都比较容易实现留言本。还可以采用Ajax实现留言本，由于采用了异步交互方式，页面载入速度快，尤其当服务器的访问量很大的时候更能发挥Ajax的优势。16.4小结•传统的Web应用中当提交表单时向Web服务器发送一个请求，服务器接收并处理传来的表单，然后才返回一个新的网页。，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多，而且浪费了许多带宽。与此不同，Ajax应用可以仅向服务器发送并取回必需的数据，它使用一些基于XML的Web服务接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。•本资料由-大学生创业|创业|创业网提供资料•在线代理|网页代理|代理网页|减肥药排行榜|淘宝最好的减肥药|什么减肥药效果最好|减肥瘦身药|