Ajax封装

   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中封装的方法。