Ajax应用共37页PPT资料

Web2.0更丰富的“用户体验”，新的交互方式自动补全内容聚合每个小“窗口”可以关闭、最小化和进行个性化设置所有操作都是在不刷新窗口的情况下完成的为什么使用Ajax无刷新：不刷新整个页面，只刷新局部无刷新的好处只更新部分页面，有效利用带宽只是登录，没必要刷新“庞大”的页面。为什么使用Ajax无刷新的好处提供连续的用户体验观看视频时执行操作，不希望页面刷新视频从头播放吧！只刷新了局部页面，视频继续播放为什么使用Ajax无刷新的好处提供类似C/S的交互效果，操作更方面使用Ajax可以实现这样的效果什么是AjaxAjax：只刷新局部页面的技术AJAX：AsynchronousjavascriptAndXML异步：发送请求后不等返回结果，由回调函数处理结果JavaScript：向服务器发起请求，获得返回结果，更新页面XML：封装数据(来自于服务器返回的数据)用途使用JavaScript从服务器获取数据而不必刷新整个页面Asynchronous异步的JavaScriptAndXML1.1Ajax技术简介从本质上讲，Ajax并不是一种全新的技术，Ajax只是综合利用已经存在的各种技术，从而诞生了一种全新的应用，介绍这种技术的诞生过程和其他相关的基本知识。1.1.1Web开发技术演变过程Web应用程序发展至今大体经历了三个阶段，第一个阶段使用的是简单的静态页面，第二个阶段使用的ASP、JSP、PHP等动态脚本语言，第三个阶段是Web2.0阶段，而Ajax就是Web2.0中的核心技术1.1.2什么是Ajax对于Ajax并没有确切的定义，而且随着Ajax被广泛应用，现在Ajax所包含的范围也更加广泛，所有的实现浏览器与服务器异步交互的技术都可以归入Ajax的范围，即无需刷新当前页面就可以实现与服务器的交互的技术，这种技术就是Ajax，而且Ajax也不像Java、JSP等是一种单独的技术，Ajax是一系列技术的集合，例如在在实现与服务器的异步通信的时候，需要用到XML、JavaScript、XMLHttpRequest等，使用这几种技术可以实现与服务器的异步通信，所以，Ajax就是这几种语言的综合体。1.1.3Ajax的相关技术在上面的内容中，介绍了Ajax是一系列技术的集合体，通过这些技术的综合运用从而实现Ajax的目标，实现客户端与服务器端的异步通信1.2Ajax工作原理简单示例将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比，展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名，然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式处理这个请求响应的具体过程。1.2.1传统的请求响应方式在传统的请求响应方式中，是通过表单向服务器提交用户信息，服务器端处理接收到的信息，并把处理结果返回给用户，在这个过程中需要刷新整个页面才能得到服务器返回的结果。1.2.2使用Ajax的请求响应方式在上面的示例程序中，展示了传统的请求响应处理方式，此处将展示Ajax中处理请求响应的方式。在Ajax处理请求响应的方式中，不会整个页面进行刷新，对于用户的输入信息，并不依靠表单来提交，而是通过XMLHttpRequest对象传递给服务器1.3XMLHttpRequest对象XMLHttpRequest对象在Ajax中占据着十分重要的地位，Ajax中的客户端就是通过XMLHttpRequest对象实现与服务器的通信。1.3.1XMLHttpRequest对象简介XMLHttpRequest对象也不是一个新的技术，这个对象最早出现在微软的IE浏览器中，是以ActiveX组件的形式出现的，在当时并没有引起开发人员太大的注意，但是在Google推出GoogleMap和GoogleSuggest产品以后，Ajax技术以飞快的速度发展起来，而XMLHttpRequest对象又是Ajax的重要组成部分，所以XMLHttpRequest对象也开始重新受到重视。1.3.2创建XMLHttpRequest对象在使用XMLHttpRequest对象发送请求、接收响应之前，需要创建这个对象，其中，在IE浏览器中，XMLHttpRequest对象是以ActiveX组件的形式提供的，其他浏览器中使用JavaScript本地方法来创建，所以在创建XMLHttpRequest对象的时候，需要对这个差别做对应的判断和处理，下面的代码就是创建XMLHttpRequest对象的通用代码。1.3.3XMLHttpRequest常用方法和属性在XMLHttpRequest对象创建以后，就可以在对这个对象进行各种不同的操作，从而完成和服务器的通信，接下来将介绍XMLHttpRequest对象常用的方法和属性。open（stringmethod,stringurl,booleanasynch,stringname,stringpassword）和send（content）是XMLHttpRequest对象中最常用的方法。1.4客户端向服务器发送请求在Ajax中，向服务器端发送请求使用的是XMLHttpRequest对象，在XMLHttpRequest对象成功创建以后，就可以通过这个对象与服务器进行通信，在本节接下来的内容中，将介绍客户端使用XMLHttpRequest对象向服务器发送请求的基本方法。1.4.1使用XMLHttpRequest对象发送请求在向服务器发送请求之前，首先使用XMLHttpRequest对象的open（stringmethod,stringurl,booleanasynch,stringname,stringpassword）方法建立对服务器的调用，然后才能向服务器发送请求信息。而且在这里还需要指明在请求状态发生改变的时候需要调用的时间处理方法。1.4.2常用发送请求内容的方法在传统的Web应用中，是通过表单向服务器提交用户的输入信息，但是这种提交方式会刷新整个页面，在Ajax中要实现的就是与服务器端的异步通信，所以就不能使用表单向服务器发送请求信息，在Ajax中，可以使用下面几种方法来向服务器发送请求的内容。1.5服务器端处理用户请求在Ajax中，服务器接收到用户的请求以后，可以根据请求的内容进行相应的操作，然后把操作以合适的格式返回给客户端，在此，将重点介绍在服务器端对客户请求的处理。在服务器端处理方式可以有很多种选择，可以选择JSP、ASP、CGI、Servlet中的任意一种作为相应客户端请求的服务程序，在此，将选择Servlet实现服务器端逻辑处理的功能。1.5.1在服务器端处理用户请求由于客户端向服务器发送信息的时候，可以选择多种方式进行发送，所以在服务器端就需要根据客户端发送信息的方式，对接收到的信息进行分析，从而取出进一步操作所需要的信息。1.5.2返回XML格式的响应文档在服务器端完成用户需要的逻辑处理以后，需要把处理的结果返回给用户，在这种情况下，一般是把处理的结果组织成XML的格式，然后把这个XML文档返回给客户端。1.6客户端处理服务器响应在服务器端结束对用户请求的处理以后，会把处理的结果返回给用户，在客户端的需要对返回的内容进行处理，然后根据这些处理结果对页面的内容进行调整，到这一步为止，客户端与服务器端的异步通信就完成了。在接下来的内容中，将介绍客户端处理返回的响应内容的基本方法。1.6.1分析XML格式的文档在一般情况下，服务器会用XML文档的格式返回逻辑处理的结果，在客户端可以通过XMLHttpRequest对象取得这个响应文档的内容。在JavaScript中，可以以DOM的方式分析这个XML格式的文档，这种分析方法和一般的XML文档的分析方法是完全相同的1.6.2使用JavaScript调整页面内容在对XML文档解析结束以后，就可以根据解析的结果来调整页面的内容，从而把服务器的处理结果表现在页面上，通常情况下会使用JavaScript来完成这个任务，通过使用innerText或者innerHTML可以设置HTML页面元素内的显示内容，通过DOM操作，可以动态创建HTML元素，通过CSS可以控制页面HTML元素的显示风格，通过这些操作，可以把服务器返回的处理结果充分展现在页面上，从而最终完成客户端和服务器的异步通信、而且这种处理方式是不会对整个页面进行刷新的。1.6.3客户端处理服务器相应的示例代码示例代码片段1.7Ajax典型示例在上面的内容中，对Ajax的基本知识进行了简单的介绍，在接下来的内容中，将通过具体的示例程序展示Ajax的魅力，而且通过这些具体的示例，可以体会到Ajax的具体使用方法，从而可以在自己的Web应用中添加Ajax的处理方式。1.7.1异步身份验证在传统的Web应用中，用户的身份验证是通过向服务器提供表单，服务器对表单中用户信息进行验证，然后再返回验证的结果，在这样的处理方式中，用户端必需等到服务器返回处理结果才能尽进行别的操作，而且在这个过程中，会刷新整个页面。这种处理方式不仅浪费了用户的时间，每次刷新页面也浪费了巨大的带宽1.7.2输入提示和自动完成在使用Google搜索或者是Baidu搜索的时候，在输入搜索关键字的同时，会自动弹出匹配的其他关键字的提示，这种输入提示和自动完成的功能是在Google中首先推出的，然后就在各种Web应用中被广泛采用，在下面的示例程序中，就展示了这样一个功能的实现。就是输入提示和自动完成功能JSP页面的具体代码。1.7.3联动动态列表在We应用的开发中，经常会遇到联动动态列表的需求，有其是在查询条件的选择中，所有的下拉列表中的选项都是从数据库中动态取出的，当选择第一个下拉列表的时候，后面的下拉列表要以这个选择为条件从数据库中取出满足条件的内容，从而调整显示选项的内容。然而在传统的Web开发模式中，要实现这样的功能是相当的麻烦，每次调整下拉列表的时候，都需要重新刷新整个页面，而且在刷新页面的时候，需要做大量的工作来保存已经选择列表的状态1.7.4异步输入验证在Ajax中，对用户的输入验证可以使用异步的形式，在用户每项输入完成之后，都对用户输入的合法行进行验证，即时向用户返回验证结果，使用户及时发现输入的错误，及时更改输入，而且这种验证不会刷新整个页面，用户的输入信息都会别保留，从而可以节省用户的时间，方便用户的使用1.7.5工具条提示在桌面应用程序中，可以给程序添加工具条提示的功能，当鼠标移到指定位置的时候，会弹出一个提示框，提示这个区域的简单信息1.7.6自动刷新使用Ajax也可以实现自动刷新的功能，而且是页面局部的刷新，这种刷新方式不会对页面的其他部分造成影响1.7.7使用DOM动态生成HTML文档在很多时候，在浏览器段，需要根据服务器的返回结果，动态生成HTML文档，这种功能一般情况下都是采用DOM操作的方法来完成，在接下来的示例程序中，将展示使用DOM动态生成HTML文档的基本方法。1.8小结在示例程序中，都是通过手工代码完成Ajax处理的各个过程，目的是为了让大家清楚了解Ajax的操作原理和流程，在实际的开发过程中，可以选择使用开源的Ajax框架来进行Ajax程序的开发，目前有很多成熟的Ajax框架可供选择，例如DWR、dojo、Rico等，这些框架都是比较成熟的Ajax框架