jQuery与JS实现AJAX
AJAX是Asynchronous JavaScript and XML的缩写，意为异步的JavaScript和XML。简单来说，AJAX是一种在不重新加载整个页面的情况下更新页面的技术。这种技术允许用户更流畅地交互和更新页面内容，同时不影响整个页面的加载时间。AJAX是基于HTTP协议的，在后台与服务器进行数据交换，而无需重新加载整个页面。在Web开发中，AJAX已成为重要的技术之一。
在实现AJAX时，可以使用jQuery或者纯JavaScript来编写代码。下面分别介绍如何使用这两种方式实现AJAX。
一、使用jQuery实现AJAX
1. 引入jQuery库文件
在使用jQuery时，需要先在页面中引入jQuery库文件。可以从官网http://jquery.com/download/下载最新版的jQuery库文件，也可以使用CDN（内容分发网络）提供的jQuery库文件。
2. jQuery的AJAX方法
jQuery提供了一系列的AJAX方法，包括$.ajax()、$.get()、$.post()等。其中，$.ajax()最为灵活，可以自定义请求参数、请求方式、返回数据格式等。下面以$.ajax()为例，介绍如何使用jQuery实现AJAX。
$.ajax({
url: "test.html",
data: {
name: "张三",
age: 20
},
type: "POST",
dataType: "json",
success: function(response) {
console.log(response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
});
上面代码中，$.ajax()方法接受一个包含请求参数的对象作为参数，其中：
url：请求的URL地址；
data：发送到服务器的数据；
type：发送请求的方式，如GET或POST；
dataType：服务器返回的数据类型，如json、xml或html等；
success：请求成功后执行的回调函数；
error：请求失败时执行的回调函数。
3. jQuery的AJAX事件
除了上述方法和参数，jQuery还提供了AJAX事件，可以在请求发送前、请求成功、请求失败等不同阶段进行处理。常用的AJAX事件包括：
beforeSend：在请求发送前执行；
success：请求成功后执行；
error：请求失败后执行。
$.ajax({
url: "test.html",
beforeSend: function() {
// 请求发送前的操作
},
success: function(response) {
// 请求成功后的操作
},
error: function(jqXHR, textStatus, errorThrown) {
// 请求失败后的操作
}
});
二、使用纯JavaScript实现AJAX
1. 创建XMLHttpRequest对象
在使用JavaScript实现AJAX时，首先需要创建一个XMLHttpRequest对象，这个对象用于向服务器发送请求并接收服务器的响应。在不同的浏览器中，创建XMLHttpRequest对象的方式可能会有所不同。
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); // 非IE浏览器
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE浏览器
}
在上面的代码中，首先判断浏览器是否支持XMLHttpRequest对象，如果支持则使用new关键字创建一个XMLHttpRequest对象。如果不支持，则判断是否支持ActiveXObject对象，并使用ActiveXObject对象创建XMLHttpRequest对象。
2. 发送AJAX请求
创建XMLHttpRequest对象后，就可以使用它向服务器发送请求了。
xhr.open("POST", "test.html", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send("name=张三&age=20");
上述代码中，通过调用XMLHttpRequest对象的open()方法来配置请求，其中：
个参数指定请求方式，可以是GET或POST；
第二个参数是请求的URL地址；
第三个参数指定是否使用异步请求，一般都设置为true。
接着使用setRequestHeader()方法设置请求头信息，这里需要设置Content-Type为application/x-www-form-urlencoded。
最后通过send()方法发送请求，并在onreadystatechange事件中处理服务器返回的响应数据，readyState属性表示请求的状态，其中4表示请求已完成，status属性表示响应的状态码，200表示请求成功。
3. 使用Promise实现AJAX异步请求
Promise是ES6中新增的一个语法，用于处理异步请求的回调函数过多、嵌套过深等问题。使用Promise可以使代码结构更加清晰，易于维护。下面介绍如何使用Promise实现AJAX异步请求。
function ajax(options) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(options.method || "GET", options.url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(xhr.status);
}
}
};
xhr.send(options.data || null);
});
}
上述代码中，使用ES6的箭头函数创建了一个Promise对象，并使用XMLHttpRequest对象发送请求，最后在onreadystatechange事件中处理请求的结果，并将结果传递给Promise的resolve方法或reject方法。
使用Promise实现AJAX异步请求时，可以使用then()方法处理成功回调函数，catch()方法处理失败回调函数。例如：
ajax({
method: "POST",
url: "test.html",
data: "name=张三&age=20"
}).then(data => console.log(data))
.catch(error => console.log(error));