原生AJAX和jQuery AJAX的主要区别在于它们的实现方式和代码复杂度。
原生ajax调用接口方法
ajax是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。 过程：
创建XMLHttpRequest对象;
调用open方法传入三个参数 请求方式(GET/POST)、url、同步异步(true/false);
监听onreadystatechange事件，当readystate等于200时返回responseText;
调用send方法传递参数。
如：
// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求类型、URL 以及是否异步处理
xhr.open(‘GET’, ‘your_api_url’, true);
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
// 请求完成并且响应状态码为 200
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 处理请求成功的响应数据
console.log(xhr.responseText);
} else {
// 处理请求失败
console.error('AJAX Request was unsuccessful: ' + xhr.status);
}
}
};
// 发送请求
xhr.send();
jquery ajax调用接口
jQuery 是一个流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 AJAX 交互等操作，在 Web 开发中，我们经常需要调用接口来获取数据或执行其他操作。
1、引入 jQuery
我们需要在 HTML 文件中引入 jQuery 库，可以通过以下方式引入：
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
2、使用 jQuery 的 AJAX 方法
jQuery 提供了几种 AJAX 方法，如 . a j a x ( ) 、 .ajax()、 .ajax()、.get()、$.post() 等，这些方法可以帮助我们轻松地调用接口，下面是一些示例：
2.1 $.ajax() 方法
$.ajax() 方法是最常用的 AJAX 方法，它可以发送任何类型的 HTTP 请求，以下是一个简单的示例：
$.ajax({
url: "https://api.example.com/data", // 接口地址
type: "GET", // 请求类型，可以是 "GET"、"POST" 等
dataType: "json", // 预期服务器返回的数据类型，可以是 "json"、"xml"、"html" 等
success: function (data) {
// 请求成功时的回调函数，data 是服务器返回的数据
console.log(data);
},
error: function (jqXHR, textStatus, errorThrown) {
// 请求失败时的回调函数
console.error("请求失败：", textStatus, errorThrown);
},
});
2.2 $.get() 方法
$.get() 方法是 $.ajax() 的一个简化版本，用于发送 “GET” 请求，以下是一个简单的示例：
$.get("https://api.example.com/data", function (data) {
// 请求成功时的回调函数，data 是服务器返回的数据
console.log(data);
});
2.3 $.post() 方法
$.post() 方法是 $.ajax() 的一个简化版本，用于发送 “POST” 请求，以下是一个简单的示例：
$.post("https://api.example.com/data", { key: "value" }, function (data) {
// 请求成功时的回调函数，data 是服务器返回的数据
console.log(data);
});
3、处理响应数据
在上面的示例中，我们使用了回调函数来处理请求成功或失败时的情况，当请求成功时，我们可以从 data 参数中获取服务器返回的数据，以下是一些常见的数据处理操作：
console.log(data)：打印数据到控制台。
alert(data)：弹出一个包含数据的提示框。
$("#result").html(data)：将数据显示在指定的 HTML 元素中。
$("#result").append(data)：将数据显示在指定的 HTML 元素的末尾。
$("#result").prepend(data)：将数据显示在指定的 HTML 元素的开头。
$("#result").text(data)：将数据显示在指定的 HTML 元素中，忽略 HTML 标签。
4、发送带参数的请求
我们需要向接口发送一些参数，可以使用 data 参数将这些参数添加到请求中，以下是一些示例：
// URL查询参数示例（GET请求）
var queryParams = "key=value&key2=value2";
var urlWithParams = "https://api.example.com/data?" + queryParams;
$.get(urlWithParams, function (data) {
// ...处理响应数据...
});
// JSON格式的参数示例（POST请求）
var params = { key: "value", key2: "value2" };
$.post("https://api.example.com/data", params, function (data) {
// ...处理响应数据...
});
5、异步和同步请求的区别与选择
jQuery AJAX 默认是异步的，这意味着在请求过程中，浏览器不会等待服务器的响应，而是继续执行其他任务，这对于提高页面加载速度和用户体验是非常有益的，有时候我们需要等待服务器的响应，例如在提交表单之前检查用户名是否已存在，这时，可以使用 async: false 选项将请求设置为同步：
$.ajax({
url: "https://api.example.com/checkUsername", // ...其他选项...,
async: false, // 确保请求是同步的（不推荐使用）
});
从上面的代码可以看出，原生的AJAX实现相对复杂，需要处理的细节更多，如果需要进行多个请求，需要写多个类似的代码。而jQuery AJAX则通过封装原生的AJAX，提供了更简洁的方式，使得代码更易于阅读和维护。
总结：
原生AJAX：复杂，需要处理的细节多，如果需要进行多个请求，需要写多个类似的代码。
jQuery AJAX：简洁，通过封装原生的AJAX，提供了更易于阅读和维护的方式。
简单易用的分页插件 原生HTML分页功能
前端axios全局配置 请求拦截器 响应拦截器 封装各种请求方式
七牛云、阿里云和腾讯云云存储基础环境搭建教程
