http request-01-XMLHttpRequest XHR 简单介绍

最新推荐文章于 2024-08-18 00:07:51 发布
最新推荐文章于 2024-08-18 00:07:51 发布
阅读量676 收藏 18
点赞数 16
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ryo1060732496/article/details/141281892
版权

http 请求系列

http request-01-XMLHttpRequest XHR 简单介绍

http request-01-XMLHttpRequest XHR 标准

Ajax 详解-01-AJAX（Asynchronous JavaScript and XML）入门介绍

Ajax XHR 的替代方案-fetch

Ajax XHR 的替代方案-fetch 标准

Ajax 的替代方案-axios.js

http 请求-04-promise 对象 + async/await

XHR 的官方学习资料 给出网址

以下是一些官方学习 XMLHttpRequest (XHR) 的资源网址：

  1. MDN Web Docs - XMLHttpRequest

    • MDN XMLHttpRequest Documentation
    • 这是最权威和详细的 XHR 文档，提供了关于如何使用 XMLHttpRequest 的全面介绍，包括属性、方法、事件和示例代码。

  2. WhatWG - XMLHttpRequest Standard

    • WhatWG XMLHttpRequest Standard
    • WhatWG 的标准文档详细描述了 XMLHttpRequest 的规范和实现细节，是了解其正式标准的良好资源。

  3. W3C - XMLHttpRequest Level 2 Specification

这些资源将帮助你深入理解 XMLHttpRequest 的功能、用法和规范。

XHR 是什么?

XMLHttpRequest（XHR）是一个用于在客户端和服务器之间进行异步 HTTP 请求的 API，广泛用于动态更新网页内容，而无需重新加载整个页面。

尽管它最初是为了处理 XML 数据而设计的，但它现在支持多种数据格式，并已成为 Web 开发中重要的工具。

1. 基本概念

XMLHttpRequest 提供了在客户端（如浏览器）与服务器之间进行异步通信的能力，使得网页可以在不重新加载页面的情况下更新内容。

它的主要用途包括动态加载数据、提交表单以及与服务器进行实时交互。

2. 核心方法和属性

2.1 创建请求
const xhr = new XMLHttpRequest();
2.2 配置请求
  • open(method, url, async, user, password): 初始化请求。
    • method: HTTP 方法（如 GET、POST）。
    • url: 请求的 URL。
    • async: 是否异步（true 或 false）。
    • user 和 password: 可选的身份验证信息。
xhr.open('GET', 'https://example.com/data', true);
2.3 发送请求
  • send(body): 发送请求。body 参数用于发送数据（对于 GET 请求，通常为空）。
xhr.send();
2.4 事件处理
  • onload: 请求成功完成时触发。
  • onerror: 请求失败时触发。
  • onprogress: 请求进度更新时触发（适用于进度监控）。
  • onabort: 请求被取消时触发。
  • onreadystatechange: 请求状态改变时触发。
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  } else {
    console.error('Request failed with status:', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('Request error');
};
2.5 重要属性
  • readyState: 请求的当前状态（0: UNSENT, 1: OPENED, 2: HEADERS_RECEIVED, 3: LOADING, 4: DONE）。
  • status: HTTP 响应状态码（如 200、404、500）。
  • statusText: 响应状态文本。
  • responseText: 响应的文本内容。
  • responseXML: 响应的 XML 文档（如果 Content-Type 是 application/xml 或 text/xml）。
  • response: 根据响应类型（如 ArrayBuffer、Blob）返回的响应数据。

3. 使用示例

3.1 简单 GET 请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Response:', xhr.responseText);
  } else {
    console.error('Error:', xhr.status, xhr.statusText);
  }
};
xhr.send();
3.2 POST 请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = function() {
  if (xhr.status === 201) {
    console.log('Created:', xhr.responseText);
  } else {
    console.error('Error:', xhr.status, xhr.statusText);
  }
};
const data = JSON.stringify({ title: 'foo', body: 'bar', userId: 1 });
xhr.send(data);
3.3 进度监控
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log('Progress:', percentComplete.toFixed(2) + '%');
  }
};
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Response:', xhr.responseText);
  } else {
    console.error('Error:', xhr.status, xhr.statusText);
  }
};
xhr.send();

4. 优缺点

4.1 优点
  • 广泛支持: 兼容大多数浏览器，包括较早版本。
  • 灵活性: 支持多种 HTTP 方法和请求体格式。
  • 进度监控: 能够监控请求的进度和状态变化。
4.2 缺点
  • 复杂性: 处理异步操作和错误处理可能比较复杂，特别是嵌套的回调函数（“回调地狱”）。
  • 现代替代品: 比如 fetch API 提供了更简洁的语法和更强大的功能，例如流处理和更好的错误处理。

5. 现代替代

XMLHttpRequest 的一些功能和用途已经被更现代的 fetch API 所取代。fetch 提供了更简洁的语法、支持 Promise 和流处理，使得异步操作和错误处理更为直观。

XHR 为什么需要？解决了什么问题

XMLHttpRequest (XHR) 是一种用于在浏览器和服务器之间进行异步通信的 API。它在 Web 开发中解决了多个关键问题，特别是在用户体验和动态网页更新方面。

以下是 XMLHttpRequest 需要的原因及其解决的问题：

1. 页面异步更新

问题
  • 传统的网页请求: 每次需要从服务器获取新数据或提交数据时，整个页面必须重新加载。这种方式会导致用户体验不流畅，页面刷新较慢。
解决方案
  • XHR 的异步请求: 允许网页在不重新加载整个页面的情况下，从服务器获取数据并更新部分页面内容。这使得网页可以实现局部更新，而不是每次都刷新整个页面，从而提高了用户体验和响应速度。

2. 提高用户体验

问题
  • 页面停顿: 在传统的同步请求中，用户必须等待整个请求和响应过程完成，这可能导致页面停顿或冻结。
解决方案
  • 异步处理: XMLHttpRequest 通过异步处理请求，允许浏览器在发出请求时继续执行其他操作，不会阻塞用户界面的交互。这样，用户可以继续与网页进行交互，而不会受到请求等待的影响。

3. 动态内容加载

问题
  • 静态网页内容: 在没有异步请求的情况下，网页内容通常是静态的，所有内容都在页面加载时获取。
解决方案
  • 动态内容加载: 通过 XMLHttpRequest，网页可以在运行时动态加载数据，并根据需要更新内容。比如，用户滚动到页面底部时自动加载更多数据（如无限滚动），或者基于用户输入实时更新搜索结果。

4. 后台数据处理

问题
  • 用户交互时的数据提交: 用户在填写表单时，数据提交通常会导致页面重新加载，影响用户体验。
解决方案
  • 表单提交: 使用 XMLHttpRequest 可以在不刷新页面的情况下提交表单数据。这使得用户可以在不离开当前页面的情况下完成数据提交和处理。

5. 局部更新和请求管理

问题
  • 整体更新难度: 如果需要对部分页面内容进行更新，传统方法通常需要复杂的页面重载和数据处理。
解决方案
  • 局部更新: XMLHttpRequest 允许通过指定的 URL 和请求方法，只更新页面的某一部分内容。这简化了局部更新的实现，并减少了对服务器的负担。

6. 进度监控

问题
  • 缺乏反馈: 在传统请求中，用户无法获得请求进度的信息（如正在下载的进度）。
解决方案
  • 进度事件: XMLHttpRequest 提供了 onprogress 事件，使得开发者可以实时监控请求的进度，并向用户提供反馈，例如显示下载进度条。

7. 与其他技术的兼容性

问题
  • 旧版浏览器支持: 在 fetch API 出现之前，许多旧版浏览器不支持现代的 HTTP 请求 API。
解决方案
  • 兼容性: XMLHttpRequest 作为较早的标准，得到了广泛的浏览器支持，包括旧版浏览器。这使得它在需要兼容旧版浏览器的应用中仍然非常重要。

XHR 的适用场景，优缺点

XMLHttpRequest（XHR）在 Web 开发中有一些特定的适用场景，以及它的优点和缺点。

以下是一些实际应用场景和它们的优缺点，用更接地气的方式来解释：

适用场景

  1. 动态内容更新

    • 场景: 当你希望在用户与网页交互时，动态更新页面的一部分内容，例如加载评论、文章或产品列表，而不需要重新加载整个页面。
    • 例子: 社交媒体平台上的帖子加载，电商网站上的产品筛选。

  2. 异步表单提交

    • 场景: 当用户填写表单并提交数据时，你希望在后台处理这些数据，而不刷新整个页面。
    • 例子: 用户在评论框中输入内容并提交，数据直接上传到服务器，页面不会重载。

  3. 局部数据刷新

    • 场景: 需要刷新网页的某个部分的数据，而不是整个页面。例如，实时更新价格或天气信息。
    • 例子: 监控仪表板上更新服务器状态，新闻网站上实时更新新闻头条。

  4. 进度反馈

    • 场景: 需要监控和展示文件上传或下载的进度，让用户知道操作的进展。
    • 例子: 文件上传表单，下载大文件时显示进度条。

  5. 旧版浏览器兼容

    • 场景: 如果你的应用需要支持旧版浏览器，它可能不支持现代的 fetch API，但支持 XMLHttpRequest。
    • 例子: 针对使用老旧设备或浏览器的用户群体的应用。

优点

  1. 广泛支持

    • 优点: 几乎所有的浏览器都支持 XMLHttpRequest，包括许多旧版浏览器。
    • 实际感受: 你不需要担心用户的浏览器是否支持，因为它几乎能在所有环境中工作。

  2. 灵活性

    • 优点: 支持多种 HTTP 方法（GET、POST、PUT、DELETE 等），并且能够处理不同格式的响应数据。
    • 实际感受: 可以用来做各种各样的请求，比如从服务器获取 JSON 数据或发送表单数据。

  3. 进度监控

    • 优点: 提供 onprogress 事件，可以监控请求的进度。
    • 实际感受: 你可以给用户提供下载或上传的实时进度，提升用户体验。

缺点

  1. 复杂性

    • 缺点: 处理异步请求和响应可能会很复杂，尤其是在嵌套回调函数（“回调地狱”）的情况下。
    • 实际感受: 编写代码时可能会变得混乱，不容易维护。

  2. 没有内建的 Promise 支持

    • 缺点: 不像 fetch API，XMLHttpRequest 默认不支持 Promise，处理异步操作时需要使用回调函数。
    • 实际感受: 需要额外的工作来处理异步操作，代码可能不够简洁。

  3. 较少的功能扩展

    • 缺点: 与现代 API 比如 fetch 相比，XMLHttpRequest 在流处理和功能扩展方面有所限制。
    • 实际感受: 如果需要更高级的功能，比如流式处理大文件，XMLHttpRequest 可能无法满足需求。

XHR 的使用最佳实践

使用 XMLHttpRequest (XHR) 时，遵循一些最佳实践可以帮助你写出更高效、可靠和可维护的代码。以下是一些实际的最佳实践：

1. 使用异步请求

  • 实践: 总是将 XMLHttpRequest 的 async 参数设置为 true，以便异步处理请求。
  • 理由: 异步请求不会阻塞用户界面，提高了用户体验。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.send();

2. 处理请求状态变化

  • 实践: 使用 onreadystatechange 事件来处理请求的不同状态。确保检查 readyState 和 status 属性来确定请求是否成功完成。
  • 理由: readyState 提供了请求的当前状态，status 表示 HTTP 响应状态码，帮助你正确处理响应或错误。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // DONE
    if (xhr.status === 200) {
      console.log('Response:', xhr.responseText);
    } else {
      console.error('Error:', xhr.status, xhr.statusText);
    }
  }
};
xhr.send();

3. 设置适当的请求头

  • 实践: 根据需要设置请求头（例如 Content-Type）。如果你发送 JSON 数据，确保设置 Content-Type 为 application/json。
  • 理由: 请求头可以影响服务器如何处理请求体，确保请求和响应数据格式的正确性。
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
const data = JSON.stringify({ key: 'value' });
xhr.send(data);

4. 处理错误和超时

  • 实践: 使用 onerror 事件处理网络错误，使用 ontimeout 处理超时情况。设置超时时间以防止请求挂起过久。
  • 理由: 错误处理可以提供更好的用户反馈和恢复机制，而超时处理可以避免长时间等待无响应的请求。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.timeout = 5000; // 设置超时时间为 5000 毫秒

xhr.ontimeout = function() {
  console.error('Request timed out');
};

xhr.onerror = function() {
  console.error('Request error');
};

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Response:', xhr.responseText);
  }
};

xhr.send();

5. 监控进度

  • 实践: 使用 onprogress 事件来监控请求的进度，尤其是处理大文件上传或下载时。
  • 理由: 进度反馈可以改善用户体验，让用户了解操作的进展。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/largefile', true);
xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log('Progress:', percentComplete.toFixed(2) + '%');
  }
};
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('File downloaded successfully');
  }
};
xhr.send();

6. 避免回调地狱

  • 实践: 使用清晰的回调结构或考虑使用 Promises（如果需要兼容性，可以用 Promise 封装 XHR）。虽然 XHR 本身不支持 Promise，但你可以创建自己的封装。
  • 理由: 清晰的回调结构或使用 Promise 可以提高代码的可读性和可维护性。
function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(`Request failed with status ${xhr.status}`));
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

// 使用
fetchData('https://example.com/data')
  .then(response => console.log('Response:', response))
  .catch(error => console.error('Error:', error));

7. 处理不同数据格式

  • 实践: 根据服务器响应的 Content-Type 处理数据。例如，如果响应是 JSON 格式，则调用 responseText 并使用 JSON.parse 解析。
  • 理由: 正确处理不同的数据格式确保数据解析的准确性。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    const contentType = xhr.getResponseHeader('Content-Type');
    if (contentType.includes('application/json')) {
      const data = JSON.parse(xhr.responseText);
      console.log('JSON data:', data);
    } else {
      console.log('Response:', xhr.responseText);
    }
  }
};
xhr.send();

8. 保持代码简洁

  • 实践: 尽量保持 XHR 请求代码简洁，避免过多的嵌套和复杂逻辑。封装常用逻辑为函数可以提高可重用性。
  • 理由: 简洁的代码更易于维护和理解。
function createRequest(method, url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      callback(null, xhr.responseText);
    } else {
      callback(new Error(`Request failed with status ${xhr.status}`));
    }
  };
  xhr.onerror = function() {
    callback(new Error('Network error'));
  };
  xhr.send();
}

// 使用
createRequest('GET', 'https://example.com/data', (error, response) => {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
  }
});

总结

遵循这些最佳实践可以帮助你在使用 XMLHttpRequest 时编写更高效、可靠和易于维护的代码。

虽然 fetch API 提供了更现代的接口，但了解和掌握 XMLHttpRequest 仍然在许多情况下很重要，尤其是在处理兼容性问题时。

老马啸西风
关注
  • 16
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qt qml-http之XMLHttpRequest介绍详解使用
MusicScore的博客
06-26 330
是 QML 中用于执行HTTP请求的一种机制，类似于Web中的AJAX。它可以用来进行异步的数据传输，可以从服务器获取数据，也可以将数据发送到服务器。进行HTTP GET和POST请求，并将请求结果显示在界面上。这种方式可以在QML应用中实现与服务器的异步通信，类似于Web开发中的AJAX技术。进行HTTP POST请求，并将返回的数据显示在界面上。进行HTTP GET请求，并将返回的数据显示在界面上。下面是一个示例，展示如何在QML中使用。下面是一个示例，展示如何在QML中使用。
【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
YK菌的博客
02-23 3万+
文章目录1. Ajax概述1.1 AJAX 简介1.2 XML 简介1.3 AJAX 的特点1.3.1 AJAX 的优点1.3.2 AJAX 的缺点2. 原生AJAX 的基本使用2.0 准备工作2.1 核心对象2.2 使用步骤2.3 使用案例1. GET 请求设置请求参数2. POST请求2.4 解决IE 缓存问题2.5 AJAX 请求状态3. jQuery 中的AJAX3.1 get 请求3.2 post 请求4. 跨域4.1 同源策略4.2 如何解决跨域4.2.1 JSONP4.2.2 CORS 1.
element组件el-upload通过http-request进行XHR上传文件
默的博客
08-12 1111
http-request为拦截请求数据，可以自己去写请求，懒，直接贴代码 HTML <el-upload accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" :http-request="request" :show-file-list="false" :action="actionUrl" > &l
Ajax 异步JS&xml - XMLHttpRequest详解从XHR到Promise
CheAyuki13的博客
03-12 1664
Ajax 快速入门 从XHR对象到Promise的使用 详解 学习资源整合
跨域时(cross-origin)，XMLHttpRequest.withCredentials对cookie的影响
溺水三千只取一瓢饮
02-25 1728
本文参考了：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials   概述 XMLHttpRequest.withCredentials不止控制着 browser--&gt;server的request中 是否携带credentials信息，还控制着前端JavaScript如何使用 se...
Element UI - http-request 覆盖默认的上传行为，自定义上传的实现
热门推荐
物联网三分钟
02-02 6万+
结合文章 - 阿里OSS Java-SDK带进度条上传,配合前端element-ui upload组件使用示例 表单中的 ui el-form-item label="课程文件" :label-width="formLabelWidth"> el-upload :show-file-list="false" :file-list
JS----Ajax中XMLHttpRequest常用方法及属性
bugQueen的博客
12-23 1392
1. XMLHttpRequest常用方法 一、open(); XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。 例： xhr.open('POST', '/carrots-admin-ajax/a/login', true); 参数: method:用于指定请求的类型 "GET"或者"POST" url:用于请求的地址, 可相对可绝对 asyncFlag:指定请求方式为同步还是异步, true
XHR-XMLHttpRequest
顺其自然~专栏
02-18 1819
XMLHttpRequest 对象是 Ajax 的关键。它从 2000 年 7 月发布的 IE 5.5 开始可用，但是直到 2005 年 Ajax 和 Web 2.0 变得流行起来它都没有完全被发觉。 XMLHttpRequest (XHR) 是一个可以用 JavaScript，JScript，VBScript 和其他 Web 浏览器脚本语言传输和操作 XML 数据，以及使用 HTTP 从 Web 服务器上在网页客户端和服务端之间建立一个独立连接通道的 API。 调用 XMLHttpRequest 返回
http request-02-Ajax XHR 的替代方案-fetch 标准
最新发布
08-18 490
从高层次来看，获取资源是一个相当简单的操作。请求发出，响应返回。然而，这一操作的细节相当复杂，过去通常没有被仔细记录，并且在不同的 API 之间有所不同。许多 API 提供了获取资源的能力，例如 HTML 的<img>和<script>元素，CSS 的cursor和，JavaScript 的和API。Fetch 标准提供了一个统一的架构，使这些功能在各种获取方面（如重定向和 CORS 协议）保持一致。Fetch 标准还定义了fetch()
node-request-interceptor：节点的低级HTTPHTTPSXHR请求拦截库
02-03
NodeJS的低级HTTP / HTTPS / XHR请求拦截库。 拦截由以下人员发出的任何请求： http.get / http.request https.get / https.request fetch XMLHttpRequest 利用上述模块的任​​何第三方库（即request ， ...
xhr：一个小的xhr包装器
02-03
API的一个子集这样你就可以在两个node.js中，通过使用浏览器的作品写的代码require('request')在你的代码，并告诉您的浏览器捆绑到加载xhr而不是request 。 对于browserify，将一个字段添加到package.json ： ...
Ajax-hook：拦截由XMLHttpRequest发出的浏览器的AJAX请求
01-30
阿贾克斯钩原理解析： : 简介Ajax-hook是一个精巧的用于拦截浏览器XMLHttpRequest的库，它可以在XMLHttpRequest对象发起请求之前和接收响应内容之后获得处理权。通过它您可以在对请求和响应进行一些预处理。更新记录...
request-blocker
03-15
在JavaScript中，我们可以使用Fetch API或XMLHttpRequest（XHR）来发起HTTP请求。Fetch API是较新的标准，提供了更简洁的语法和更好的错误处理机制。XMLHttpRequest则是早期的API，至今仍被广泛使用。"Request ...
AJAX-request-JSON
04-28
var xhr = new XMLHttpRequest(); ``` 然后，我们需要配置请求。这包括指定HTTP方法（如GET或POST）、URL以及是否异步执行： ```javascript xhr.open('GET', 'data.json', true); ``` 接下来，设置请求头信息，...
JAVA进阶补充
2301_80150315的博客
08-15 883
概念：把已经有的方法拿过来用，当作函数式接口中抽象方法的方法体条件：引用处必须是函数式接口被引用的方法需要已经存在被引用方法的形参和返回值需要跟抽象方法的形参和返回值保持一致被引用方法的功能需要满足当前需求：方法引用符意义：就是为让控制台的报错信息更加的见名知意自定义异常的步骤：定义异常类写继承关系空参构造带参构造​file对象就表示一个路径，可以是文件的路径、也可以是文件夹的路径；这个路径可以是存在的，也允许是不存在的构造方法描述根据文件路径创建对象。
进程间通信 ---共享内存
BUG制造机的博客
08-14 1048
在这篇文章中向大家介绍了共享内存的原理以及常用的指令函数，希望大家有所收获！😁。
手撕快排——三种实现方法（附动图及源码）
jsjs1346的博客
08-16 573
🤖💻👨‍💻👩‍💻🌟🚀🤖🌟👨‍💻👩‍💻👨‍💻👩‍💻🚀是一种高效的排序算法，广泛应用于各种场景。它采用策略，将一个数组分成两个子数组，然后递归地对这两个子数组进行排序。本文将介绍三种快速排序的实现方法，并附上相应的源码。⚙️一、快速排序的基本原理一个基准元素（pivot）分成两个子数组递归合并O(n log n)O(n log n)O(n^2)后文我们将给出优化方案O(log n)📚三、实现霍尔方法是快速排序原始版本中使用的分区方法。
Java Spring|day3.SpringBoot
weixin_60364343的博客
08-15 357
告诉Spring boot需要什么功能,它就能引入需要的依赖库起步依赖就是特殊的Maven依赖，利用了传递依赖解析，把常用库聚合在一起，组成几个为特定功能而定制的依赖。
element ui http-request
07-28
element ui的http-request是一个用于自定义文件上传的函数。在这个函数中，通过参数param可以获取到要上传的文件，可以通过param.file来获取文件对象。在函数中，首先创建一个FormData对象，然后将文件对象添加到FormData中，同时可以添加其他参数。接下来，创建一个XMLHttpRequest对象，使用open方法指定请求的方法和URL，然后通过send方法发送请求。在发送请求之前，可以通过xhr.upload.addEventListener方法监听上传进度。当上传完成后，可以通过xhr.onload方法获取到上传到阿里云的文件地址，并进行相应的处理。\[2\] #### 引用[.reference_title] - *1* *2* [Element UI - http-request 覆盖默认的上传行为，自定义上传的实现](https://blog.csdn.net/m0_37893932/article/details/79237308)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [elementUI 上传组件 http-request （覆盖默认的上传行为，可以自定义上传的实现）使用](https://blog.csdn.net/qq_39759115/article/details/82287207)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值