一、Ajax介绍
Ajax,是AsynchronousJavaScript + XML的简写。这种技术能够让服务器请求额外的数据而无须卸载页面(即刷新),会带来更好的用户体验。
Ajax技术核心是XMLHttpRequest对象(简称XHR)。
这是由微软首先引入的一个特性 ,其他浏览器提供商后来都提供了相同的实现 。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。XHR的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息 ,这就意味着,用户只要触发某一事件 ,在不刷新网页的情况下,更新服务器最新的数据。
虽然Ajax中的x代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术不一定使用XML。
由于W3C与IE创建XMLHttpRequest的对象的方式不同,写一个兼容方法
function createXHR (){
//IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的 XHR 对象,
// 在这些浏览器中创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
else if (typeof ActiveXObject != 'undefined') {
//如果是 IE6 及以下,那么我们必须还需要使用 ActiveX 对象通过 MSXML 库来实现。
//在低版IE 浏览器可能会遇到三种不同版的XHR对象,即 MSXML2.XMLHttp、 MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0
var versions = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for (var i = 0; i < versions.length; i ++) {
//如果不支持某个版本的话直接返回就会报错阻塞程序,所以这里采用抛错机制防止程序阻塞
try {
return new ActiveXObject(version[i]);
}
catch (e) { //跳过
}
}
}
else {
throw new Error('您的浏览器不支持 XHR 对象!');
}
}
三、发送请求
1、同步请求
//创建一个XMLHttpRequest对象
var xhr = createXHR();
//在使用 XHR 对象时,先必须调用 open()方法
// 它接受三个参数:要发送的请求类型(get、 post)、请求的 URL 和表示是否异步。
//open()方法并不会真正发送请求,而只是启动一个请求以备发送。
xhr.open('get', 'url', false);
//通过 send()方法进行 发送请求
// send()方法接受一个参数,作为请求主体发送的数据。
// 如果不需要则,必须填 null。 执行 send()方法之后,请求就会发送到服务器上。
xhr.send(null); //发送请求
2、异步请求
//创建一个XMLHttpRequest对象
var xhr = createXHR();
//使用异步调用的时候, 会触发 readystatechange 事件
//状态改变就会调用该方法
xhr.onreadystatechange = function () {
//在此根据readyState的不同进行不同的操作
/*
xhr.readyState == 0;未初始化 尚未调用 open()方法
xhr.readyState == 1;启动 已经调用 open()方法,但尚 调用 send()方法
xhr.readyState == 2;发送 已经调用 send()方法,但尚 接受响应
xhr.readyState == 3;接受 已经接受到部分响应数据
xhr.readyState == 4;完成 表示已经接受到全部响应数据,而且可以使用
*/
};
xhr.open('get', 'demo.php?rand=' + Math.random(), true);
xhr.send(null);
说明:
当请求发送到服务器端,收到响应后,响应的数据会自动填充XHR对象的属性。那么一共有四个属性:
/*
xhr.responseText ;作为响应主体被返回的文
xhr.responseXML;如果响应主体内容类型是"text/xml"或"application/xml", 则返回包含响应数据的 XML DOM 文档
xhr.status;响应的HTTP状态
xhr.statusText;HTTP 状态的说明
*/
//如果返回成功了
if (xhr.status == 200) {
//调出服务器返回的数据
alert(xhr.responseText);
}
else {
alert('数据返回失败!状态代码:' + xhr.status + '状态信息:' + xhr.statusText);
}
xhr.onreadystatechange = function () {
if (xhr.status == 200) {//服务器的响应状态
if (xhr.readyState == 4) {//异步请求的状态
alert(xhr.responseText);
}
}
else {
alert('状态代码:' + xhr.status + '状态信息:'
+ xhr.statusText);
}
};
3、get请求与post请求
//GET 请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查 询字符串参数追加到 URL 的 尾,以便提交给服务器。
xhr.open('get', 'url?rand=' + Math.random() + '&name=Koo', true);
//POST 请求的数据,不会跟在 URL 的尾巴上,而是通过 send()方法向服务器提 交数据。
xhr.open('post', 'url', true);
xhr.send('name=Lee&age=100');
//通过编码解决url中的特殊字符和中文问题
function addURLParam(url, name, value) {
url += (url.indexOf('?') == -1 ? '?' : '&');
//判断的 url 是否有已有参数
url += encodeURIComponent(name) + '=' + encodeURIComponent(value); alert(url);
return url;
}
4、获取响应头信息和设置请求头信息
//使用 getResponseHeader()获取单个响应头信息
alert(xhr.getResponseHeader('Content-Type'));
//使用 getAllResponseHeaders()获取整个响应头信息
alert(xhr.getAllResponseHeaders());
//使用 setRequestHeader()设置单个请求头信息
xhr.setRequestHeader('MyHeader', 'Lee'); //放在 open 方法之后,send 方法之前
四、封装 Ajax
因为 Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用 GET 还是 POST;到底是使用同步还是异步等等,我们需要封装一个 Ajax 函数,来方便我们调用。
function ajax(obj) {
var xhr = createXHR();
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data);
if (obj.method === 'get'){
obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
}
if(obj.async === true){
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) callback();
};
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
}
else {
xhr.send(null);
}
if (obj.async === false) {
callback();
}
function callback () {
if (xhr.status == 200) {
obj.success(xhr.responseText); //回调
}
else {
alert('数据返回失败!状态代码:' + xhr.status + ',状态信息:' + xhr.statusText);
}
}
}
function params(data) {
var arr = [];
for (var i = 0;i < data.length; i++) {
arr.push(encodeURIComponent(data[i]) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
//调用
ajax({
method : 'get',
url : 'demo.php',
data : {
'name' : 'Lee',
'age' : 100
},
success : function (text) {
alert(text);
},
async : true
});