Ajax及其应用

最新推荐文章于 2024-09-13 21:00:00 发布

良月初柒

最新推荐文章于 2024-09-13 21:00:00 发布

阅读量973

点赞数 26

文章标签： ajax 前端

本文链接：https://blog.csdn.net/weixin_72759364/article/details/136613483

版权

本文详细解释了Ajax的工作原理，包括触发事件、创建XMLHttpRequest对象、发送请求、处理响应和更新页面。同时介绍了XMLHttpRequest的关键属性、方法（如open、send、setRequestHeader）和事件（如onload、onerror、ontimeout）。并通过实际案例展示了如何在Web应用中使用Ajax获取和显示数据。

摘要由CSDN通过智能技术生成

推荐视频：

黑马程序员前端AJAX入门到实战

【尚硅谷】3小时Ajax入门到精通

一. Ajax工作原理分析：

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术，它通过在后台与服务器进行少量数据交换，实现无需刷新整个页面而更新部分页面的能力。Ajax的工作原理可以分为以下几个步骤：

1.触发事件：当用户在网页上执行某些操作（如点击按钮、输入文本等）时，JavaScript代码会触发事件。

2.创建XMLHttpRequest对象：在JavaScript中，通过创建XMLHttpRequest对象，可以发起HTTP请求，与服务器进行通信。

3.发送请求：通过XMLHttpRequest对象发送HTTP请求到服务器，请求服务器提供数据或执行某些操作。

4.处理响应：服务器接收到请求后，处理请求并生成响应数据，然后将响应数据发送回客户端。

5.更新页面：当客户端收到服务器的响应后，JavaScript代码会解析响应数据，并使用DOM操作更新网页的相应部分，从而实现页面的局部刷新。

由于Ajax使用了异步通信机制，因此页面的其他部分可以继续响应用户的操作，而不会被阻塞，从而提高了用户体验。

二. XMLHttpRequest对象的属性、方法和事件理解：

XMLHttpRequest的基本使用丨 Ajax

XMLHttpRequest对象是Ajax的核心组件，它提供了与服务器进行交互的接口。

以下是XMLHttpRequest对象的一些重要属性、方法和事件：

1.属性：

(1) onreadystatechange: 用于指定当 readyState 属性发生变化时的回调函数。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText); // 响应数据
    }
};
xhr.send();

(2) readyState: 表示XMLHttpRequest对象的状态，包括请求未初始化（0），服务器连接已建立（1），请求已接收（2），请求处理中（3），请求已完成且响应已准备好（4）

var xhr = new XMLHttpRequest();
console.log(xhr.readyState); // 输出 0

(3) responseText：表示服务器响应的文本内容，用于获取从服务器返回的响应数据。当你使用XMLHttpRequest对象发送一个HTTP请求时，服务器会返回响应数据，并将其存储在responseText属性中。

下面是一个简单的示例，演示了如何使用XMLHttpRequest对象及其responseText属性：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://example.com/api/data', true);

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log(xhr.responseText); // 输出响应数据
  } else {
    // 请求失败
    console.error('请求失败: ' + xhr.status);
  }
};

// 发送请求
xhr.send();

在上面的示例中，我们首先创建了一个XMLHttpRequest对象，然后使用open方法配置了一个GET请求，该请求将访问https://example.com/api/data这个URL。接着，我们定义了一个onload事件处理程序，当请求成功完成时，该处理程序将被调用。在这个处理程序中，我们首先检查响应的状态码，如果状态码表明请求成功（在200到299之间），则打印出responseText属性中的响应数据。

需要注意的是，responseText属性中存储的数据通常是一个字符串，因此你可以根据需要对其进行解析。例如，如果响应数据是JSON格式的，你可以使用JSON.parse()方法将其转换为JavaScript对象。

(4) status：表示HTTP响应的状态码。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        console.log(xhr.status); // 输出响应的HTTP状态码
    }
};

(5) statusText：表示HTTP响应的状态文本。

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://example.com/api/data', true);

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log('响应状态：' + xhr.statusText); // 输出响应状态文本描述
  } else {
    // 请求失败
    console.error('请求失败: ' + xhr.statusText);
  }
};

// 发送请求
xhr.send();

在这个示例中，我们使用XMLHttpRequest对象发送了一个GET请求到https://example.com/api/data这个URL。当请求完成后，我们检查响应的状态码，如果状态码表明请求成功，则使用statusText属性获取HTTP响应状态的文本描述，并将其打印到控制台中。

2.方法：

(1) open(method, url, async): 用于初始化一个新的HTTP请求。它接受三个参数：

method：表示HTTP请求的方法，比如GET、POST、PUT等。
url：表示要发送请求的URL地址。
async：一个可选的布尔值参数，表示请求是否是异步的。默认情况下，这个参数是true，表示请求是异步的。

举个🌰子：

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

(2) send(data): 发送请求到服务器。用于向服务器发送HTTP请求。这个方法接受一个可选的参数data，用于在请求中发送数据。这通常用于POST请求或其他需要在请求体中发送数据的情况。

以下是一个简单的使用send(data)方法的例子：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('POST', 'https://example.com/api/postData', true);

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log('响应数据：' + xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败: ' + xhr.status);
  }
};

// 设置请求头，如果需要的话
xhr.setRequestHeader('Content-Type', 'application/json');

// 准备要发送的数据
var dataToSend = {
  key1: 'value1',
  key2: 'value2'
};

// 将数据发送到服务器
xhr.send(JSON.stringify(dataToSend));

(3) setRequestHeader(header,value): 是 XMLHttpRequest 对象的一个方法，用于设置 HTTP 请求的请求头。通过这个方法，你可以在发送 HTTP 请求之前自定义请求头信息。这对于需要传递特

定信息给服务器的情况非常有用，例如身份验证信息、自定义标识等。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/json');

在下面示例中，我们创建了一个 XMLHttpRequest 对象，并使用 open() 方法配置了一个 GET 请求。然后，通过调用 setRequestHeader() 方法，我们设置了两个自定义请求头：Content-Type 和 Authorization。这些请求头信息在发送请求时将被包含在 HTTP 请求中。

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://example.com/api/data', true);

// 设置自定义请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer your_access_token');

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log('响应数据：' + xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败: ' + xhr.status);
  }
};

// 发送请求
xhr.send();

需要注意的是，setRequestHeader() 方法必须在调用 send() 方法之前调用，以确保设置的请求头信息能够生效。此外，一些请求头可能受到浏览器的安全策略限制，因此在设置时要确保符合相关规范和安全要求。

(4) abort(): 用于取消当前的HTTP请求。当你调用abort()方法时，XMLHttpRequest对象会立即停止当前的请求，并触发abort事件。在请求被取消后，将不再触发任何其他事件，包括load、error等事件。

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://example.com/api/data', true);

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log('响应数据：' + xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败: ' + xhr.status);
  }
};

// 发送请求
xhr.send();

// 在一段时间后取消请求
setTimeout(function() {
  xhr.abort();
  console.log('请求已取消');
}, 1000);

3.事件：

(1) onload: 当请求成功完成时触发。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onload = function () {
    console.log(xhr.responseText); // 响应数据
};
xhr.send();

(2) onerror: 当请求失败时触发。用于指定当请求发生错误时的回调函数。当请求遇到网络错误、服务器错误或其他与HTTP请求相关的错误时，onerror事件被触发。通过设置onerror属性，你可以捕获这些错误，并在发生错误时执行特定的操作。

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://example.com/api/data', true);

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log('响应数据：' + xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败: ' + xhr.status);
  }
};

// 设置请求发生错误时的回调函数
xhr.onerror = function() {
  console.error('请求发生错误');
};

// 发送请求
xhr.send();

(3) ontimeout: 当请求超时时触发。用于指定当请求超时时的回调函数。当请求在预设的时间内没有得到响应时，ontimeout事件被触发。通过设置ontimeout属性，你可以捕获请求超时的情况，并在发生超时时执行特定的操作。

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://example.com/api/data', true);

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log('响应数据：' + xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败: ' + xhr.status);
  }
};

// 设置请求超时时的回调函数
xhr.ontimeout = function() {
  console.error('请求超时');
};

// 设置请求超时时间为5秒钟
xhr.timeout = 5000; // 5秒钟

// 发送请求
xhr.send();

在这个示例中，我们创建了一个XMLHttpRequest对象，并使用open()方法配置了一个GET请求。然后，我们定义了一个onload事件处理程序，用于处理请求成功完成时的情况，以及一个ontimeout事件处理程序，用于处理请求超时的情况。我们还通过设置timeout属性将请求的超时时间设置为5秒钟。如果请求在5秒钟内没有得到响应，就会触发ontimeout事件，并在控制台中输出"请求超时"。

需要注意的是，ontimeout事件处理程序必须在调用send()方法之前设置，以确保能够正确捕获请求超时的情况。

通过使用这些属性、方法和事件，可以有效地管理XMLHttpRequest对象的行为，并与服务器进行通信。

三. Ajax应用案例：

以下是一个使用Ajax和XMLHttpRequest对象从JSONPlaceholder获取数据的示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Ajax Example</title>

<script>

  function fetchData() {

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {

      if (xhr.readyState === 4 && xhr.status === 200) {

        var data = JSON.parse(xhr.responseText);

        displayData(data);

      }

    };

    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

    xhr.send();

  }



  function displayData(data) {

    var output = document.getElementById('output');

    output.innerHTML = ''; // Clear previous data

    data.forEach(function(item) {

      var post = document.createElement('div');

      post.innerHTML = '<h2>' + item.title + '</h2><p>' + item.body + '</p>';

      output.appendChild(post);

    });

  }

</script>

</head>

<body>

<h1>Latest Posts</h1>

<button onclick="fetchData()">Fetch Data</button>

<div id="output"></div>

</body>

</html>

这个示例通过点击按钮触发 fetchData 函数，该函数创建一个新的XMLHttpRequest对象，发送GET请求到JSONPlaceholder的/posts端点，获取最新的文章数据。当请求成功完成后，数据会被解析为JSON格式，然后通过displayData函数将数据显示在页面上。

这个案例展示了如何使用Ajax和XMLHttpRequest对象从服务器获取数据，并将数据动态地显示在网页上，这在各种Web应用程序中都有广泛的应用场景，如社交媒体应用、电子商务网站等。