原生JS实现Ajax的面向对象封装

作者：小括号时间：2026-10-29 20:17:41浏览：644

本文介绍如何在原生JavaScript中封装Ajax请求，通过面向对象的方式简化XMLHttpRequest的使用。文章分析了传统Ajax调用的复杂性，并提供了封装后的代码示例，旨在提高代码复用性并分离业务逻辑与请求处理。

Ajax基础与原生实现

AJAX（Asynchronous JavaScript and XML）技术允许网页在后台与服务器进行少量数据交换，从而实现页面的局部异步更新，无需重新加载整个网页。在JavaScript中发起Ajax请求通常涉及三个核心步骤：

第一步是创建XMLHttpRequest对象。
第二步是发送请求，这包括配置链接（open）和实际发送（send）。
第三步是处理服务器返回的响应。

若不使用任何JavaScript框架，直接编写Ajax代码通常如下所示：


<span style="font-size:14px;">var xmlHttp = xmlHttpCreate();//创建对象 
xmlHttp.onreadystatechange = function(){//响应处理 
  if(xmlHttp.readyState == 4){ 
    console.info("response finish"); 
    if(xmlHttp.status == 200){ 
       console.info("reponse success"); 
      console.info(xmlHttp.responseText); 
    } 
  } 
} 
xmlHttp.open("get","TestServlet",true);//打开链接 
 
xmlHttp.send(null);//发送请求 
 
function xmlHttpCreate() { 
  var xmlHttp; 
  try { 
    xmlHttp = new XMLHttpRequest;// ff opera 
  } catch (e) { 
    try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie 
    } catch (e) { 
      try { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 
 
      } 
    } 
  } 
  return xmlHttp; 
} 
 
console.info(xmlHttpCreate());</span>

Ajax的面向对象封装

在复杂的业务逻辑中直接使用这种原始方式会导致代码臃肿且难以复用。此外，由于业务逻辑往往需要在服务器响应成功后执行，开发者不得不将相关操作硬编码在onreadystatechange回调函数中。为了实现代码复用，我们可以采取以下优化措施：

首先，将服务器响应成功后的业务逻辑处理权交给开发人员，通过回调函数传递。
其次，对Ajax请求进行面向对象的封装。

经过上述处理后，代码结构应如下所示：


<pre code_snippet_id="342814" snippet_file_name="blog_20140513_2_2489549" name="code" class="javascript">window.onload = function() { 
  document.getElementById("hit").onclick = function() { 
    console.info("开始请求"); 
    ajax.post({ 
        data : 'a=n', 
        url : 'TestServlet', 
        success : function(reponseText) { 
          console.info("success : "+reponseText); 
        }, 
        error : function(reponseText) { 
          console.info("error : "+reponseText); 
        } 
    }); 
  } 
} 
 
var ajax = { 
  xmlHttp : '', 
  url:'', 
  data:'', 
  xmlHttpCreate : function() { 
    var xmlHttp; 
    try { 
      xmlHttp = new XMLHttpRequest;// ff opera 
    } catch (e) { 
      try { 
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie 
      } catch (e) { 
        try { 
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) { 
 
        } 
      } 
    } 
    return xmlHttp; 
  }, 
  post:function(jsonObj){ 
    ajax.data = jsonObj.data; 
    ajax.url = jsonObj.url; 
    //创建XMLHttp对象，打开链接、请求、响应 
    ajax.xmlHttp = ajax.xmlHttpCreate(); 
    ajax.xmlHttp.open("post",ajax.url,true); 
    ajax.xmlHttp.onreadystatechange = function(){ 
      if(ajax.xmlHttp.readyState == 4){ 
        if(ajax.xmlHttp.status == 200){ 
          jsonObj.success(ajax.xmlHttp.responseText); 
        }else{ 
          jsonObj.error(ajax.xmlHttp.responseText); 
        } 
      } 
    } 
    ajax.xmlHttp.send(ajax.data); 
  } 
};

上述封装实现了类似jQuery中Ajax的操作体验，希望这对大家的学习有所帮助。

作者最新文章

JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败

2026-11-05 16:08:46

JavaScript常见SyntaxError语法错误排查与修复方法

2026-11-05 13:58:44

JS中slice、substring和substr截取字符串的区别

2026-11-05 13:43:47

JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型

2026-11-05 11:53:32

为什么JS数组push后得到的是数字而不是数组？

2026-11-05 09:59:18