AJAX（Asynchronous JavaScript and XML,即异步JavaScript和XML）是一种运用JavaScript和可扩展标记语言（XML）在浏览器和服务器之间进行异步传输数据的技术。简单的说，AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。使用Ajax不会重新加载网页，就可以与服务器交换数据。
使用Ajax一共可分为以下几步，
1.创建一个异步对象
2.设置请求方式和请求地址
3.发送请求
4.监听状态的变化
5.处理返回的结果
创建一个异步对象，这很简单，就是new一个异步对象，即
var xmlHttp;
为什么只定义一个变量呢，这是因为在不同的浏览器中，有的不支持xmlHttp对象。
那么就要判断是否可以创建异步对象。
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
判断并创建完成之后，接着进行第二步和第三步，设置请求方式和请求地址。
这里我们借鉴Jquery中的方法，把请求方式和地址都放到一个对象中。
if (option.type.toLowerCase()==="get") {//toLowerCase将大写转化为小写
xmlhttp.open(option.type,option.url+"?"+str,true);//第三个参数永远传true，ajax存在的意义就是发送异步请求。
//3.发送请求
xmlhttp.send();
}else{
xmlhttp.open(option.type,option.url,true);
//注意点:以下代码必须放在open和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.发送请求
xmlhttp.send(str);
}
监听状态变化和处理返回的结果，
/*
readyState存有 XMLHttpRequest 的5种状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if (xmlhttp.readyState === 4){
clearInterval(timer);
//判断是否请求成功(Http状态码大于等于200，且小于300，和状态码等于304为请求成功)
if (xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status===304) {
//5.处理返回的结果
// console.log("接收到服务器返回的数据");
option.success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
option.error(xmlhttp);
}
}
最后整合补充一下
function obj2str(data) {
data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
data.t = new Date().getTime();
var res = [];
for (var key in data){
//在URL中是不可以出现中文的，如果出现了中文需要转码，可以调用encodeURIComponent方法，URL中只可以出现字母、数字、下划线、ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
}
return res.join("&");
}
function ajax(option){
var str = obj2str(option.data);//key=value&key=value;
var xmlhttp,timer;
if (option.type.toLowerCase()==="get") {//toLowerCase将大写转化为小写
xmlhttp.open(option.type,option.url+"?"+str,true)
xmlhttp.send();
}else{
xmlhttp.open(option.type,option.url,true);
//注意点:以下代码必须放在open和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
xmlhttp.onreadystatechange = function (ev2) {
if (xmlhttp.readyState === 4){
clearInterval(timer);
//判断是否请求成功(Http状态码大于等于200，且小于300，和状态码等于304为请求成功)
if (xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status===304) {
option.success(xmlhttp);
}else{
option.error(xmlhttp);
}
}
};
if (option.timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
},option.timeout);
}
}
最后说明一下，其实也可以用JQuery中封装的方法。
