利用Ajax改善客户体验.pptVIP

第十三章 本章目标 理解异步与同步 ajax的优势,演示Ajax的异步特效(两种方案的用户注册) 什么是异步？ 同步和异步的区别 Ajax原理介绍 1-1 What’s Ajax? Asynchronous JavaScript and XML 是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascript来绑定和调用。 Ajax原理介绍 1-2 Why use Ajax ? Ajax应用程序比传统的web应用程序的优势在于：1、页面无刷新，在页面内与服务器通信，给用户的体验非常好。 2、使用异步方式与服务器通信 3、服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理 4、ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 Ajax原理介绍 1-3 What ajax can do? Ajax原理介绍 1-4 小结 Ajax原理图： XMLHttpRequest对象 XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。 Ajax的使用 创建Ajax引擎 XMLHttpRequest对象的属性 XMLHttpRequest对象的方法 Ajax使用 get和post提交方式的区别 Ajax乱码的处理 Ajax的总结 为什么需要ajax Ajax原理 Ajax程序开发的步骤 Ajax应用实践 利用ajax实现helloWorld程序 登录功能的实现(利用ajax检查用户名是否存在) 实现级联菜单互动 * 利用Ajax改善客户体验 理解异步与同步 Ajax原理介绍 ajax的使用 onreadystatechange 每次对象状态改变所触发事件的事件处理程序。 responseText 从服务器进程返回数据的字符串形式。 responseXML 从服务器进程返回的DOM兼容的文档数据对象。 status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪） readyState 对象状态值 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 1 (初始化) 对象已建立，尚未调用send方法 2 (发送数据) send方法已调用 3 (数据传送中) 4 (完成) 数据接收完毕