Ajax技术由简至深_H5之家 - 中国HTML5教程资源分享第一站

第一次写，嘿嘿

写Ajax的初衷，是一个朋友突然问题我Ajax的问题。想想好久没用了，也忘了很多，感觉很糟糕。所以想通过写的方式，加深学习。有点没事找事干的感觉，嘿嘿

言归正传，

Ajax是啥？简而言之，如其名Asynchronous javaScript And Xml(异步的javaScript与Xml)

作用（用户方面）：提高用户体验，来一次更流畅的操作之旅

（技术方面）：减少带宽压力，提高前后台交互的能力

实现：Ajax技术是通过浏览器一个内置对象XMLHttpRequest，向服务器端发送异步的请求，该请求不会影响用户其他操作，‘偷偷摸摸’的实现了前后台的交互。

具体实现如图：

简单流畅：一个操作------触发事件----调用Ajax代码，向服务器发送请求-----服务端处理请求，数据库交互----响应（将处理结果，发送给前台）---Ajax接受响应，处理响应---实现异步（最常见的效果就是更新部分节目效果时，不刷新界面）完美，嘿嘿。

简单介绍，就上述了。下面我们来看看复杂点的东西。

1，XmlHttpRequest针对 IE浏览器与其它浏览获取方式不同

我们常见写法

function getXhr(){

var xhr=null;

if（Window.XMLHttpRequest）{----针对非IE浏览

xhr=new XMLHttpRequest();

}else{

xhr=new ActiveObject('Microsoft.XMLHttp');---IE浏览器

}

}-----究其原因，就是BOM没有统一的规范。

XmlHttpRequest的属性

1，onreadystatechange：绑定事件（什么时候调用Ajax代码）

2，reponestText：获得响应文本数据（服务端传给前端的数据）

3，reponestXML：获得相应XML文档

4，status：获得状态码

5，readyState：返回一个告知Ajax与服务器通信的状态值（NUMBER类型）

0：对象已创建未初始化/1：对象已建立也初始化，但是为调用send方法/2：调用send方法中/3：数据在传的过程中/4：已获得所有数据

一个完整Ajax实现案例：

第一步：var xhr=getXhr（）；----创建Ajax对象

第二步：xhr.open('get',xxxxx.do?username=abc&age=23,true);

xhr.open('post',xxxxx.do,true);

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')----post请求必须发一个该消息头。默认情况不发，加这行就会发。

---第一个参数，请求方式；第二参数，指定url路径以及向服务端传的数据；第三个参数，boolean值默认为true，表示异步；

第三步：xhr.onreadystatechange=func1();---绑定一个函数

第四步：xhr.send(null);-----发送请求，参数：向服务端传的数据，如果路径中已带，直接null即可；post方式，必须将数据写在send方法中；

第五步：function f1(){

if(xhr.readyState==4){

var text=xhr.reponestText;

DOM操作....其实就是写js

}

2，编码问题

相信做web项目，大家一定都会碰到编码问题，Ajax技术也一样，由于浏览器不同支持以及服务端的规范，所以有时存在乱码的问题。

根据不同请求方式也有差异：

get请求

主要指IE与其他浏览器的差异

IE提供的默认为：GBK或GB2312，对中文编码；

其他提供的默认：udf-8；

服务端默认：ISO-8859-1；

这样编码与解密不一致，come，乱码出现。

解决方法：

post请求：

主流浏览器的默认：udf-8；

服务端默认：ISO-8859-1；

解决方式：

3，缓存问题

get请求

IE浏览器检查URL路径是否存在（是否发过），如果已发过，IE浏览器不会去访问服务器，直接返回历史的（也就是指缓存中的）。这肯定不是我们想要的。

解决方式：

1，url路径加个随机数：xhr.open('get',xxxxx.do?username=abc&age=23&Moth.random(),true); 这样就保证每次的路径是不一样的

2，将请求改为post请求即可

post请求

暂无缓存问题

Ajax就这样多了。强调一下：DOM模型是Ajax最本质的技术，完完全全的客户端技术。

想了解Ajax与Json联系，请看Json介绍。