详解JavaScript原生封装ajax请求和Jquery中的ajax请求

作者：木棉时间：2026-10-22 21:02:25浏览：203

本文详细解析了JavaScript原生Ajax请求的创建过程，包括GET和POST请求的具体实现及参数设置。同时介绍了如何对原生Ajax进行函数封装以简化调用，并对比展示了jQuery中Ajax库的使用方法及参数配置，旨在帮助前端开发者掌握局部刷新技术。

前言与概述

前言：Ajax的核心优势在于JavaScript能够与Web服务器交换数据而无需重新加载整个页面，从而实现局部刷新效果。通过浏览器与服务器之间的异步数据传输（HTTP请求，也可同步），网页可以仅请求少量信息而非完整页面。这种技术使项目体积更小、运行更快且用户体验更友好，在前端开发中占据重要地位，也是面试中的高频考点。本次测试环境为localhost本地环境。

原生Ajax实现

1、原生ajax

（1）HTML前端代码：使用GET请求方式。首先创建一个Ajax实例xhr，调用open()方法并传入三个参数：第一个为请求方式（通常为GET或POST），第二个为请求地址，第三个为布尔值（true表示异步，false表示同步）。随后调用send()发送数据（GET请求无需显式传值，数据通常拼接在URL后以键值对形式存在）。最后绑定监听函数，通过xhr.responseText获取返回数据。


  var xhr = new XMLHttpRequest() 
  xhr.open("GET","js/text.js",true) 
  xhr.send()          
  xhr.onreadystatechange = function(){  //
   if(xhr.readyState === 4&& xhr.status === 200){ 
    var data = xhr.responseText 
    var datas = JSON.parse(data) 
    console.log(datas) 
   }
  }

控制台输出

前言与概述

（2）HTML前端代码：使用POST请求方式。POST传递数据时需设置头信息，实测表明简单请求不设置头信息也可运行。此处数据通过send()方法隐式传递，其余步骤与GET请求相同。


  var xhr = new XMLHttpRequest() 
  xhr.open("POST","js/text.js",true) 
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
  xhr.send()         
  xhr.onreadystatechange = function(){  
   if(xhr.readyState === 4&& xhr.status === 200){ 
    var data = xhr.responseText 
    var datas = JSON.parse(data) 
    console.log(datas) 
   }
  }

控制台输出

前言与概述

（3）被请求js代码


{
 "name":"小明",
 "age":24,
 "array":[1,51,3,4,4,6,64]
}

原生Ajax函数封装

2、函数封装：此处提供一个封装好的Ajax方法，使用时直接调用该方法并传入所需参数即可。

参数包括请求类型type、请求地址url、传入数据data（本案例为空，但需以空字符串占位）、请求成功后的回调函数success（也可额外添加失败回调函数）。

（1）前端JS代码


   function Ajax(type, url, data, success){
   
   var xhr = null; // 初始化xhr
   if(window.XMLHttpRequest){ //兼容IE
    xhr = new XMLHttpRequest();
   } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
   }
   
   var type = type.toUpperCase();
   
   var random = Math.random(); //创建随机数
   
   if(type == 'GET'){
    if(data){
     xhr.open('GET', url + '?' + data, true); //如果有数据就拼接
    } else {
     xhr.open('GET', url + '?t=' + random, true); //如果没有数据就传入一个随机数
    }
    xhr.send();
   
   } else if(type == 'POST'){
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
   }
   
   
   xhr.onreadystatechange = function(){  // 创建监听函数
    if(xhr.readyState == 4&&xhr.status == 200){
      success(xhr.responseText);
     } 
    }
  }
   
  Ajax('get', 'js/text.js', "", function(data){ //调用函数
   console.log(JSON.parse(data));
  });

（2）被请求js代码


{
 "name":"小明",
 "age":24,
 "array":[1,51,3,4,4,6,64]
}

控制台输出

前言与概述

jQuery中的Ajax使用

3、Jquery中的Ajax（需先引入jQuery库）（1）前端简单的JS代码：jQuery中的Ajax已被库封装，可直接调用。以下为简单的Ajax请求示例，虽然参数众多，但基础用法如下。


$.ajax({
   url:"./js/text.js", 
   type:"GET",  
   dataType:"json", 
   success:function(data){ 
    console.log(data)
   },
   error:function(res){ 
    console.log("请求失败！")
   }
  })

（2）被请求js代码


{
 "name":"小明",
 "age":24,
 "array":[1,51,3,4,4,6,64]
}

控制台输出

前言与概述

以上如有不对之处，请大家多多指正，感谢大家对本站的支持。

作者最新文章

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01