[计算机硬件及网络]第12讲_AJAX.ppt

AJAX,解绍词 2011.3.29,学习内容,AJAX简介 AJAX带来的优势 AJAX相关技术简介 AJAX应用 AJAX开发的几个问题,4.1 AJAX简介,2005年2月8日，一个名字为Jesse James Garret的程序员发布了一篇在线文章：“Ajax:Web应用的新方法”。Garret引进了“Ajax”这个词，为像Google Maps等新一代的行为丰富的Web应用（Rich Web Application）背后相应的程序架构给出定义。,4.1 AJAX简介,Ajax（Asynchronous JavaScript And XML）不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起。 它能带给浏览者一种全新的体验，浏览者无需等待服务器响应，可以多次以异步方式向服务器发送请求，这种感觉类似于传统的桌面应用。,4.1 AJAX简介,异步是指用户发送请求后，完全无需等待，请求在后台发送，不会阻塞用户的当前活动。用户无需等待第一次请求得到完全响应，可以立即发送第二次请求。,4.2 AJAX带来的优势,在传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求，服务器进行相应的处理（获得数据、运行与不同的系统会话）后，返回一个HTML页面给客户端，如下图所示。,4.2 AJAX带来的优势,4.2 AJAX带来的优势,由于请求是同步的，客户机会一直等待服务器的响应。等待期间，客户端程序类似于冻结状态，用户不能进行下一步的任何操作。 这正是传统Web 应用程序让人感到笨拙或缓慢的原因：缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长。,4.2 AJAX带来的优势,4.2 AJAX带来的优势,因此，传统的Web应用主要不足在于： 独占式请求：前一个请求没有得到完全响应时，后一个请求不能发送。 频繁的页面刷新：采用“请求页面”的对应模式，每个请求都丢弃当前页面，重新加载新页面。用户端体验与服务器负载都存在问题。 页面简陋：由于频繁刷新，因此不适合制作表现更丰富的页面。,4.2 AJAX带来的优势,而在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行异步通信，然后将返回结果以异步方式提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置，如下图所示。,4.2 AJAX带来的优势,4.2 AJAX带来的优势,从上面两个图中可以看出，对于每个用户的行为，在传统的Web应用模式中，将生成一次HTTP请求，而在Ajax应用开发模式中，将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模式中，AJAX引擎通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低了网络流量，给用户带来了更好的体验。,4.2 AJAX带来的优势,4.2 AJAX带来的优势,与之前的传统Web应用相比，AJAX允许在同一页面中多次发送请求，而不中断用户的当前活动。页面只是单纯的视图，负责显示数据，请求与页面之间并无一一对应的关系。 在某种程度而言，AJAX就是传统的DHTML页面加上异步发送请求，还包括了动态装载服务器数据。,4.2 AJAX带来的优势,见工程ajaxprj。其中jspUpdate.jsp通过response定时刷新页面，每秒钟1次；ajaxUpdate.htm通过ajax得到当前时间；jqueryUpdate.htm通过jQuery库，以ajax方式定时与服务器请求，每秒钟1次，得到最新时间，实现局部数据刷新。,4.3 AJAX相关技术简介,Ajax使用到的关键技术： 使用XHTML(HTML)和CSS构建标准化的展示层 使用DOM进行动态显示和交互 使用XML和XSLT进行数据交换和处理 使用XMLHttpRequest发送请求和异步获取数据 使用JavaScript将以上技术融合一起,4.3 AJAX相关技术简介,4.3.1 JavaScript JavaScript是一种在Web页面中添加动态脚本代码的解释性程序语言，其核心已经嵌入到目前主流的Web浏览器中。虽然平时应用最多的是通过JavaScript实现一些网页特效及表单数据验证等功能，其实JavaScript可以实现的功能远不止这些。JavaScript是一种具有丰富的面向对象特性的程序设计语言，利用它能执行许多复杂的任务。,4.3 AJAX相关技术简介,4.3.2 XMLHttpRequest Ajax技术之中，最核心的技术就是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE 5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持，不过实现方式与IE有所不同。,4.3 AJAX相关技术简介,通过XMLHttpRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来做，这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。,4.3 AJAX相关技术简介,简而言之，使用XMLHttpRequest，允许通过JavaScript向服务器发送请求，并处理服务器响应，避免阻塞用户动作。通过使用XMLHttpRequest对象，浏览器通过客户端脚本与服务器交换数据，Web页面无需频繁重新加载，其内容也由客户端脚本动态刷新。 XMLHttpRequest是AJAX的核心，JavaScript是AJAX技术的粘合剂。,4.3 AJAX相关技术简介,在使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象，由于XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化的方法也是不同的。见工程ajaxprj中myjs1.js。,上面语法中的Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器的不同版本而进行设置的，目前比较常用的是这两种。,4.3 AJAX相关技术简介,（1）IE浏览器 IE浏览器把XMLHttpRequest实例化为一个ActiveX对象。具体方法如下：,var http_request = new ActiveXObject(“Msxml2.XMLHTTP“); 或者 var http_request = new ActiveXObject(“Microsoft.XMLHTTP“);,为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。创建一个跨浏览器的XMLHttpRequest对象其实很简单，只需要判断一下不同浏览器的实现方式，如果浏览器提供了XMLHttpRequest类，则直接创建一个实例，否则使用IE的ActiveX控件。具体代码如下：,4.3 AJAX相关技术简介,（2）Mozilla、Safari等其他浏览器 Mozilla、Safari等其他浏览器把它实例化为一个本地JavaScript对象。具体方法如下：,var http_request = new XMLHttpRequest();,说明：由于JavaScript具有动态类型特性，而且XMLHttpRequest对象在不同浏览器上的实例是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性的方法，不需要考虑创建该实例的方法是什么。,4.3 AJAX相关技术简介,if (window.XMLHttpRequest) / Mozilla、Safari. http_request = new XMLHttpRequest(); else if (window.ActiveXObject) / IE浏览器 try http_request = new ActiveXObject(“Msxml2.XMLHTTP“); catch (e) try http_request = new ActiveXObject(“Microsoft.XMLHTTP“); catch (e) ,在上面的语法中，method用于指定请求的类型，一般为get或post；URL用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串；asyncFlag为可选参数，用于指定请求方式，同步请求为true，异步请求为false，默认情况下为true；userName为可选参数，用于指定求用户名，没有时可省略；password为可选参数，用于指定请求密码，没有时可省略。,4.3 AJAX相关技术简介,下面对XMLHttpRequest对象的常用方法进行详细介绍。,open(“method“,“URL“,asyncFlag,“userName“, “password“);,（1）open()方法 open()方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息，具体语法如下：,在上面的语法中，content用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。如果没有参数需要传递可以设置为null。,4.3 AJAX相关技术简介,（2）send()方法 send()方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。具体语法格式如下：,send(content);,4.3 AJAX相关技术简介,（3）setRequestHeader()方法 setRequestHeader()方法为请求的HTTP头设置值。具体语法格式如下：,在上面的语法中，label用于指定HTTP头；value用于为指定的HTTP头设置值。,setRequestHeader(“label“, “value“);,注意：setRequestHeader()方法必须在调用open()方法之后才能调用。,4.3 AJAX相关技术简介,（4）abort()方法 abort()方法用于停止当前异步请求。,（5）getAllResponseHeaders()方法 getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息，当存在参数时，表示以字符串形式返回由该参数指定的HTTP头信息。,4.3 AJAX相关技术简介,XMLHttpRequest对象的常用属性如下表所示。,4.3 AJAX相关技术简介,4.3.3 XML XML是Extensible Markup Language（可扩展的标记语言）的缩写，它提供了用于描述结构化数据的格式。XMLHttpRequest对象与服务器交换的数据，通常采用XML格式，但也可以是基于文本的其他格式。,4.3 AJAX相关技术简介,4.3.4 DOM DOM是Document Object Model（文档对象模型）的缩写，是表示文档（如HTML文档）和访问、操作构成文档的各种元素（如HTML标记和文本串）的应用程序接口（API）。W3C定义了标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历树和添加、修改、查找树的节点的方法和属性。在Ajax应用中，通过JavaScript操作DOM，可以达到在不刷新页面的情况下实时修改用户界面的目的。见DOM.ppt。,4.4 AJAX应用,4.4.1 用户名检索 注册新用户是Web系统中常见的功能。注册时需要验证用户名是否已经存在。传统的应用中，只能填完所有用户注册信息后，点击“提交”按钮，发送到服务器端进行验证。 可以使用ajax完成检验用户是否已注册的功能，达到更好的用户体验。见工程WebMVCprj6。,4.4 AJAX应用,4.4.2 AJAX聊天室 见工程jspchat和ajaxchat。前者是传统JSP实现的聊天室，聊天信息更新需要刷新页面；后者通过ajax实现，实现了聊天信息即时局部性刷新，但页面不刷新。,4.4 AJAX应用,其中所有聊天信息都放在一个ChatService对象的List类型的属性中，该对象是ChatService类的静态成员，保证了所有客户端访问的均为同一个对象。 用户名与密码放在了userFperties文件中进行持久化。,4.4 AJAX应用,4.4.3 jQuery库 见jQuery简介.ppt。,4.5 AJAX开发的几个问题,Ajax使用了大量的JavaScript和Ajax引擎，而这些内容需要浏览器提供足够的支持。目前提供这些支持的浏览器有IE 5.0及以上版本、Mozilla 1.0、NetScape 7及以上版本。Mozilla虽然也支持Ajax，但是提供XMLHttpRequest对象的方式不一样。所以使用Ajax的程序必须测试针对各个浏览器的兼容性。,4.5.1 浏览器兼容性问题,4.5 AJAX开发的几个问题,Ajax技术的实现主要依赖于XMLHttpRequest对象，但是在调用其进行异步数据传输时，由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁，所以如果不对该对象进行封装处理，在下次需要调用它时就得重新构建，而且每次调用都需要写一大段的代码，使用起来很不方便。不过，现在很多开源的Ajax框架都提供了对XMLHttpRequest对象的封装方案，其详细内容这里不做介绍，