深入浅出解构AJAX技术：原生JavaScript搭建AJAX请求实操指南

2023-04-27 15:28:55

AJAX：用原生 JavaScript 实现异步网页开发

AJAX 简介

AJAX（全称 Asynchronous JavaScript and XML）是一种技术，允许 Web 页面在不刷新整个页面内容的情况下与服务器通信。这意味着你可以实时更新网页上的数据，而无需等待整个页面重新加载，从而创造更加流畅和响应迅速的用户体验。

AJAX 的优势

AJAX 带来了诸多优势，包括：

异步通信： AJAX 允许页面在后台与服务器通信，而无需中断用户的操作。
实时更新： 当服务器上的数据发生变化时，页面可以即时反映这些变化，无需用户手动刷新。
获取动态数据： AJAX 可以从服务器获取动态数据，例如用户输入、商品信息或天气预报。
提高性能： 通过减少页面刷新，AJAX 可以显著提高网页加载速度和整体性能。

使用原生 JavaScript 搭建 AJAX 请求

要使用原生 JavaScript 搭建 AJAX 请求，你需要执行以下步骤：

创建XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

设置请求参数：

xhr.open('GET', 'data.json', true);

'GET' 表示请求类型（也可以是 'POST'）。
'data.json' 是请求的 URL。
true 表示这是一个异步请求。

发送请求：

xhr.send();

处理请求响应：

xhr.onload = function() {
  if (xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    // 使用数据
  }
};

xhr.status 是请求状态码（200 表示成功）。
xhr.responseText 是请求响应体（包含服务器返回的数据）。
JSON.parse(xhr.responseText) 将 JSON 字符串解析为 JavaScript 对象。

示例代码

以下示例代码演示了如何使用原生 JavaScript 进行 AJAX 请求以获取服务器上的 JSON 数据并将其显示在网页上：

var xhr = new XMLHttpRequest();

xhr.open('GET', 'data.json', true);

xhr.onload = function() {
  if (xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);

    var output = '<ul>';
    for (var i = 0; i < data.length; i++) {
      output += '<li>' + data[i].name + '</li>';
    }
    output += '</ul>';

    document.getElementById('result').innerHTML = output;
  }
};

xhr.send();