原生ajax调用 jquery ajax接口调用接口方法

原生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 方法，如 $.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全局配置 请求拦截器 响应拦截器 封装各种请求方式

七牛云、阿里云和腾讯云云存储基础环境搭建教程