异步请求

Ajax相关

AJAX（Asynchronous JavaScript and XML）是一种用于在客户端和服务器之间进行异步数据交换的技术。通过 AJAX，可以在不刷新整个页面的情况下向服务器发送请求并获取数据，然后使用 JavaScript 更新页面的部分内容。

ajax返回的状态

Ajax 请求状态 readyState：

0：未初始化。表示 XMLHttpRequest 对象已创建，但尚未调用 open() 方法。
1：正在加载。表示 open() 方法已被调用，但尚未调用 send() 方法。
2：已加载。表示 send() 方法已被调用，且已收到响应头。
3：交互中。表示正在接收响应体。
4：完成。表示响应已完全接收。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log('请求成功');
            console.log(xhr.responseText);
        } else {
            console.error('请求失败，状态码为：', xhr.status);
        }
    }
};
xhr.send();

实现一个 AJAX 请求

实现一个 AJAX 请求的基本步骤如下：

创建一个 XMLHttpRequest 对象（或使用新的 fetch API）。
设置请求的方法（GET、POST 等）和 URL。
可选地设置请求的头部信息。
注册一个回调函数来处理响应结果。
发送请求到服务器。
在回调函数中处理响应数据。

下面是一个使用原生 JavaScript 实现 AJAX 请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      console.log(response);
    } else {
      console.error('Error: ' + xhr.status);
    }
  }
};
xhr.send();

接下来，我们可以使用 Promise 对象来封装 AJAX 请求，以便更方便地处理异步操作。下面是使用 Promise 封装 AJAX 请求的示例：

function ajaxRequest(url, method) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(new Error('Request failed: ' + xhr.status));
        }
      }
    };
    xhr.send();
  });
}

// 使用封装的 AJAX 请求
ajaxRequest('https://api.example.com/data', 'GET')
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.error(error);
  });

在上述代码中，我们创建了一个名为 ajaxRequest 的函数，它返回一个 Promise 对象。在 Promise 的回调函数中，执行 AJAX 请求并根据请求的结果调用 resolve 或 reject。然后，可以使用 then 方法处理成功的响应结果，使用 catch 方法处理错误。这种封装可以更好地处理异步操作的结果，使代码更具可读性和可维护性。

写出原生Ajax某种顺序一次执行，有什么办法呢？如何处理ajax跨域

如何实现一个ajax请求？如果我想发出两个有顺序的ajax需要怎么做？

原生JS的ajax

将原生的 ajax 封装成 promise

var myNewAjax = function (url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send(data);
    xhr.onreadystatechange = function () {
      if (xhr.status == 200 && readyState == 4) {
        var json = JSON.parse(xhr.responseText);
        resolve(json);
      } else if (xhr.readyState == 4 && xhr.status != 200) {
        reject("error");
      }
    };
  });
};

FAQ?

Fetch和Ajax比有什么优缺点？

ajax、axios、fetch 的区别

ajax、axios 和 fetch 都是用于在 JavaScript 中进行异步网络请求的工具，它们之间有以下区别：

API 设计和语法：
- ajax：ajax 并不是一个具体的库或工具，而是指异步 JavaScript 和 XML。它是一种基于原生 XMLHttpRequest 对象实现的异步请求方法，没有统一的 API 设计，开发者需要手动编写请求代码和处理回调。
- axios：axios 是一个流行的第三方库，提供了简洁而强大的 API。它基于 Promise 实现，使用链式调用的方式进行请求配置和处理响应。
- fetch：fetch 是现代浏览器提供的原生方法，用于进行网络请求。它基于 Promise 实现，使用 Promise 的方式进行请求配置和处理响应。
浏览器兼容性：
- ajax：XMLHttpRequest 是原生 JavaScript 提供的网络请求对象，具有广泛的浏览器兼容性。
- axios：axios 是一个基于 XMLHttpRequest 的库，可以在现代浏览器和较旧的浏览器中使用。
- fetch：fetch 是现代浏览器提供的原生方法，对于较旧的浏览器需要使用 polyfill 进行兼容处理。
功能和特性：
- ajax：由于 ajax 并不是一个具体的库，它的功能和特性取决于开发者自己编写的代码和所使用的请求库。
- axios：axios 提供了许多高级功能，如拦截器、请求和响应的转换、取消请求等。它还提供了更友好的错误处理机制。
- fetch：fetch 是一个简单的 API，提供了基本的请求和响应功能，但在某些方面功能相对较弱，如没有原生的超时控制和请求取消机制。
请求和响应处理：
- ajax 和 axios：ajax 和 axios 都提供了丰富的配置选项，可以设置请求头、请求方法、请求体等。它们可以使用回调函数或 Promise 来处理响应结果。
- fetch：fetch 使用 Promise 来处理响应，它返回一个 Promise 对象，可以使用 then 和 catch 方法来处理响应结果。但它的 API 设计相对较低级，使用起来不够简洁和友好。

综上所述，ajax 是基于原生 XMLHttpRequest 的异步请求方法，没有统一的 API 设计；axios 是一个功能强大、易用的第三方库，基于 XMLHttpRequest 实现；fetch 是现代浏览器原生提供的方法，使用 Promise 实现。

异步请求

Ajax相关​

ajax返回的状态​

实现一个 AJAX 请求​

写出原生Ajax某种顺序一次执行，有什么办法呢？如何处理ajax跨域​

如何实现一个ajax请求？如果我想发出两个有顺序的ajax需要怎么做？​

原生JS的ajax​

将原生的 ajax 封装成 promise​

FAQ?​

Fetch和Ajax比有什么优缺点？​

ajax、axios、fetch 的区别​