Ajax应用幻灯片.ppt

Ajax应用 介绍Ajax技术，使用这种技术，可以构建出类似传统桌面应用程序的交互界面， 作用：可以丰富客户与服务器的交互方式。 了解Ajax的基本知识，并且对Ajax处理客户请求的各个环节都进行了详细的分析，在具体的示例中展示了Ajax在各种情景下的具体应用，通过这些示例程序可以体会到Ajax的基本用法。 Web 2.0 更丰富的“用户体验”，新的交互方式 为什么使用Ajax 无刷新：不刷新整个页面，只刷新局部 无刷新的好处 只更新部分页面，有效利用带宽 为什么使用Ajax 无刷新的好处 提供连续的用户体验 为什么使用Ajax 无刷新的好处 提供类似C/S的交互效果，操作更方面 什么是Ajax Ajax：只刷新局部页面的技术 AJAX ： Asynchronous javascript And XML 异步：发送请求后不等返回结果，由回调函数处理结果 JavaScript：向服务器发起请求，获得返回结果，更新页面 XML：封装数据(来自于服务器返回的数据) 用途 使用JavaScript从服务器获取数据而不必刷新整个页面 1.1 Ajax技术简介 从本质上讲，Ajax并不是一种全新的技术，Ajax只是综合利用已经存在的各种技术，从而诞生了一种全新的应用，介绍这种技术的诞生过程和其他相关的基本知识。 1.1.1 Web开发技术演变过程 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.3 Ajax的相关技术 在上面的内容中，介绍了Ajax是一系列技术的集合体，通过这些技术的综合运用从而实现Ajax的目标，实现客户端与服务器端的异步通信 1.2 Ajax工作原理简单示例 将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比，展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名，然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式处理这个请求响应的具体过程。 1.2.1 传统的请求响应方式 在传统的请求响应方式中，是通过表单向服务器提交用户信息，服务器端处理接收到的信息，并把处理结果返回给用户，在这个过程中需要刷新整个页面才能得到服务器返回的结果。 1.2.2 使用Ajax的请求响应方式 在上面的示例程序中，展示了传统的请求响应处理方式，此处将展示Ajax中处理请求响应的方式。在Ajax处理请求响应的方式中，不会整个页面进行刷新，对于用户的输入信息，并不依靠表单来提交，而是通过XMLHttpRequest对象传递给服务器 1.3 XMLHttpRequest对象 XMLHttpRequest对象在Ajax中占据着十分重要的地位，Ajax中的客户端就是通过XMLHttpRequest对象实现与服务器的通信。 1.3.1 XMLHttpRequest对象简介 XMLHttpRequest对象也不是一个新的技术，这个对象最早出现在微软的IE浏览器中，是以ActiveX组件的形式出现的，在当时并没有引起开发人员太大的注意，但是在Google推出Google Map和Google Suggest产品以后，Ajax技术以飞快的速度发展起来，而XMLHttpRequest对象又是Ajax的重要组成部分，所以XMLHttpRequest对象也开始重新受到重视。 1.3.2 创建XMLHttpRequest对象 在使用XMLHttpRequest对象发送请求、接收响应之前，需要创建这个对象，其中，在IE浏览器中，XMLHttpRequest对象是以ActiveX组件的形式提供的，其他浏览器中使用JavaScript本地方法来创建，所以在创建XMLHttpRequest对象的时候，需要对这个差别做对应的判断和处理，下面的代码就是创建XMLHttpRequest对象的通用代码。 1.3.3 XMLHttpR