JavaScript XMLHttpRequest 对象池实现与用法

作者:半夏时间:2026-10-22 16:25:26浏览:374

本文介绍了一个基于 JavaScript 的 XMLHttpRequest 对象池实现。该方案通过缓存和复用 XMLHTTP 实例,优化了浏览器环境下的异步网络请求性能。代码涵盖了从 ActiveXObject 到标准 XMLHttpRequest 的多浏览器兼容性处理,以及连接、状态监听和错误处理的完整逻辑,适用于需要频繁发起 HTTP 请求的场景。

XMLHttpRequest 对象池定义与初始化

定义一个名为 Pool_xmlreq 的构造函数,用于创建和管理 XMLHttpRequest 对象池。


初始化一个名为 _cacheCase 的空数组,用于缓存已创建的 XMLHttpRequest 实例。


为 _cacheCase 对象添加一个 fetch 方法,用于从缓存中获取可用的请求对象。


在 fetch 方法内部,初始化索引变量 i 为 0,用于遍历缓存数组。


定义一个内部函数 _instance,用于创建新的 XMLHttpRequest 实例。


开始尝试创建兼容不同浏览器的 XMLHttpRequest 对象,首先尝试使用 ActiveXObject。


尝试创建 Msxml2.XMLHTTP.5.0 版本的 ActiveXObject,适用于较新版本的 Internet Explorer。


如果上述尝试失败,捕获异常并进入下一个兼容性检查步骤。


再次尝试创建标准的 XMLHttpRequest 对象,适用于现代非 IE 浏览器。


如果创建标准 XMLHttpRequest 成功,则返回该实例。


如果创建标准 XMLHttpRequest 失败,捕获异常并继续尝试其他兼容方式。


尝试创建 Msxml2.XMLHTTP 版本的 ActiveXObject,适用于旧版 Internet Explorer。


return (new ActiveXObject("Msxml2.XMLHTTP"));}


如果创建 Msxml2.XMLHTTP 失败,捕获异常并继续尝试最后一种兼容方式。


尝试创建 Microsoft.XMLHTTP 版本的 ActiveXObject,这是最旧版 Internet Explorer 的支持方式。


如果创建成功,则返回该实例。


如果所有尝试均失败,捕获异常并执行最后的错误处理。


弹出错误提示框,告知用户初始化 XMLHttpRequest 失败,并结束函数。


遍历缓存数组 _cacheCase,检查每个已存在实例的状态。


判断当前缓存中的实例是否处于未初始化状态(readyState 为 0)或已完成状态(readyState 为 4)。


如果找到状态可用的实例,直接返回该实例以供复用。


如果遍历完所有缓存实例都不可用,则调用 _instance 函数创建一个新的 XMLHttpRequest 实例。


将新创建的实例添加到缓存数组中,并返回该实例。


定义 length 方法,返回缓存数组 _cacheCase 的长度,即当前池中的实例数量。


返回 _cacheCase 数组的长度属性值。


定义 instance 方法,作为外部获取池中可用实例的接口。


调用 _cacheCase 的 fetch 方法,返回一个可用的 XMLHttpRequest 实例。


连接方法与请求处理逻辑

定义 connect 方法,用于执行具体的 HTTP 请求,参数包括方法、URL、数据和回调函数。


从对象池中获取一个可用的 XMLHttpRequest 实例,赋值给 _xmlhttpreq 变量。


使用 with 语句简化对 _xmlhttpreq 对象的操作,直接调用其方法。


调用 open 方法,以指定的 method 和 url 初始化请求,true 表示异步模式。


设置请求头 Cache-Control 为 no-cache,确保不使用缓存数据。


设置请求头 Content-Type 为 application/x-www-form-urlencoded;charset=UTF-8,指定数据格式和编码。


调用 send 方法,发送指定的数据 data 到服务器。


定义 onreadystatechange 事件处理函数,用于监听请求状态的变化。


检查 _xmlhttpreq 的 readyState 是否小于 4,如果未完全加载则直接返回 false。


如果状态未结束,函数返回 false,继续等待状态变化。


如果 readyState 为 4,检查 HTTP 状态码是否为 200(成功)或 304(未修改)。


如果状态码符合预期,调用传入的 handler 回调函数,并传递解码后的响应文本。


如果请求成功,回调函数执行后返回 true。


如果状态码不符合预期,弹出错误提示框,显示状态码信息。


如果请求失败,返回 false,结束当前请求处理。


}

对象池实例化与使用示例

实例化 Pool_xmlreq 构造函数,创建名为 xmlreq 的对象池实例。



说明如何使用该对象池进行网络请求。


调用 xmlreq.connect 方法,传入 POST 方法、目标 URL、POST 数据和回调函数来发起请求。

作者最新文章