Ajax棵

ajax

1.什么是ajax？(异步请求，局部刷新)

ajax是一个改善用户体验的技术，实质上是利用浏览器端ajax对象()向服务器发送异步(ajax对象在向服务器发送请求的时候，用户可以继续其他操作)请求，服务器返回的text或者xml类型的数据，浏览器根据返回的数据，对页面进行局部刷新。

在整个过程中，不会中断用户的操作，体验度好。

2.如何获取ajax对象？

非IE    new XMLHttpRequest();

IE    new ActiveXObject("Microsoft.XMLHttp");

3.ajax向服务器发送请求

(asynchronous JavaScript and xml)

-----发送get请求---------

1）获取ajax对象

var xhr=getXhr();

2）注册监听器

xhr.onreadystatechange

3）初始化

xhr.open('get','CheckUname.do',true);

'get':请求类型、

'checkUname.do':请求地址

'true':发送异步请求

'false';发送同步请求

ajax向服务器发送请求，在服务器返回响应之前，用户必须等待，如果服务器响应的时间过长，页面出现锁死状态，用户体验度不好

4）真正发送请求

xhr.send(null);

*ajax对象的重要属性：

1）onreadystatechange：注册一个监听器（绑定一个事件函数）

2）readyState：返回对象与服务器的状态

返回一个值，含义如下：

　　0：未初始化，对象已经建立，但是还没有调用open方法

　　1：初始化，对象已经建立，但是没有调用send方法

　　2：发送数据，send方法已调用

　　3：数据传送中，服务器已经接受了部分数据

　　4：响应结束，浏览器接受了所有数据

3）responseText：获取服务器返回的文本

4）responseXML：获取服务器返回的XML dom对象

5）status：获取状态码

200 405 404

若ajax发送的是get请求，IE浏览器存在以下问题

1）如果请求地址没有发生改变，那么IE不会真正向服务器发送请求，返回的是上一次请求服务器的数据(被IE缓存了)

　　解决方法一：给地址后面加时间戳

var url="checkUname.do?uname="+$("[name=uname]").val()+"&"+new Date().getTime();
xhr.open('get',url,true);

2）参数中文乱码问题

解决方法：

　　step1.Tomcat/conf/server.xml中编码格式是UTF-8

　　step2.encodeURI(url)    将地址中的中文以utf-8的格式转成对应的字节　

　解决方法二：发送post请求

----发送post请求---

1）获取ajax对象

2）同(get)

3）初始化

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

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  (这句话不能省)

4）真正发送请求

xhr.send("uname="+uname);

练习：省市联动