个人网站建设源代码,推广软件公司,高明网站设计收费,asp电影网站源码摘要#xff1a;最近#xff0c;看了下慕课2周刷完n道面试题#xff0c;记录下...
1.请说明Ajax、Fetch、Axios三者的区别 三者都用于网络请求#xff0c;但维度不同#xff1a;
Ajax#xff08;Asynchronous Javascript ang XML#xff09;#xff0c;是一种在不重新…摘要最近看了下慕课2周刷完n道面试题记录下...
1.请说明Ajax、Fetch、Axios三者的区别 三者都用于网络请求但维度不同
AjaxAsynchronous Javascript ang XML是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容的技术。Fetch浏览器原生API用于网络请求和XMLHttpRequest一个级别Fetch语法更简介易用且支持Promise。Axios最常用的网络请求lib库随着Vue火爆起来内部可用XMLHttpRequest和Fetch来实现 官网
Axios中文文档 | Axios中文网Axios 是一个基于 promise 的网络请求库可以用于浏览器和 node.jshttps://www.axios-http.cn/ 使用原生的 XMLHttpRequest 对象实现 Ajax 请求需要编写大量的冗余代码而且不能支持 Promise 和 async/await 等现代 JavaScript 特性。Fetch 提供了一组丰富的 API可以配置请求头、请求体、响应类型等参数也可以取消请求、处理跨域请求等复杂场景。但是Fetch 也存在一些限制例如无法中止请求、不支持进度监视等。 使用XmlHttpRequest实现Ajax
//1. 创建XMLHttpRequest对象
var xmlhttp; // 用于保存创建好的对象
/**
* XMLHttpRequest是Ajax的核心
* 它是一个构造函数可以通过new关键字来调用
* Ajax使用该对象发起请求、接收响应
* 语法var 变量名 new XMLHttpRequest();
* XMLHttpRequest并不是W3C的标准不同浏览器的创建方式不同
* 例如Chrome、Firefox、IE7、Opera、Safari等浏览器使用的是XMLHttpRequest
* 注意IE5和IE6不支持该对象它们使用ActiveXObject
*/
// 判断浏览器是否支持该对象
if (window.XMLHttpRequest) { xmlhttp new XMLHttpRequest(); }
else { // IE5和IE6使用的是ActiveXObjectxmlhttp new ActiveXObject(Microsoft.XMLHTTP);
} /**
* 先创建请求open()方法指定请求类型和URL
* 语法xmlhttp.open(请求类型,请求的URL,是否异步) * 参数请求类型表示请求的类型例如GET、POST等
* 请求的URL表示请求的地址可以是相对地址也可以是绝对地址
* 是否异步表示是否采用异步方式如果为true表示异步如果为false表示同步
* 例如xmlhttp.open(GET,/content,true);
* 注意该方法并不会真正发送请求而只是启动一个请求以备发送
* 然后调用send()方法发送请求
*/
// 2. 配置请求信息
xmlhttp.open(GET, /content);
// 3. 发送Ajaxxmlhttp.send();
// 4. 处理服务器响应
/**
* XMLHttpRequest.onreadystatechange()是一个事件处理函数当XMLHttpRequest对象的
* readyState属性值发生变化时该函数将被触发。* 以下是readyState属性的值说明
* 0表示XMLHttpRequest对象正在初始化尚未发送请求。
* 1表示请求已经发送但尚未收到响应。
* 2表示请求已经发送并且服务器已经处理请求正在等待服务器响应。
* 3表示请求已经发送并且服务器已经处理请求并且响应已经就绪但尚未读取。
* 4表示请求已经发送并且服务器已经处理请求并且响应已经就绪并且响应的内容已经读取完毕。 */
xmlhttp.onreadystatechange function () {
// 响应已被接受且服务器处理成功时才执行响应状态码200
if (xmlhttp.readyState 4 xmlhttp.status 200) { // 获取响应体的文本 var t xmlhttp.responseText; console.log(t); document.getElementById(divContent).innerHTML document.getElementById(divContent).innerHTML t; }
} 使用Fetch实现Ajax
// 创建一个函数来发送 Fetch 请求
function fetchData(url) {fetch(url).then(response {if (!response.ok) {throw new Error(Network response was not ok);}return response.json(); // 解析 JSON 数据}).then(data {console.log(data); // 输出获取到的数据}).catch(error {console.error(There was a problem with your fetch operation:, error);});
}// 调用函数发送 Fetch 请求
fetchData(https://jsonplaceholder.typicode.com/posts/1);
2. 节流和防抖 防抖是指在连续触发事件后等待一定时间间隔例如 200ms后再执行函数。如果在等待时间间隔内再次触发了事件则重新计时直到等待时间间隔内没有再次触发事件才最终执行函数。这样可以确保函数在连续触发事件后等待一段时间再执行避免频繁触发导致函数多次执行。如下图 防抖函数实现
function debounce(func, delay200) {let timerId 0return function (...args) {if (timerId) clearTimeout(timerId)timerId setTimeout(() {func.apply(this, args); //透传this和参数timerId 0}, delay);};
} 节流是指在一定时间间隔内最多执行一次函数。当事件触发时如果距离上次执行函数的时间小于指定的时间间隔则不会执行该函数如果距离上次执行函数的时间大于等于指定的时间间隔则会执行该函数。这样可以确保函数在一定时间间隔内最多只被执行一次。 节流函数实现
function throttle(func, delay) {let timerId 0return function (...args) {if (timerId) returntimerId setTimeout(() {func.apply(this, args); //透传this和参数timerId 0}, delay);};
} 总结起来节流是限制执行频率有节奏的执行防抖是限制执行次数多次密集的触发值执行一次节流关注过程防抖关注结果。节流的使用场景包括元素拖拽、滚动事件、窗口调整大小、按钮点击、搜索框输入等防抖的使用场景包括输入框输入、表单验证、文本编辑器、窗口缩放等。 实际工作中通常使用lodash中的节流和防抖函数。 持续更新中……
