AJax实现机制及基础应用



一、概念

  1、各大技术结合体

AJAX并不是一种新的编程语言，而是集合了XML、JavaScript、CSS+HTML、DOM动态网页技术的结合体。

  2、异步更新

AJAX不同于传统的web应用程序，通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二、实现机制

  1、用户体验角度：

   (1)、传统web应用交互方式：间断的用户体验

点击link、button——>提交——>用户等待服务器响应——>查看更新后页面

(2)、AJAX交互方式：不间断的良好用户体验

点击link、button——>提交——>继续用户操作，无需经历漫长等待——>查看更新后页面

  2、技术实现角度:

传统web：                                     

 AJAX:

  3、Ajax异于传统web的关键：提交返回数据的方式

传统web：

通过表单组织，整张提交到服务器，有服务器解析返回html给浏览器刷新。

AJAX：

利用js进行数据获取，提交请求同时创建对象XmlHttpRequest对象，用与接收服务器返回数据。整个过程以文本数据的形式传输，所以实现了不必刷新整个页面信息，仅返回更新部分数据的异步更新效果。大大降低了服务器响应时间。

三、技术核心

  1、XmlHttpRequest对象

XMLHttpRequest作用：

用于在后台与服务器交换数据。AJAX的异步更新技术，XmlHttpRequest对象起着至关重要的作用。所有现代浏览器均支持 XMLHttpRequest 对象（IE5和IE6使用 ActiveXObject）。

XmlHttpRequest对象五步使用法：

a、创建对象

b、注册回调函数

c、使用open方法设置和服务器交互的基本信息

d、设置发送数据，开始交互

e、通过回调函数回复响应结果，更新页面

常用属性和方法：

方法	描述
Open()	5个参数，用于指定与服务端交互的http方法(get/post)，URL地址及请求信息
Send()	向服务器发送请求
readyState	表示XmlHttpRequest对象的状态(0—4)

  2、Javascript

  3、DOM

四、优缺点

Ajax应用程序的优势在于：
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用，减少数据传输时间
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

Ajax的问题

 1. 一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax;
　 2.用JavaScript作的Ajax引擎，JavaScript的兼容性尚且不够完善