2014年ajax基础 教程.pptVIP

* 总结 AJAX的原理 同步与异步的区别 AJAX应用的基本开发步骤 DOM的使用 * * ACCP V4.0 ACCP V4.0 第 一 章 AJAX基础 * 课程目标 AJAX基础 JSON,JavaScript面向对象,JSVM的使用 DWR的使用 DWR引擎及服务器推的技术 Ext简介及面向对象 Ext布局对象及常见组件的使用 AIR简介与使用 使用AIR与EXT构建RIA应用 * Ajax简介 Ajax原理 XMLHttpRequest的使用 DOM简介 利用DOM操纵HTML文档 Ajax请求响应使用XML文档 目标 * AJAX（Asynchronous JavaScript and XML）它是一种由多种技术组合的技术。 包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等 XHTML，CSS用于呈现 DOM实现动态显示和交互 XML和XSTL进行数据交换与处理 XMLHttpRequest对象用于进行异步数据读取 Javascript绑定和处理所有数据 AJAX简介 * 传统的Web应用采用同步交互过程。 传统Web应用同步处理 * 传统的Web应用采用同步交互过程。 传统Web应用同步处理 * 传统的Web应用中，用户单击一个链接后，待需要等待，直到另外一个页面刷新显示。 如果仅仅需要改变页面的某一部分的内容，也不得不刷新整个页面。 传统Web应用同步处理 * Ajax采用异步方式与后台交互。 基于Ajax的异步处理 用 户 界 面 A J A X 引 擎 W E B 服 务 器 后 台 业 务 系 统 JavaScrip调用 HTML+CSS Http请求 XML,JSON数据 Web浏览器 后台服务器 * 基于AJAX的异步交互过程 传统Web应用同步处理 * AJAX异步处理的优点 减轻服务器的负担，AJAX一般只从服务器获取只需要的数据。 无刷新页面更新，减少用户等待时间。 更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验。 基于标准化的对象，不需要安装特定的插件绝大多数的游览器都能执行 彻底将页面与数据分离。 传统Web应用同步处理 * AJAX核心对象是XMLHttpRequest，该对象在JavaScript中可用于构建异步的后台服务的调用。 通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，不同的浏览器它的构建方式并不一样： AJAX应用开发 Mozilla,NetScape： var httpRequest = new XMLHttpRequest(); IE： var httpRequest = new ActiveXObject(“MSXML.XMLHTTP”); 或 var httpRequest = new ActiveXObject(MSXML2.XMLHTTP); * 使用XMLHttpRequest异步调用后台服务的基本步骤： 初始化XMLHttpRequest对象 指定响应处理函数(回调方法) 发出HTTP请求 处理服务器返回的信息 XMLHttpRequest的使用 * 不同的浏览器构建方式并不一样，示例展示了适合IE和Mozilla浏览器的构建立方式： 初始化XMLHttpRequest if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject(Microsoft.XMLHTTP); } 设置返回服务器返回数据类型的MIME格式 http_request.overrideMimeType(“text/xml”); * 回调方法在服务器端返回信息给客户端时被调用，只需将回调方法指定给XMLHttpRequest对象的onreadystatechange属性即可，示例中展示了两种设置方法。 指定响应处理函数(回调方法) var processRequest = function (){ … } http_request.onreadystatechange = processRequest; http_request.onreadystatechange = function(){ … } * 在发送请求前需要调用XMLHttpRequest的open方法打开链接，之后可通过其send方法发送请求。 发出HTTP请求 http_request