第四章Ajax.ppt

第四章 Ajax 本章内容 1.为什么要使用Ajax 2.Ajax基础 3.Ajax框架 4.使用Ajax框架 1.为什么要使用Ajax 1.1 B/S架构软件的优势及趋势 1. 优势 A: 用户对于网络程序的使用高于桌面程序,也就是 说对网络程序的操作熟练于桌面程序 B: B/S架构程序的部署对用户没有要求 C: B/S架构程序的维护较简单 D: 对于公共平台,B/S更易于宣传推广 2. 趋势 A: 大部分程序采用B/S架构来完成 B: 部分桌面程序向B/S转变(web迅雷、书生) C: B/S必将代替大部分桌面程序成为主流 1.1 B/S架构软件的优势及趋势 3. 当前问题 A: 操作习惯的延伸,如何把桌面程序的操作习惯与web程序操作习惯统一起来 B: 如何提高性能与安全性 C: 提高用户体验,效果更好 2. Ajax基础 2.1 什么是Ajax Ajax是Asynchronous JavaScript?? XML的缩写，它也不是单一技术，而是几种技术的强有力组合。它包括 使用XHTML和CSS标准化呈现; 使用DOM实现动态显示和交互; 使用XML和XSLT进行数据交换与处理; 使用XMLHttpRequest进行异步数据读取; 最后用JavaScript绑定和处理所有数据; 2.2 Ajax Http 请求 JavaScript通过XMLHttpRequest对象，直接与服务器实现异步通信。使用一个HTTP请求，web页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。 2.3 一个Ajax简单示例 一个普通表单 2.3 一个Ajax简单示例 创建XMLHttpRequest对象过程 2.3 一个Ajax简单示例 Onreadystatechange事件 用来处理服务器响应的事件，这个事件一般绑定到一个函数来对事件处理 readyState 属性 保存服务器响应的状态信息，每当readyState改变时，onreadystatechange函数就会被执行 2.3 一个Ajax简单示例 readyState 属性的值 这说明我们要在onreadystatechange的函数中添加一个if语句来判断当前状态以便对数据进行处理 2.3 一个Ajax简单示例 readyState 属性的值 2.3 一个Ajax简单示例 responseText 属性 由服务器返回的数据可以通过responseText属性来取回 2.3 一个Ajax简单示例 如何向服务器端发送数据？ open()方法和send()方法 3. Ajax框架 3.1 Ajax框架 Adobe Spy JQuery 当前最流行 3.1 Ajax框架 Ext 4. Ajax框架的使用 4.1 Ajax框架使用-JQuery Hello jQuery *