本文详细解析了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]
}控制台输出
以上如有不对之处，请大家多多指正，感谢大家对本站的支持。