jQuery中Ajax实现&封装一个Ajax工具函数

封装一个Ajax工具函数

原生JS简单实现Ajax

1、先写出调用函数 然后一步步分析封装

    // jQuery里面的Ajax就是这样的调用方式
    $.ajax({
            type:'get',                 // 请求方式
            url:'demo.php',             // 后台处理程序地址接口
            data:{name:'哈哈',age:22},  // 传输的数据
            callback:function(data){    // 回调函数
                // data为获取到的数据
                console.log(data);
            }
        });

2、引入一个命名空间

// 定义一个命名空间  防止全局污染
var $ = {
        // 传输数据处理函数
        joint:function(){},
        ajax:function(){}
};

3、首先对要传输的数据进行处理

    // data处理函数  将数据处理为 以key1=value1&key2=value2...格式输出
    joint:function(data){
        var d = '';
        // 遍历data数据
        for(var key in data){
            // 拼接为key1=value1&key2=value2...
            d += key + '=' + data[key] + '&';
        }
        // 去除最后一个&
        d = d.slice(0, -1);
        // 最后返回d
        return d;
    }

4、书写ajax函数

    // ajax
    ajax:function(obj){
        // type无数据时默认为get
        var type = obj.type || 'get';
        // url无数据时默认为当前地址
        var url = obj.url || location.pathname;
        // data数据处理 
        var data = this.joint(obj.data);

第一步new

        // 实例化
        var xhr = new XMLHttpRequest();
        // 判断为get提交时 改变url结构
        if(type == 'get'){
            url = url + '?' + data;
            data = null;
        }

第二个步open

        // 发出请求 请求行信息
        xhr.open(type,url);

第三步set

        // 判断为post提交时
        if(type == 'post'){
            // 为get提交时可以不写
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        }

第四步send

        // 发送数据
        xhr.send(data);

监听响应状态并处理

        xhr.onreadystatechange = function(){
            // 处理成功
            // xhr.readyState = 4时  响应完成
            // xhr.status = 200  成功接收请求
            if(xhr.readyState == 4 && xhr.status ==200){
                // 获取响应的数据
                var data = xhr.responseText;
                // 获取响应头文件中的Content-Type信息
                var ct = xhr.getResponseHeader('Content-Type');
                // 转小写
                ct = ct.toLowerCase();
                // 判断为响应的为json格式的数据
                if(ct.indexOf('json') != -1){
                    // 将json格式的数据解析为JS类型的json数据
                    data = JSON.parse(data);
                    // 判断为响应的为XML格式数据
                }else if(ct.indexOf('xml') != -1){
                    // 获取XML数据
                    data = xhr.responseXML;
                }
                // 回调函数返回响应的数据
                obj.callback(data);
            }
        }
    }

源代码下载