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);

练习:省市联动

原文地址:https://www.cnblogs.com/yingyigongzi/p/9181952.html