第8讲Ajax技术介绍.pptVIP

第7讲 Ajax简介 ? ? Ajax（异步JavaScript与XML）：Asynchronous JavaScript and XML Ajax是一种开发交互式网页的应用技术，它是对传统的表单交互技术的改进，允许客户端-服务端的数据交换与用户的其他操作异步进行，使原来缓慢的Web应用更加接近于相对快速的桌面应用。 AJAX技术能够使得每一次请求更加迅捷，对于每一次请求返回的不是整个页面，而仅仅是所需要返回的数据。 表单交互技术 表单方式的交互过程： 填写表单→提交表单→处理表单→返回网页 例1 书目查询。 采用Form的GET请求方式，用两个页面完成： -FormGetRequest.htm ：请求页面。输入查询条件，提交表单。 -FormGetResponse.asp：应答页面。显示查询结果。 例2 书目查询 采用Form的POST请求方式，用两个页面完成： -FormPostRequest.htm ：请求页面。输入查询条件，提交表单。 -FormPostResponse.asp：应答页面。显示查询结果。 例3 书目查询。 采用Form的GET请求方式，用一个页面完成： -FormGet.asp：请求与应答共用页面。输入查询条件，提交表单，显示查询结果。 例4 书目查询 采用Form的POST请求方式，用一个页面完成： -FormPost.asp：请求与应答共用页面。输入查询条件，提交表单，显示查询结果。 从上述例子可以看出，表单交互方式的应答结果是一个新的网页，这种做法浪费了许多带宽，因为在很多时候，前后两个页面的大部分内容往往是相同的。 Ajax交互技术 Ajax方式的交互过程： 组织数据→发送数据→处理数据→返回数据→接收数据 Ajax主要包含了以下几种技术： ●Ajax（Asynchronous JavaScript + XML）的定义 ●基于web标准（standards-based presentation）XHTML+CSS的表示； ●使用 DOM（Document Object Model）进行动态显示及交互； ●使用 XML 和 XSLT 进行数据交换及相关操作； ●使用 XMLHttpRequest 进行异步数据查询、检索； ●使用 JavaScript 将所有的东西绑定在一起。 即AJAX(Asynchronous JavaScript and XML)是多种技术的综合，它使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。更重要的是它打破了使用页面重载的惯例技术组合，可以说AJAX已成为Web开发的重要武器！ 例5 书目查询 采用Ajax的GET请求方式，用到两个页面： -AjaxGetRequest.htm ：请求页面。输入查询条件，组织并发送请求数据，接收并处理应答数据。 -AjaxGetResponse.asp：应答页面。处理请求数据，返回应答数据。 AjaxGetRequest.htm代码说明： 首先创建了一个XMLHttpRequest对象objRequest。在创建时用try结构尝试不同的浏览器版本。 函数SubmitRequest()的作用是提交请求信息，单击[查询]按钮时将调用它。 XMLHttpRequest对象通过open方法打开数据交换通路，通过send方法发送数据。open方法有五个参数： open(request-type,url,asynch,username,password) 1、 request-type：请求类型。通常是GET或POST，也可以是HEAD。 2、url：要连接的URL。即处理请求的页面(应答页面)。 3、asynch：true表异步，false表同步。该参数可选，默认为true。 4、username：若需要身份验证，则可以在此指定用户名。该可选参数没有默认值。 5、password：若需要身份验证，则可以在此指定口令。该可选参数没有默认值。 若open时请求类型是GET，则请求数据作为参数附在应答页面之后构成url。此时send的参数为null。 XMLHttpRequest对象有五种就绪状态(readyState)： 0：请求没有发出(在调用open之前)。 1：请求已经建立但还没有发出(调用send之前)。 2：请求已经发出正在处理之中(这时可以从响应得到内容头部)。 3：请求已经处理(但可能还有收尾工作)，响应中通常有部分数据可用。 4：响应已完成，可以接收并使用服务器响应。 XMLHttpRequest对象就绪状态的改变将触发