前端获取资源的方式(ajax、fetch)及其区别

前端获取资源的方式及其区别

• 一、使用 ajax 请求
• • 1. 什么是 ajax 请求
  • 2. ajax请求原理
  • 二、使用fetch请求
  • • 1. 什么是fetch请求
    • 2. fetch请求原理
    • 三、fetch和ajax的区别

      一、使用 ajax 请求

      1. 什么是 ajax 请求

      Ajax 即 Asynchronous Javascript And XML（异步JavaScript和XML），在2005年提出，是一种描述使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

      2. ajax请求原理

      • 简单概述

        Ajax的原理简单来说通过JavaScript原生的XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后再用JavaScript来操作DOM，从而实现页面更新。

      • 与服务端交互详细过程
        • 创建 Ajax的核心对象 XMLHttpRequest对象
        • 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
        • 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
        • 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件，监听服务器端的通信状态
        • 接受并处理服务端向客户端响应的数据结果
        • 根据响应结果操作DOM，将处理结果更新到 HTML页面中
        • 详细实现代码示例

          // 创建XMLHttpRequest对象const request = new XMLHttpRequest()// 监听onreadystatechange 事件，与服务端通信request.onreadystatechange = function(e){// 获取当前请求状态，readyState 的值为 4 ，表示整个请求过程完毕    if(request.readyState === 4){     // 根据返回的状态码，判断当前请求是否成功返回        if(request.status >= 200 && request.status           // 获取到服务端返回的结果            console.log(request.responseText)         }else if(request.status =400){        // 获取到服务端返回的错误信息            console.log("错误信息：" + request.status)        }    }}// XMLHttpRequest 对象的 open() 方法与服务端建立连接request.open('POST','http://xxxx')// 通过XMLHttpRequest 对象的 send() 方法将请求发送给服务端request.send()

          二、使用fetch请求

          1. 什么是fetch请求

          Fetch请求是一种现代Web API，用于在JavaScript中发出HTTP数据请求。它是XMLHttpRequest的一种替代方案，提供了更加简洁和现代化的方式来处理网络请求。Fetch函数是原生JavaScript的一部分，不需要使用XMLHttpRequest对象。Fetch请求使用Promise来处理异步操作，这使得它的代码更加清晰和简洁。

          2. fetch请求原理

          • fetch是基于原生的XMLHttpRequest对象来实现数据请求的。
          • 同时，fetch也是基于Promise实现链式调用的。
          • 则实现fetch的本质：就是实现ajax的封装以及Promise的实现。

            通过以上ajax部分的讲解中，我们知道ajax可以通过XMLHttpRequest简单实现：

            function ajax(url,suc,fail) {  var xhr = new XMLHttpRequest();    xhr.open('POST',url, true);    xhr.onreadystatechange = function () {        if(xhr.readyState == 4){            if(xhr.status == 200){                suc(xhr.responseText)            } else {                console.log(err);                fail(xhr.responseText);            }        }    };    xhr.send(null);}

            fetch可结合Promise和ajax简单实现：

            function fetch(url) {    return new Promise(function (resolve,reject) {        ajax(url,function (res) {            resolve(res);        },function (err) {            reject(err);        })    })}

            fetch调用之后返回的是一个Promise实例，可以直接调用Promise实例的then方法和catch方法获取请求结果或报错信息。

            三、fetch和ajax的区别

            Fetch和Ajax的主要区别在于它们的API设计、语法、错误处理、进度监测、以及对于跨域请求的处理。

            1. API设计方面
               • Fetch是现代JavaScript中的API，使用Promise对象来处理异步操作，可以链式调用，使代码更易于理解和维护
               • Ajax是一种传统的技术，通常使用XMLHttpRequest对象来进行请求和响应的处理
               • 语法和错误处理方面
                 • Fetch使用一种基于Promise的API风格，返回的是一个Promise对象，对于网络请求报错，对400、500都当做成功的请求，需要封装去处理
                 • Ajax的语法相对较复杂，需要编写更多的代码来处理回调函数和状态，它通常使用回调函数来处理异步操作，可能会导致回调地狱的问题，尤其在复杂的请求链中
                 • 进度监测方面
                   • Fetch没有办法原生监测请求的进度
                   • Ajax基于原生的XHR开发，可以监测
                   • 跨域请求方面
                     • Fetch对跨域请求有更严格的限制，因为它遵循了同源策略，如果需要进行跨域请求，需要在服务器端设置适当的CORS头（Cross-Origin Resource Sharing）以允许跨域请求
                     • Ajax也受到同源策略的限制，但可以通过JSONP、代理服务器等技术来进行跨域请求
                     • 兼容性方面

                       Fetch基于Promise开发，Ajax相较于Fetch兼容性好一些

            总的来说，Fetch是现代化的、更灵活的方式来处理网络请求，特别适合使用在现代JavaScript应用中，而Ajax仍然在一些旧的应用和传统的环境中使用，并且有些情况下可能更容易上手。