原生和jQuery的Ajax用法详解

Ajax 概述

Ajax 是 Asynchronous JavaScript and XML 的缩写，即异步的 JavaScript 和 XML。Ajax 技术允许页面向服务器发送异步请求并获取数据，然后在页面上进行局部更新，不用重新加载整个页面，从而提升了用户体验。

在 JavaScript 中，可以使用原生的XMLHttpRequest对象或者使用jQuery中的 Ajax函数实现AJAX请求。下面分别介绍使用原生和 jQuery 的 Ajax 请求。

使用原生 JavaScript 发送 Ajax 请求

XMLHttpRequest 对象

在原生 JavaScript 中，使用 XMLHttpRequest 对象来实现 Ajax 请求。XMLHttpRequest对象是许多Ajax实现的基础。

实现步骤

1. 创建一个XMLHttpRequest 对象
   javascript
let xhr = new XMLHttpRequest();
2. 设置请求方式和请求地址
   javascript
xhr.open('GET', '/api/users', true);
   第一个参数是请求方式，如 GET 或 POST；第二个参数是请求URL地址；第三个参数是是否使用异步，默认是 true。
3. 发送请求：
   javascript
xhr.send();
4. 监听请求状态变化事件，并处理响应：
   javascript
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Request failed!');
}
}
};

Ajax 示例：获取用户列表

以下是一个使用原生 Ajax 发送 GET 请求并获取用户列表的实例代码：

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users', true);
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      let userList = JSON.parse(xhr.responseText);
      console.log(userList);
    } else {
      console.error('Request failed!');
    }
  }
};

使用 jQuery 发送 Ajax 请求

jQuery.ajax 函数

jQuery 提供了一个更加简洁和易用的方式发送 Ajax 请求，对浏览器的兼容性也更好。jQuery 的 $.ajax()函数封装了 XMLHttpRequest 对象。

实现步骤

以下是使用 jQuery 发送 Ajax 请求的基本格式：

$.ajax({
  url: '/api/users',
  type: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    console.error('Request failed!');
  }
});

参数说明：

• url: 请求的 URL 地址。
• type: 请求方式，如 GET 或 POST。
• success: 请求成功的回调函数。
• error: 请求失败的回调函数。

Ajax 示例：获取用户列表

以下是一个使用 jQuery 发送 GET 请求并获取用户列表的实例代码：

$.ajax({
  url: '/api/users',
  type: 'GET',
  success: function(userList) {
    console.log(userList);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    console.error('Request failed!');
  }
});

总结

本文介绍了原生 JavaScript 和 jQuery 实现 Ajax 请求的方式、代码示例、相关 API 接口及其功能。在实际开发中，对于核心代码，优先考虑原生 JavaScript 实现，可减少不必要的依赖，对性能和代码健壮性有益。而对于相对简单的需求，jQuery 的 Ajax 接口可能会更加便捷。