AJAX和Fetch的学习与比较

最新推荐文章于 2025-03-26 09:35:02 发布

WXDEE

最新推荐文章于 2025-03-26 09:35:02 发布

阅读量397

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/qq_29791893/article/details/88027547

学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解了Ajax和Fetch这两种Web开发中常用的异步数据请求技术。详细解释了Ajax的工作原理，包括XMLHttpRequest对象的创建、向服务器发送请求及响应处理，并对比了Fetch的特性与优势，如Promise异步处理机制和更简洁的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Ajax

AJAX简介

Ajax：异步的JavaScript和XML，一种用于快速创建动态网页的技术。通过在后台与服务器进行少量数据交换，是网页实现异步更新。
注意：Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术。

AJAX-创建XMLHttpRequest对象

XHR：可扩展超文本传输请求。用于在后台与服务器交换数据，可以在不向服务器提交整个页面的情况下，实现局部更新网页，是Ajax的基础。
所有现代浏览器（IE7+、Firefox、Chrome、Safari、Opera）均内建XHR对象，其语法为：

const xmlhttp = new XMLHttpRequest();

AJAX-向服务器发送请求

将请求发送到服务器时，使用XMLHttpRequest对象的open()和send()方法，实例如下：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

from w3cschool

AJAX-服务器响应

1、监听响应

XHR对象提供了三个重要属性来监听响应的状态，继而实现响应：
from w3cschool
当readyState等于4且状态为200时，表示响应已就绪：

xmlhttp.onreadystatechange = () => {
 if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
  console.log(xmlhttp.responseText);
 }
};

注意：onreadystatechange 事件被触发5次（0 - 4），对应着readyState的每个变化。

2、获取响应

XMLHttpRequest对象提供responseText 、responseXML 属性来获取服务器的响应：
from w3cschool

AJAX实例

const request = new XMLHttpRequest();
request.open('POST', `/ipos-chains/1/2`, true);
request.send(params);
request.onreadystatechange = () => {
  if (request.readyState === 4 && request.status === 200) {
    const data = JSON.parse(request.responseText);
    if (data.success) {
      message.success('成功');
    } else {
      message.error(data.errorInfo);
    }
  }
};

二、Fetch

认识Fetch

fetch是全局变量window的一个方法，它的主要特点有：

第一个参数是URL；
第二个是可选参数，可以控制不同配置的init对象；
使用了JavaScript Promise来处理结果/回调；

Fetch实例

// 链式处理,将异步变为类似单线程的写法: 高级用法.
fetch('/some/url').then(function(response) {
    return . //... 执行成功, 第1步...
}).then(function(returnedValue) {
    // ... 执行成功, 第2步...
}).catch(function(err) {
    // 中途任何地方出错...在此处理...
});

Fetch规范与AJAX的区别

Ajax的本质是使用XMLHttpRequest对象来请求数据，而fetch采用了Promise的异步处理机制，使用比ajax更加简单，有可能会逐渐代替ajax；
从fetch()返回的Promise将不会拒绝HTTP错误状态, 即使响应是一个HTTP404或500。相反，它会正常解决 , 并且仅在网络故障时或任何阻止请求完成时，它才会拒绝。可以做简单的封装：

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

默认情况下, fetch在服务端不会发送或接收任何cookies。如果想要在同域中自动发送cookie，加上credentials的same-origin 选项，same-origin值使得fetch处理Cookie与XMLHttpRequest类似。如下：

fetch(url, {
  credentials: ’same-origin'
})

三、参考

https://www.w3cschool.cn/ajax/ajax-tutorial.html.
https://www.cnblogs.com/September-9/p/7099975.html