让你脱口而出的 AJAX（二）封装属于自己的AJAX

最新推荐文章于 2022-11-01 08:52:57 发布

原创最新推荐文章于 2022-11-01 08:52:57 发布 · 650 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #ajax 封装 #javascript

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用AJAX获取后台数据并动态生成页面结构的方法。通过逐步解析代码，展示了如何封装AJAX请求过程，以便更灵活地管理和复用。重点讨论了参数传递、响应处理及动态内容渲染。

首先我们来看下面这段代码，通过发送ajax请求得到后台的数据，通过遍历动态生成页面结构

    // 1.创建对象
    var xhr = new XMLHttpRequest();
    // 2.设置请求行
    xhr.open("get","./server/nav-json.php");
    // 3.设置请求体
    xhr.send();
    // 4.让异步对象接收服务器响应数据:一个成功的响应包含两个条件：1.服务器成功响应了  2.数据解析完毕可以使用了
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            var result = xhr.responseText;
            // 在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象(
                // 如果文件以[]来描述数据，那么就转换为数组
                // 如果文件以{}来描述数据，那么就转换为对象)
            var data = JSON.parse(result);
            var html = "";
            for(var i=0;i<data.length;i++){
               html += "<li>" +
                            '<a href="#">' +
                                '<img src="'+data[i].src+'" alt="">' +
                                '<p>'+data[i].text+'</p>' +
                            '</a>' +
                        '</li>';
            }       
            // 将生成的页面结构添加到dom元素中
            document.querySelector("ul").innerHTML = html;
        }

接下来就对它进行封装，首先找出可变部分作为参数

        type:请求方式
        url:请求url
        data:传递给服务器的参数
        callback:客户端的动态结构的渲染方式

 function ajax(type,url,data,callback){
        // 1.创建对象
        var xhr = new XMLHttpRequest();
        // 2.设置请求行
        xhr.open(type,url,data?url+data:url);
        // 3.设置请求体
        xhr.send();
        // 4.让异步对象接收服务器响应数据:一个成功的响应包含两个条件：1.服务器成功响应了  2.数据解析完毕可以使用了
        xhr.onreadystatechange = function(){
            if(xhr.status == 200 && xhr.readyState == 4){
                // 获取响应头
                // getAllResponseHeaders:获取所有响应头
                var rh = xhr.getResponseHeader("Content-Type");
                var result = xhr.responseText;
                // 在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象(
                    // 如果文件以[]来描述数据，那么就转换为数组
                    // 如果文件以{}来描述数据，那么就转换为对象)
                callback(result);
            }
        }
    }
    // 实现动态结构的渲染
    function render(result){
        var data = JSON.parse(result);
                var html = "";
                for(var i=0;i<data.length;i++){
                    html += "<li>" +
                            '<a href="#">' +
                                '<img src="'+data[i].src+'" alt="">' +
                                '<p>'+data[i].text+'</p>' +
                            '</a>' +
                        '</li>';
                }
                // 将生成的页面结构添加到dom元素中
                document.querySelector("ul").innerHTML = html;
    }
    ajax("get","./server/nav-json.php",null,render);

上面的封装方式的缺点：
1.参数数量固定：在调用的时候必须传入四个参数
2.参数的顺序固定：在调用的时候必须按照顺序进行参数的传递

3.不方便后期封装功能的扩展与修改

解决方式：通过传入对象的方式来设置参数

option是一个对象，它里面包含着相关的属性：如type,url,data,success

var $ = {
    // 将{"name":"jack","age":20} 从键值对格式转换为 ?name=jack&age=20
    getpa:function(data){
        if(data && typeof data == "object"){
            var str = "?";
            for(var key in data){
                str = str + key + "=" + data[key] + "&";
            }
            str = str.substr(0,str.length-1);
        }
        return str;
    },
    // option.type:请求方式
    // option.url:请求的url
    // option.data:当前请求所传递的参数:规定参数必须是以对象的形式传递{"name":"jack","age":20}
    // option.success:渲染方式
    ajax:function(option){
        // 接收用户参数进行相应处理
        var type = option.type || 'get';
        // location.href 可以获取当前文件的路径 
        var url = option.url || location.href;
        // 接收参数:传递的参数必须是对象
        var data = this.getpa(option.data) || "";
        // 响应成功之后的回调
        var success = option.success;

        // 创建异步对象
        var xhr = new XMLHttpRequest();
        // 让异步对象发送请求
        if(type == "get"){
            // 拼接参数
            url += data;
            data = null;
        }
        xhr.open(type,url);
        if(type == "post"){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }
        xhr.send(data);
        // 让异步对象接收响应
        xhr.onreadystatechange = function(){
            // 一个成功的响应有两个条件：1.服务器成功响应 2.数据解析完毕可以使用
            if(xhr.status == 200 && xhr.readyState == 4){
                // 接收响应的返回值 responseText   responseXML
                var rh = xhr.getResponseHeader("Content-Type");
                // 判断
                if(rh.indexOf("xml") != -1){
                    var result = xhr.responseXML;
                }
                else if(rh.lastIndexOf("json") != -1){
                    var result = JSON.parse(xhr.responseText);
                }else{
                    var result = xhr.responseText;
                }
                // 接收数据之后，调用回调函数
                success && success(result);
            }
        }
    }
}

以上就完成了我们ajax的封装，这种封装方法是比较推荐了，当然了解jQuery的同学应该一眼都看得出来，跟jQuery中ajax的使用方式很相似，不过我们只是简单的封装，并没有像jQuery一样做了大量兼容，以及多方面的考虑，我们的目的只是为了更加熟练地去理解和掌握ajax，在下一节会介绍jQuery中的ajax