Ajax 你想要的都在这里

Ajax操作步骤通用详解

在这里我已经封装好创建对象的方法，代码如下，可以直接拿来用即可：

var xhr;// 声明一个全局变量
var createXMLHttpRequest = function(){
    try{
        // 针对大多数浏览器（chrome、Firefox、IE7+等）
        xhr = new XMLHttpRequest();
    } catch(e){
        try {
            // 适用于IE6
            xhr = new ActiveXObject("MSXMl2.XMLHTTP");
        } catch(e){
            // 适用于IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    // 返回对象
    return xhr;
}

Ajax操作步骤封装为对象的形式，直接贴代码：

var ajax = function(obj) {
    // Ajax操作四个步骤：窗帘情调（创建、连接、请求、回调）

    // 1、获取XMLHttpRequest对象
    xhr = createXMLHttpRequest();

    // 判断请求方式是GET方式还是POST方式
    if (!obj.method) {
        // 如果obj对象的参数属性中没有method属性，默认为其添加一个method属性，设置值为GET
        obj.method = "GET";
    }

    // 判断请求类型是否为异步或同步
    if (obj.asyn == undefined) {
        // 如果obj对象的参数属性中没有asyn属性，默认为其添加一个asyn属性，设置值为true
        obj.asyn = true;
    }

    // 2、与服务端进行连接，通过使用XMLHttpRequest对象的open方法
    xhr.open(obj.method, obj.url, obj.asyn);
    // 对于POST请求，需要进行设置
    if (obj.method == "POST" || obj.method == "post") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }

    // 3、发送Ajax请求
    xhr.send(obj.param);

    // 4、给XMLHttpRequest对象的onreadystatechange属性指定回调函数（指定当readyState属性改变时的事件处理句柄）
    xhr.onreadystatechange = function() {
        // 当XMLHttpRequest对象的状态发生改变时执行
        // XMLHttpRequest对象的状态码为4(完成)： 数据接收完毕
        if (xhr.readyState == 4) {
            // 服务端响应状态码status： 返回当前请求的http状态码
            if (xhr.status == 200) {
                // 获取响应数据
                var result;

                if (!obj.type) {
                    // 没有设置响应数据类型，默认作为普通字符串处理
                    result = xhr.responseText;
                } else if (obj.type == "text") {
                    // 设置响应数据类型为普通字符串
                    result = xhr.responseText;
                } else if (obj.type == "json") {
                    // 设置响应数据类型为JSON字符串
                    var temp = xhr.responseText;
                    // 通过eval函数对JSON格式的数据进行解析执行
                    result = eval("(" + temp + ")");
                }

                // 把result结果提供给调用Ajax操作类的函数的回调函数
                obj.callback(result);
            } else {
                console.log("系统错误，稍后再试");
            }
        } else {
            console.log("正在获取数据，稍等...");
        }
    };
};

希望对大家有所帮助，关注我，以后好东西定时更新！