Ajax概述：

+ Ajax(Asynchronous JavaScript And Xml),非同步的JavaScript和Xml。是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊对象（XMLHttpRequest，一般称之为Ajax对象）非同步地（Ajax对象在向伺服器发送请求时，浏览器并不会销毁当前页面，用户仍然可以对当前页面作其他的操作）向伺服器发送请求，伺服器送回部分数据（不是一个完整的新的页面，而是文本或者Xml文档），在浏览器端，可以利用这些数据部分更新当前页面。整个过程，页面无刷新，不打断用户的操作。

+ 优点：

1) 页面无刷新，不打断用户的操作。

2) 按需要获取数据，客户端（浏览器）与伺服器端之间的数据传输量大大减少

3) 是一种标准化的技术，不需要下载任何插件。

+ 获得Ajax对象：由于XMLHttpRequest（Ajax对象）没有标准化，所以要区分浏览器。

function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//非IE浏览器
}else{
xhr=new ActiveXObject(Microsoft.XMLHttp);//IE浏览器
}
return xhr;
}

语句处理：

$(「id」) <—> document.getElementById(「id」);

$F(「id」) <—> document.getElementById(「id」).value;

+ Ajax对象属性：

1）onreadystatechange：绑定一个事件处理函数（监听器），该函数用来处理readystatechange事件。Ajax对象的readyState属性发生改变，比如从0到1，则会产生onreadystatechange事件。

2）responseText：获得伺服器返回的文本数据。

3）responseXML：获得伺服器返回的Xml文档。

4）status：获得状态码。

5）readyStatue：返回Ajax对象与伺服器通讯的状态，返回值是一个number类型的值。一共有5个值，分别是：

①0：（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）。

②1：（初始化）对象已建立，尚未调用send方法。

③2：（发送数据）send方法已调用。

④3：（数据传送中）已接收部分数据。

⑤4：（响应结束）Ajax对象已经获得了伺服器返回的所有的数据。

if(xhr.readyState==4 && xhr.status == 200){…}

+ get请求：

1）获得Ajax对象，比如：var xhr=getXhr();//调用之前定义的函数

2）发送get请求：

① xhr.open(『get』,check_username.do?username=chang&age=23,true)；

//参数依次为：请求方式、url、同步还是非同步(true：非同步，用户能对当前页面进行其他操作，不会销毁页面；false:同步，浏览器会锁定该页面，用户只能等待，不会销毁页面)

② xhr.onreadystatechange=func1();//绑定一个事件处理函数（监听器）

③ xhr.send(null);//送请求参数，因为参数已经写在了请求资源路径中，所以这里为null。

④事件处理函数func1()：

function f1(){
if(xhr.readyState==4){
var txt=xhr.responseText;
dom操作……
}
}

+ post请求：

1）获得Ajax对象，比如：var xhr=getXhr();//调用之前定义的函数

2）使用Ajax对象发送post请求：

① xhr.open(「post」,」check.do」,true);//建立连接

② xhr.setRequestHeader(「content-type」,」application//x-www-form-urlencoded」);//发送一个content-type消息头, 必须设置

③ xhr.onreadystatechange=func1();//绑定一个事件处理函数（监听器）

④ xhr.send(「username=小红「);//发送请求参数

【注意：与get请求不同，请求参数要放到send方法里面；因为按照HTTP协议的要求，发送post请求时，应该发送一个content-type消息头，而Ajax对象在默认情况下，不会发送这个消息头，所以，需要调用setRequestHeader方法来添加。】

3）编写函数处理事件func1();

+ 乱码问题：

1）get请求：

—>乱码产生原因：IE浏览器内置的Ajax对象会使用「GBK」或「GB2312」对中文参数进行编码，而其他浏览器（Chrom、Firefox）内置的Ajax对象会使用「utf-8」对中文参数进行编码。伺服器端，默认会使用「ISO-8859-1」去解码。因为编码与解码所使用的字符集（编码格式）不一致，所以，会出现乱码问题。

—> 乱码解决：

① 设置伺服器使用指定的字符集去解码。比如，可以修改Tomcat的server.xml配置（conf文件夹中），添加URIEncoding=「utf-8"（告诉伺服器，对于所有的get请求，默认使用「utf-8」去解码），修改之后重新启动伺服器。

② 使用encodeURI()函数（JS中内置函数）对请求地址进行编码。encodeURI()函数会使用「utf-8」进行编码。

xhr.open(get,check_username.do?username=+$F(username),true);
var uir=check_username.do?username=+$F(username);
xhr.open(get,encodeURI(uri),true);

2）post请求：

—> 乱码产生原因：所有浏览器（一般指三大浏览器：Chrom、Firefox、IE）内置的Ajax对象都会使用「utf-8」对中文参数进行编码，而伺服器默认情况下，会使用「ISO-8859-1」去解码。

【注意：Firefox特殊，本应是乱码，但能正常显示。通过截取消息头发现Firefox会在消息头中自动添加」charset=utf-8"。】

—> 乱码解决：伺服器端添加：request.setCharacterEncoding("utf-8");

+ 缓存问题

1）get请求：

—> 缓存原因：IE浏览器（其他浏览器没这个问题）内置的Ajax对象会检查请求地址是否访问过，如果访问过，则不再向伺服器发送请求。

—> 解决方式：

① 在请求地址后面添加一个随机数，用于欺骗IE；如：xhr.open(get,getNumber.do?+Math.random(),true);

② 使用post方式发请求。

【注意：】

1）href="javascript:;"相当于href="#"，写成href="javascript:;"一般要和onclick事件一起使用，表示a元素不再指向一个地址，而是点击后触发一个事件。

+ 同步请求：

1）什么是同步请求

Ajax对象在向伺服器发送请求时，浏览器会锁定当前页面，用户不能够对当前页面做任何的操作。

2）如何发送同步请求

open(请求方式，请求地址，false)

3）优先使用非同步，因为同步会影响性能，当伺服器端处理比较慢的时候，浏览器会锁定当前页面（「假死」）。

4）只有当客户端需要等待伺服器的响应之后，才能继续向下执行时，应该使用同步。

【注意：Firefox的某些版本（低版本，如3、4）对于同步的支持比较特殊：

不能使用xhr.onreadystatechange来绑定一个事件处理函数，而应该在send方法执行之后，才调用xhr.responseText方法来获得伺服器返回的数据。】

+ 跨域

当协议、子域名、主域名、埠号中任意一个不相同时的介面访问即是跨域。

javaScript出于安全考虑，不允许跨域调用其他页面的对象。如a.com下的js不能调用b.com下的js对象。

* 处理方法

1）代理方式JSONP：需要与伺服器端配合。

—> 在伺服器端的介面中添加jsonp;

—> 在web端的ajax的参数：dataType:」jsonp」,jsonp:」callback自定义返回名」；

2）在HTML5中已经提供了跨域支持。只需要在伺服器添加header:」Access-Control-Allow」和「Access-Control-Allow-Methods:POST,GET」

推荐阅读：

相关文章