js发送请求用法介绍

一、基本介绍

JavaScript是一种能够在Web页面上实现动态行为的脚本语言，具有轻量级，可嵌入 HTML 页面，可编程，面向对象，事件驱动等特点，可与浏览器进行交互，包括请求数据，提交表单以及更新/显示内容。

在JavaScript中，我们可以通过多种方式向后端服务器发送请求，这篇文章将对几种常用的请求方式进行阐述。

二、XMLHttpRequest

XMLHttpRequest是一种原生JS对象，用于在后台与服务器交换数据，包括发送请求和接收响应，是最基础，最常见的网络请求方式。

XMLHttpRequest请求可以同步和异步两种方式进行，一般情况下都使用异步方式。异步方式的实现主要是通过回调函数和onreadystatechange属性，当readyState的属性值变化时触发回调函数。

// 创建一个HTTP请求对象
let xhr = new XMLHttpRequest();
// 创建一个异步的请求
xhr.open('GET', 'test.json', true);
// 设置监听函数
xhr.onreadystatechange = function () {
  // 当readyState的属性值变化时触发回调函数
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理返回的数据
    console.log(xhr.responseText);
  }
};
// 发送请求
xhr.send(null);

三、fetch

fetch API是一种基于JavaScript Promise 的现代API，在XMLHttpRequest的基础上进行了一定的优化，提供了更好的、更简单、更灵活的网络请求方式，但是需要注意的是fetch在不同浏览器中，其支持情况和表现可能有所不同。

fetch的基本使用方式为使用fetch()函数向指定的URL发起网络请求，然后使用Promise进行异步处理。

fetch('test.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

四、axios

Axios是一个基于Promise的HTTP客户端，用于在浏览器和 Node.js 中发送异步的HTTP请求。它由于使用方便、功能强大，在现代Web开发中被广泛应用。

与fetch类似，Axios发送请求时，返回值也是Promise对象，方便进行then和catch处理。

// 发送一个 GET 请求
axios.get('test.json')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

五、jQuery Ajax

jQuery是一个被广泛应用于Web开发中的JavaScript库，其提供的Ajax请求功能也是非常常用的，使用方便简单。

jQuery.ajax()方法可以通过多个参数进行网络请求，包括URL，type，data，dataType等，其中，type参数是指请求方式，dataType参数表示预期返回的数据类型。

$.ajax({
  url: 'test.json',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.log(error);
  }
});

六、总结

本文对JavaScript发送网络请求的几种方式进行了介绍，包括XMLHttpRequest，fetch，axios和jQuery Ajax。

每种方式都有其优缺点以及适用场景，根据具体的项目需求进行选择能够带来较好的使用体验。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com