原生JavaScript封装轻量级AJAX工具：仿jQuery调用风格

核心功能设计目标

该封装工具主要解决以下痛点：

• 减少重复编写XMLHttpRequest初始化与状态判断的代码。
• 统一数据处理逻辑，自动处理GET请求的参数拼接与POST请求的头部设置。
• 提供完整的生命周期回调（complete, success, error），便于错误追踪。
• 支持实例化复用，允许在不创建新对象的情况下修改部分参数（如页码）再次发起请求。

准备工作与兼容性说明

在使用前需注意以下几点：

1. 浏览器兼容：现代浏览器均支持XMLHttpRequest。为兼容极老旧版本IE（如IE6-7），源码中包含了ActiveXObject("Microsoft.XMLHTTP")的回退机制，但当前主流开发建议直接使用标准对象。
2. 数据类型限制：原生实现通常只返回responseText或responseXML。若后端返回JSON字符串，需在success回调中手动使用JSON.parse()进行解析，而非像jQuery那样自动转换。
3. 模块作用域：推荐将代码包裹在IIFE（立即执行函数表达式）中，避免全局变量污染。

第1步：封装XMLHttpRequest创建工厂

首先，创建一个内部函数用于实例化XHR对象，确保在不同环境中都能获取正确的请求实例。

var createXHR = function() {
    return ('XMLHttpRequest' in window) ? function() {
        return new XMLHttpRequest();
    } : function() {
        return new ActiveXObject("Microsoft.XMLHTTP");
    };
}();

第2步：构建主构造函数与参数解析

定义主函数xhr，接收配置对象ops，并设置默认值。核心属性包括url（请求地址）、method（请求方法，默认GET）、data（传输数据对象）、async（是否异步，默认true）以及各类回调函数。

var xhr = function(ops) {
    var root = this,
        req = createXHR();

    // 设置基础属性
    root.url = ops.url || '';
    root.method = (ops.method || 'GET').toUpperCase();
    root.async = ops.async !== false; // 默认为true
    root.data = ops.data || {};
    
    // 回调函数保护，防止未定义导致报错
    root.complete = ops.complete || function() {};
    root.success = ops.success || function() {};
    root.error = ops.error || function(status) { console.warn('Request failed:', status); };

第3步：数据格式化与发送逻辑

实现send方法，负责组装请求头、处理GET/POST差异并触发发送。对于GET请求，数据拼接至URL；对于POST请求，设置Content-type并将数据放入请求体。

    root.send = function() {
        if (!root.url) throw new Error('URL is required');

        var dataString = Object.keys(root.data).map(function(key) {
            return encodeURIComponent(key) + '=' + encodeURIComponent(root.data[key]);
        }).join('&');

        if (root.method === 'GET') {
            root.url += (root.url.indexOf('?') === -1 ? '?' : '&') + dataString;
            req.open(root.method, root.url, root.async);
            req.send();
        } else {
            req.open(root.method, root.url, root.async);
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            req.send(dataString);
        }

        // 绑定状态监听
        req.onreadystatechange = function() {
            if (req.readyState === 4) {
                root.complete();
                if (req.status === 200) {
                    root.success(req.responseText);
                } else {
                    root.error(req.status);
                }
            }
        };
    };

第4步：支持实例化复用的 setData 方法

为了优化如“分页”等场景，允许在保留其他参数不变的情况下，局部更新data或更换url，然后重新调用send。

    root.setData = function(newData) {
        for (var key in newData) {
            root.data[key] = newData[key];
        }
        return root;
    };

    // 初始化时若提供了URL，则自动发起一次请求
    if (root.url && typeof root.send === 'function') {
        // 这里可以选择不自动发送，而是暴露API供外部控制
        // 本示例设计中，由使用者显式调用 send()
    }

    return root;
};

实战应用：分页请求复用示例

以下展示了如何利用上述封装特性，实现高效的分页加载。初始化时传入固定参数，翻页时仅修改页码并重新发送。

// 1. 初始化xhr实例
var pageRequest = xhr({
    url: '/api/getData',
    method: 'POST',
    data: {
        pageSize: 10,
        category: 'news'
    },
    success: function(data) {
        renderPage(JSON.parse(data));
    }
});

// 2. 用户点击第二页
function goToPage(pageNumber) {
    pageRequest.setData({ pageNumber: pageNumber });
    pageRequest.send(); // 复用实例，局部更新数据，再次发送
}

注意事项与优化建议

• CORS跨域问题：原生AJAX受同源策略限制，若需跨域访问，后端需正确配置CORS响应头，或使用代理服务器。
• AbortController：在现代项目中，建议集成AbortController以便在用户快速切换页面时取消未完成的请求，节省带宽并防止数据冲突。
• FormData对象：若涉及文件上传，应将简单的键值对序列化替换为FormData对象，并移除setRequestHeader中的Content-type设置（浏览器会自动添加boundary）。

以上就是原生JavaScript封装通用AJAX函数的详细内容，更多关于原生前端网络请求的资料请关注本站其它相关文章！