ajax的简单封装

ajax的简单封装

ajax一般分为简单的四部：

创建ajax对象（这里兼容ie的话要做一下处理）
连接，即请求对象的open方法（get和post还有点不同，get参数要放在url后面，post要设置请求头）
发送，即请求对象的send函数（post参数则放在send里面）
接收，在onreadystatechange（存储函数或函数名，每当readyState属性改变时，就会调用该函数。）函数里面处理。
还可以加上超时。

onreadystatechange分析：

要先判断readyState的状态（有四个状态）
①： 0，请求未初始化；
②： 1，服务器连接已建立；
③： 2，请求已接收；
④： 3，请求处理中；
⑤： 4，请求已完成，且响应已就绪

当readyState等于4时，你又要判断status的状态
请求成功时status状态 200-300（不包括300） ，还有304（是缓存）（具体状态可以去参考文档）
在成功（失败）的回掉函数里面将xhr.responseText的值返回出去。

代码

function ajax(options) {
        var xhr = null;
        var params = formsParams(options.data);
        //创建对象
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest()
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 连接
        if (options.type == "GET") {
            xhr.open(options.type, options.url + "?" + params, options.async);
            xhr.send(null)
        } else if (options.type == "POST") {
            xhr.open(options.type, options.url, options.async);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                options.success(xhr.responseText);
            }
        }
        function formsParams(data) {
            var arr = [];
            for (var prop in data) {
                arr.push(prop + "=" + data[prop]);
            }
            return arr.join("&");
        }

    }