探索高级AJAX技术：深入研究异步请求和响应处理

2023-12-15 14:45:53

?

?

?

?大家有关于JavaScript知识点不知道可以去

🎉博客主页：阿猫的故乡

🎉系列专栏：JavaScript专题栏

🎉ajax专栏：ajax知识点

🎉欢迎关注：👍点赞🙌收藏??留言

目录

学习目标：

学习内容：

学习时间：

学习产出：

异步请求和响应概述

异步请求与同步请求的区别

?XMLHttpRequest对象

发送异步请求和处理响应

?Fetch API

?异步请求的进一步处理

?JSON数据的异步加载和解析

?跨域请求

进一步的案例研究和实践

学习目标：

深入研究异步请求和响应处理

学习内容：

  1. 异步请求和响应概述

  2. XMLHttpRequest对象

  3. Fetch API

  4. 异步请求的进一步处理

  5. JSON数据的异步加载和解析

  6. 跨域请求

  7. 进一步的案例研究和实践

学习时间：

提示：这里可以添加计划学习的时间

例如：

  • 周一至周五晚上 7 点—晚上9点
  • 周六上午 9 点-上午 11 点
  • 周日下午 3 点-下午 6 点

学习产出：

异步请求和响应概述

AJAX（Asynchronous JavaScript and XML）是一种在Web应用程序中使用的技术，它通过使用JavaScript和XML（或JSON）来实现在后台与服务器进行异步通信，从而实现页面内容的局部更新，而不需要完全刷新整个页面。

AJAX的基本原理和工作流程如下：

  1. 前端页面向服务器发送异步请求：当用户在前端页面上执行某个操作（例如点击按钮），JavaScript代码会创建一个XMLHttpRequest对象，然后通过该对象向后端服务器发送异步请求。

  2. 后端服务器处理请求并返回结果：服务器收到请求后，会根据请求的内容进行相应的处理。服务器可以返回HTML、XML、JSON等格式的数据。

  3. 前端页面处理返回结果：当服务器返回结果时，JavaScript代码会通过回调函数处理返回的数据。根据返回的数据，前端页面可以动态更新部分页面内容，而不需要整个页面刷新。

  4. 更新页面内容：根据返回的数据，前端页面可以使用JavaScript代码来更新页面内容。这包括更新文本内容、显示隐藏元素、修改CSS样式等。

总体来说，AJAX的工作流程可以总结为以下几个步骤：前端发送请求、后端处理请求、后端返回结果、前端处理结果。通过这种方式，实现了异步通信和局部更新页面内容的效果，提升了用户体验和性能。

异步请求与同步请求的区别

?

异步请求和同步请求是AJAX中两种常见的请求方式，它们的主要区别在于请求和处理的方式以及对页面的影响。

异步请求：

  • 异步请求是指在发送请求的同时，前端页面不会等待服务器的响应，而是可以继续执行其他操作。
  • 异步请求通过使用回调函数处理返回的结果，不会阻塞其他代码的执行。
  • 异步请求可以提高用户体验，因为页面不需要等待服务器响应就可以进行其他操作，例如用户可以继续浏览页面或者与页面进行交互。
  • 异步请求通常使用XMLHttpRequest对象或者更现代化的Fetch API来实现。

同步请求：

  • 同步请求是指在发送请求之后，前端页面会一直等待服务器的响应，期间无法进行其他操作。
  • 同步请求会阻塞其后的代码执行，直到服务器响应返回或者超时。
  • 同步请求可能会降低用户体验，因为页面在等待服务器响应时无法进行其他操作，体验会被中断。
  • 同步请求通常使用XMLHttpRequest对象的open和send方法来实现。

在实际开发中，异步请求更为常见和推荐，因为它可以提高用户体验，允许页面进行其他操作而不被阻塞。同步请求仅在特定情况下使用，例如需要确保请求的顺序和依赖关系时。

?XMLHttpRequest对象

XMLHttpRequest对象是AJAX的核心，它提供了在浏览器中与服务器进行异步数据交互的功能。

XMLHttpRequest对象具有以下一些常用的属性和方法：

属性：

  • readyState: 表示请求的状态，其值变化的顺序为 0(未初始化) -> 1(打开) -> 2(发送) -> 3(接收) -> 4(完成)。
  • status: 表示服务器响应的状态码，如200表示成功，404表示资源未找到。
  • responseText: 作为字符串表示的响应内容。
  • responseXML: 作为XML文档对象表示的响应内容。
  • onreadystatechange: 当readyState属性发生变化时触发的事件。

方法：

  • open(method, url, async): 创建一个新的请求，指定请求的方法（如GET或POST）、请求的URL和是否使用异步方式。
  • send(data): 发送请求，如果是POST请求，可以通过data参数发送数据。
  • setRequestHeader(header, value): 设置请求头，例如设置Content-Type。
  • abort(): 取消当前的请求。

示例代码：

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

通过以上代码，我们创建了一个XMLHttpRequest对象并发送了一个GET请求到指定的URL。在onreadystatechange事件中，我们检查了请求的状态并判断了响应的状态码，如果请求成功，我们打印出了响应内容。

XMLHttpRequest对象是AJAX的核心，它提供了在浏览器中与服务器进行异步数据交互的功能。

XMLHttpRequest对象具有以下一些常用的属性和方法：

属性：

  • readyState: 表示请求的状态，其值变化的顺序为 0(未初始化) -> 1(打开) -> 2(发送) -> 3(接收) -> 4(完成)。
  • status: 表示服务器响应的状态码，如200表示成功，404表示资源未找到。
  • responseText: 作为字符串表示的响应内容。
  • responseXML: 作为XML文档对象表示的响应内容。
  • onreadystatechange: 当readyState属性发生变化时触发的事件。

方法：

  • open(method, url, async): 创建一个新的请求，指定请求的方法（如GET或POST）、请求的URL和是否使用异步方式。
  • send(data): 发送请求，如果是POST请求，可以通过data参数发送数据。
  • setRequestHeader(header, value): 设置请求头，例如设置Content-Type。
  • abort(): 取消当前的请求。

示例代码：

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

通过以上代码，我们创建了一个XMLHttpRequest对象并发送了一个GET请求到指定的URL。在onreadystatechange事件中，我们检查了请求的状态并判断了响应的状态码，如果请求成功，我们打印出了响应内容。

发送异步请求和处理响应

创建和初始化XMLHttpRequest对象的步骤如下：

  1. 创建XMLHttpRequest对象：使用new XMLHttpRequest()创建一个新的XMLHttpRequest对象。

  2. 初始化请求：使用open()方法来初始化请求。open()方法接受三个参数：请求的方法（GET, POST等），请求的URL和是否异步发送请求的布尔值。

  3. 设置请求头：如果需要设置请求头，可以使用setRequestHeader()方法来设置。例如，如果需要发送JSON数据，可以设置请求头为'Content-Type', 'application/json'。

  4. 发送请求：使用send()方法来发送请求。对于GET请求，可以将请求参数作为URL的一部分，在open()方法中将URL和请求参数连接起来；对于POST请求，可以将请求参数作为send()方法的参数。

  5. 处理响应：可以使用onreadystatechange事件监听XMLHttpRequest对象的状态变化。当readyState状态为4（已完成）时，可以使用status属性来判断响应的状态码。如果状态码是200，表示请求成功，可以使用responseText或responseXML属性来获取响应的内容。

XMLHttpRequest对象的高级功能包括：

  1. 设置请求头：可以使用setRequestHeader()方法来设置请求头。例如，可以设置请求头为'Content-Type', 'application/json'来发送JSON数据。

  2. 发送表单数据：可以使用FormData对象来发送表单数据。可以将表单元素的值添加到FormData对象中，然后将FormData对象作为send()方法的参数进行发送。

  3. 监听进度：可以使用onprogress事件监听上传或下载的进度。可以使用loaded属性获取已经传输的数据大小，使用total属性获取总共需要传输的数据大小，从而计算出传输的百分比。

  4. 取消请求：可以使用abort()方法来取消请求。

  5. 超时处理：可以使用timeout属性来设置超时时间，如果请求超过指定的时间还没有返回，可以触发超时事件。

  6. 设置凭证：可以使用withCredentials属性将凭证（如cookie）发送给服务器，以进行身份验证或会话跟踪。

  7. 跨域请求：可以使用Access-Control-Allow-Origin响应头来允许跨域请求，或使用CORS（跨源资源共享）来处理跨域请求。

总结来说，通过创建和初始化XMLHttpRequest对象，可以发送异步请求并在响应返回后进行处理。XMLHttpRequest对象还提供了一系列的高级功能，可以根据具体的需求进行使用。

?Fetch API

Fetch API是一种用于发送和接收HTTP请求的现代浏览器API，它提供了一种更简洁、更强大的方式来处理网络请求。相比于传统的XMLHttpRequest对象，Fetch API更易于使用和理解。

Fetch API的特点包括：

  1. Promise-based：Fetch API使用Promise来处理请求和响应，使得异步操作更加方便和可控。可以使用Promise的then()和catch()方法来处理请求成功和失败的情况。

  2. 简洁的API：Fetch API提供了一组简洁而灵活的方法来进行请求和处理响应。其中最常用的方法是fetch()，它接受一个URL作为参数并返回一个Promise对象。

  3. 支持流式数据：Fetch API支持流式数据传输，可以通过使用Response对象上的body属性来处理流式数据。

  4. 可以使用Headers对象来设置请求头和处理响应头。

  5. 支持跨域请求：Fetch API默认支持跨域请求，但在发送跨域请求时需要注意设置CORS（跨源资源共享）相关的选项。

使用Fetch API发送请求的基本步骤如下：

  1. 构建请求对象：使用Request对象来构建请求，可以通过传入URL和可选的配置选项来创建Request对象。

  2. 发送请求：使用fetch()方法来发送请求，fetch()方法返回一个Promise对象，可以使用then()方法来处理响应。

  3. 处理响应：在then()方法中，可以使用Response对象来处理响应。可以通过Response对象上的一系列方法和属性来获取响应的状态码、请求头、响应头和响应体等。

  4. 处理错误：使用catch()方法来处理请求错误，例如网络错误或请求被服务器拒绝等。

当使用Fetch API发送请求时，通常会遵循以下的代码结构：

fetch(url, options)
  .then(response => {
    // 处理响应
    // 返回一个Promise对象
  })
  .catch(error => {
    // 处理错误
  });

在这个代码中，首先使用fetch()方法发送请求，它接受一个URL和可选的配置选项作为参数。fetch()方法返回一个Promise对象，允许我们使用then()和catch()方法来处理请求和响应。

在then()方法中，我们可以使用response对象来处理响应。Response对象提供了一系列的方法和属性，可以获取响应的状态码、请求头、响应头和响应体等。

fetch(url, options)
  .then(response => {
    if (response.ok) {
      // 如果响应成功（状态码为200-299），则返回响应的JSON数据
      return response.json();
    } else {
      // 如果响应失败，则抛出错误
      throw new Error('请求失败');
    }
  })
  .then(data => {
    // 处理返回的JSON数据
  })
  .catch(error => {
    // 处理请求错误
  });

上面的代码演示了如何处理响应成功和失败的情况。如果响应成功（状态码为200-299），我们可以使用response.json()方法来解析响应的JSON数据。如果响应失败，则抛出一个错误。

在catch()方法中，我们可以处理请求错误，例如网络错误或请求被服务器拒绝等。

配置选项（options）是可选的，可以用来设置请求的方法、请求头、请求体和认证信息等。一些常见的选项包括：

  • method：请求的方法，例如GET、POST等，默认为GET。
  • headers：请求头，可以使用Headers对象或者一个普通对象来设置。
  • body：请求体，可以是一个Blob、BufferSource、FormData、URLSearchParams或者一个普通对象。
  • mode：请求的模式，例如cors、no-cors、same-origin等，默认为cors。
  • credentials：请求发送时是否携带cookie等认证信息，默认为same-origin。
  • cache：请求的缓存模式，例如default、no-store、reload等，默认为default。

以上是Fetch API的基本用法，通过使用fetch()方法和Response对象，我们可以轻松地发送请求和处理响应。

?

Fetch API的优点是它提供了更简洁、更强大的API来处理网络请求，并且与现代的异步操作方法（Promise）相结合，使代码更易于理解和维护。但也需要注意兼容性问题，因为Fetch API在一些旧版本的浏览器中不被支持。可以考虑使用polyfill或者库（如axios等）来处理兼容性问题。

?异步请求的进一步处理

异步请求的进一步处理可以包括以下几个方面：

  1. 错误处理：处理请求过程中可能出现的错误，例如网络连接错误、服务器返回错误等。可以通过添加错误处理函数或使用try-catch语句来捕获并处理错误。

  2. 超时处理：如果请求处理时间过长，可以设置一个超时时间，如果请求在超时时间内没有返回结果，则可以进行相应的处理操作，例如重新发送请求、提示用户等。

  3. 进度跟踪：如果请求过程较长，可以通过回调函数或事件来跟踪请求的进度，以便在需要时更新用户界面或显示进度条等。

  4. 数据处理：根据返回的数据类型，可以进行相应的数据处理操作，例如解析JSON数据、提取关键信息等。

  5. 缓存处理：如果请求的数据可以缓存，可以在请求返回后将数据存储在本地缓存中，以便下次使用。

  6. 并发处理：如果有多个异步请求需要处理，可以使用Promise.all、async/await等方式进行并发处理，并等待所有请求都完成后再进行下一步操作。

  7. 销毁处理：如果某个异步请求不再需要，可以取消该请求，释放资源。

?

当使用异步请求时，可以使用一些进一步的处理方式来处理请求和响应。下面是一些常见的处理方式以及相关的代码解释：

  1. 错误处理：
fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('请求错误');
    }
    return response.json();
  })
  .catch(error => {
    console.error(error);
    // 错误处理代码
  });

在fetch请求的链式调用中，可以通过检查response.ok属性来判断响应是否成功。如果响应不成功，则可以通过throw关键字抛出一个错误。在链式调用中，可以使用.catch方法捕获并处理错误。

  1. 超时处理：
const timeoutPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('请求超时')), 5000);
});

Promise.race([fetch(url), timeoutPromise])
  .then(response => {
    // 请求完成处理代码
  })
  .catch(error => {
    console.error(error);
    // 错误处理代码
  });

在上述代码中，通过创建一个Promise来模拟超时处理。使用Promise.race方法，将fetch请求和超时Promise传入，只要其中一个完成或拒绝，就会执行相应的处理代码。

  1. 进度跟踪：
fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  },
  signal: controller.signal
})
  .then(response => {
    // 正常处理代码
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求被中止');
      // 中止处理代码
    } else {
      console.error(error);
      // 错误处理代码
    }
  });

const controller = new AbortController();
const signal = controller.signal;

// 中止请求
controller.abort();

在上述代码中，可以使用AbortController和AbortSignal来中止请求。通过传递signal给fetch的options对象中的signal属性，可以中止该请求。

  1. 数据处理：
fetch(url)
  .then(response => response.json())
  .then(data => {
    // 数据处理代码
  })
  .catch(error => {
    console.error(error);
    // 错误处理代码
  });

在上述代码中，使用response.json()方法来将响应数据解析为JSON格式。通过then方法处理解析后的数据。

这些是一些常见的异步请求进一步处理方式和代码解释，可以根据实际需求进行相应的处理操作。

总之，进一步处理异步请求需要根据具体情况来确定，以上提到的是一些常见的处理方式。

?JSON数据的异步加载和解析

当需要异步加载和解析JSON数据时，可以使用Fetch API来发送异步请求，并通过Promise链式调用来处理响应数据。以下是一个示例的代码解释和注释：

fetch('http://example.com/api/data.json') // 发送异步请求获取JSON数据
  .then(response => response.json()) // 将响应数据解析为JSON格式
  .then(data => {
    // 在这里处理解析后的JSON数据
    // 可以访问和操作data对象
    console.log(data);
  })
  .catch(error => {
    console.error(error);
    // 错误处理代码
  });

这段代码使用了fetch函数来发送异步请求，其中传入的参数为JSON数据的URL。fetch返回一个Promise，可以使用.then()方法在响应成功时处理数据，使用.catch()方法处理错误。

在处理成功的响应时，通过调用response.json()方法将响应数据解析为JSON格式。这也返回一个Promise，可以在后续的.then()方法中访问和操作解析后的JSON数据。

在示例代码中，解析后的数据存储在data变量中，并通过console.log()函数打印在控制台上。你可以根据具体的需求来进一步处理数据，如显示在网页上或进行其他操作。

如果发生错误，如网络问题或解析错误，可以通过.catch()方法捕获错误并进行相应的处理。

这段代码展示了一个基本的异步加载和解析JSON数据的过程，你可以根据实际需求进行相应的修改和扩展。

?跨域请求

跨域请求是指通过JavaScript代码发送的请求，目标URL的域与当前页面所在的域不同。由于浏览器的同源策略限制，这种请求通常是不被允许的。然而，可以通过CORS（跨源资源共享）机制来实现跨域请求。下面是一个使用Fetch API发送跨域请求的代码解释和注释：

fetch('http://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*' // 允许跨域请求的来源
  }
})
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    console.error(error);
    // 错误处理代码
  });

这段代码使用fetch函数发送一个GET请求到"http://api.example.com/data"，这个URL与当前页面的域不同，因此是一个跨域请求。

在fetch函数的第二个参数中，我们可以设置请求的headers。在这个例子中，我们设置了'Content-Type'为'application/json'，并添加了'Access-Control-Allow-Origin'头部字段，其值为'*'，表示允许来自任意域的跨域请求。

在成功的响应中，使用response.json()方法将响应数据解析为JSON格式，并在.then()方法中处理解析后的数据。

如果发生错误，可以通过.catch()方法捕获错误并进行相应的处理。

需要注意的是，跨域请求需要服务器端进行相应的配置，以允许跨域请求的来源。在这个例子中，服务器需要设置允许任意域的跨域请求。具体的服务器配置可能因服务器软件和配置方式而有所不同。

这段代码展示了一个简单的跨域请求的过程，你可以根据实际情况对其进行修改和扩展。

进一步的案例研究和实践

?

下面是使用ES6语法解释的进一步案例研究和实践代码：

场景：假设我们的应用需要从一个API中获取用户的个人信息，并在页面上展示这些信息。

代码解释：

// 从另一个域的API获取用户信息
fetch('http://api.example.com/userinfo', {
  method: 'GET',
  credentials: 'include', // 发送跨域请求包含凭证信息（如cookies）
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*' // 允许跨域请求的来源
  }
})
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    displayUserInfo(data);
  })
  .catch(error => {
    console.error(error);
    // 错误处理代码
  });

// 在页面上展示用户信息
const displayUserInfo = (user) => {
  // 创建DOM元素来展示用户信息
  const userContainer = document.createElement('div');
  userContainer.innerHTML = `
    <h2>${user.name}</h2>
    <p>Email: ${user.email}</p>
    <p>Age: ${user.age}</p>
  `;

  // 将用户信息添加到页面上
  document.body.appendChild(userContainer);
};

在这个示例中，我们使用了箭头函数来定义处理响应数据的displayUserInfo函数。箭头函数提供了更简洁和可读性更强的代码风格。

另外，在fetch请求的头部中，我们使用了对象的简写语法。这意味着我们可以直接使用键名来定义属性，而无需显式地指定键和值。

同时，我们还使用了模板字符串来创建DOM元素的innerHTML，以更方便地插入用户信息。

这些都是ES6语法中的一些特性，它们可以使代码更简洁、易读和易于维护。然而，需要注意的是，这些特性可能需要在支持ES6的环境中运行，或者通过工具（如Babel）进行转换，以使代码在旧版JavaScript环境中运行。

文章来源:https://blog.csdn.net/weixin_70007095/article/details/135014637
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。