AJAX 每个函数 - JavaScript

Asynchronous JavaScript and XML (AJAX) 是一种能够让前端web应用更加动态的技术。AJAX基于一组JavaScript函数和XMLHttpRequest对象来实现异步HTTP数据交换。AJAX 具有高速响应、无需重载页面、不阻塞用户体验等特点。这篇文章将阐述 AJAX 的每个函，并给出相应的代码实例。

XMLHttpRequest

XMLHttpRequest 是 AJAX 的核心对象，用于与服务器异步交互。这个对象提供了发送和接收数据的方法，以及处理服务器响应的事件处理程序。

以下是 XMLHttpRequest 的常用方法：

open(method, url, async)

该函数用于制定发送 HTTP 请求的方法、URL 和异步标识。分别是：请求类型、请求地址、是否异步请求。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // true 表示异步请求
xhr.send();

send()

该函数用于发送 HTTP 请求到服务器。

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=30');

abort()

该函数用于终止当前正在执行的 AJAX 请求。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

setTimeout(() => {
  xhr.abort();
}, 3000);

setRequestHeader(name, value)

该函数用于设置 HTTP 请求头部实体中给定名称对应的值。

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=30');

以下是 XMLHttpRequest 的常用事件：

onreadystatechange

该属性每当 readyState 属性改变时都会触发一次，当 readyState==4 时表示服务器响应完成，可以获取响应数据。

let xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 获取响应数据
  }
});
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

onload

该属性类似于 onreadystatechange，不同的是只有当 HTTP 请求完成时才会触发。可以认为它是 onreadystatechange 事件处理程序的替代方法。

let xhr = new XMLHttpRequest();
xhr.addEventListener('load', () => {
  console.log(xhr.responseText); // 获取响应数据
});
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

onerror

该属性会在请求发生错误时触发。

let xhr = new XMLHttpRequest();
xhr.addEventListener('error', () => {
  console.log('请求出错！');
});
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

fetch

fetch 是现代化的 AJAX 实现，它是基于 Promise 的 API。

以下是 fetch 的常用方法：

fetch(url, options)

该函数有两个参数：请求 URL 和请求选项。返回的是一个 Promise 对象，它也有几个常用的方法，例如：then、catch 等。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

fetch(url, { method, headers, body })

该函数可以指定提交方式、请求头和 POST 请求的 body。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

jQuery AJAX

jQuery 是最流行的 JavaScript 库之一，它在 AJAX 方面也提供了很好的支持。

以下是 jQuery AJAX 的常用方法：

$.ajax(options)

该函数可以用来发送 AJAX 请求，options 是一个 JavaScript 对象，包含设置请求 URL、请求方式、请求头、请求参数以及响应格式等信息。

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  dataType: 'json',
  success: data => console.log(data),
  error: error => console.error(error)
});

$.get(url, data, success)

该函数用于通过 HTTP GET 方法从服务器获取数据。

$.get('https://api.example.com/data', { name: 'John', age: 30 }, data => console.log(data));

$.post(url, data, success)

该函数用于通过 HTTP POST 方法向服务器提交数据。

$.post('https://api.example.com/data', { name: 'John', age: 30 }, data => console.log(data));

$.getJSON(url, success)

该函数用于通过 HTTP GET 方法从服务器获取 JSON 格式的数据。

$.getJSON('https://api.example.com/data', data => console.log(data));

$.ajaxSetup(options)

该函数用于设置全局的 AJAX 默认值。

$.ajaxSetup({
  url: 'https://api.example.com/data',
  type: 'GET',
  dataType: 'json'
});

$.ajax({
  success: data => console.log(data)
});