diff --git a/05-JavaScript基础:异步编程和Ajax/01-服务器分类及PHP入门.md b/05-JavaScript基础:异步编程和Ajax/00-服务器分类及PHP入门.md similarity index 100% rename from 05-JavaScript基础:异步编程和Ajax/01-服务器分类及PHP入门.md rename to 05-JavaScript基础:异步编程和Ajax/00-服务器分类及PHP入门.md diff --git a/06-JavaScript基础:ES6语法/10-单线程和异步.md b/05-JavaScript基础:异步编程和Ajax/01-单线程和异步.md similarity index 88% rename from 06-JavaScript基础:ES6语法/10-单线程和异步.md rename to 05-JavaScript基础:异步编程和Ajax/01-单线程和异步.md index a69389b..309802a 100644 --- a/06-JavaScript基础:ES6语法/10-单线程和异步.md +++ b/05-JavaScript基础:异步编程和Ajax/01-单线程和异步.md @@ -1,6 +1,6 @@ ## 单线程 -JavaScript 的执行环境是**单线程**。即同一时间,只能处理一个任务。 +JavaScript 语言和执行环境是**单线程**。即同一时间,只能处理一个任务。 具体来说,所谓单线程,是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个。所有的任务都**需要排队**。 @@ -40,11 +40,11 @@ setTimeout(() => { - 事件绑定(比如说,按钮绑定点击事件之后,用户爱点不点。我们不可能卡在按钮那里,什么都不做。所以,应该用异步) -- 网络请求:ajax 请求、网络图片加载 +- 网络请求(含接口请求):ajax 请求、网络图片加载 - ES6 中的 Promise -现在的大部分软件项目,都是前后端分离的。前端发送 ajax 请求,向后端请求数据,然后**等待一段时间**后,才能拿到数据。这个请求过程就是异步任务。 +现在的大部分软件项目,都是前后端分离的。后端生成接口,前端请求接口。前端发送 ajax 请求,向后端请求数据,然后**等待一段时间**后,才能拿到数据。这个请求过程就是异步任务。 ### 接口调用的方式 @@ -55,7 +55,7 @@ js 中常见的接口调用方式,有以下几种: - Fetch - axios -下一篇文章,我们重点讲一下接口调用里的**Promise**。 +下一篇文章,我们重点讲一下接口调用里的 Ajax,然后在ES6语法中学习 **Promise**。在这之前,我们需要先了解同步任务、异步任务的事件循环机制。 ### 多次异步调用的顺序 @@ -160,5 +160,6 @@ setTimeout(() => { ## 参考链接 - [JS-同步任务,异步任务,微任务,和宏任务](https://github.com/PleaseStartYourPerformance/javaScript/issues/34) - - [JS 同步异步宏任务微任务](https://juejin.cn/post/6875605533127081992)、[JavaScript 中事件循环的理解](https://zhuanlan.zhihu.com/p/364475433)、[javascript 事件循环机制](https://github.com/reng99/blogs/issues/34) +- [如何实现比 setTimeout 快 80 倍的定时器?](https://mp.weixin.qq.com/s/NqzWkeOhqAU85XPkJu_wCA) + diff --git a/05-JavaScript基础:异步编程和Ajax/02-Ajax入门和发送http请求.md b/05-JavaScript基础:异步编程和Ajax/02-Ajax入门和发送http请求.md index 6868be1..422b01c 100644 --- a/05-JavaScript基础:异步编程和Ajax/02-Ajax入门和发送http请求.md +++ b/05-JavaScript基础:异步编程和Ajax/02-Ajax入门和发送http请求.md @@ -1,6 +1,6 @@ -## 同步和异步 +## 同步和异步回顾 ### 同步和异步的简单理解 @@ -23,9 +23,9 @@ 试想一下,如果没有异步刷新的话,每次点击“加载更多”,网页都要重新刷新,体验就太糟糕了。 -web前端里的异步更新,就要用到 Ajax。 +web前端里的异步更新,就要用到 Ajax。很多人说,如果没有 Ajax,就没有互联网的今天。 -关于同步和异步的更详细介绍,可以参考本项目的另外一篇文章:《JavaScript基础:ES6语法/单线程和异步》 +关于同步和异步的更详细介绍,可以参考本项目的另外一篇文章:《05-JavaScript基础:异步编程和Ajax/01-单线程和异步》 @@ -33,12 +33,11 @@ web前端里的异步更新,就要用到 Ajax。 ### Ajax 的概念 -在浏览器中,我们可以在不刷新页面的情况下,通过ajax的方式去获取一些新的内容。 +在浏览器中,我们可以在不刷新页面的情况下,通过 Ajax 的方式去获取一些新的内容。 Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML)。它并不是凭空出现的新技术,而是对于现有技术的结合。Ajax 的核心是 js 对象:**XMLHttpRequest**。 - -### 发送 Ajax 请求的五个步骤 +### Ajax原理(发送 Ajax 请求的五个步骤) > 其实也就是 使用 XMLHttpRequest 对象的五个步骤。 @@ -54,11 +53,11 @@ Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML)。它并 (1)创建异步对象,即 XMLHttpRequest 对象。 -(2)使用open方法设置请求的参数。`open(method, url, async)`。参数解释:请求的方法、请求的url、是否异步。 +(2)使用open方法设置请求参数。`open(method, url, async)`。参数解释:请求的方法、请求的url、是否异步。 -(3)发送请求。 +(3)发送请求:`send()`。 -(4)注册事件。 注册onreadystatechange事件,状态改变时就会调用。 +(4)注册事件:注册onreadystatechange事件,状态改变时就会调用。 如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。 @@ -84,29 +83,29 @@ Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML)。它并 document.querySelector('#btnAjax').onclick = function () { // 发送ajax 请求 需要 五步 - // (1)创建异步对象 - var ajaxObj = new XMLHttpRequest(); + // (1)创建XMLHttpRequest对象 + var xmlhttp = new XMLHttpRequest(); // (2)设置请求的参数。包括:请求的方法、请求的url。 - ajaxObj.open('get', '02-ajax.php'); + xmlhttp.open('get', '02-ajax.php'); // (3)发送请求 - ajaxObj.send(); + xmlhttp.send(); //(4)注册事件。 onreadystatechange事件,状态改变时就会调用。 //如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。 - ajaxObj.onreadystatechange = function () { + xmlhttp.onreadystatechange = function () { // 为了保证 数据 完整返回,我们一般会判断 两个值 - if (ajaxObj.readyState == 4 && ajaxObj.status == 200) { - // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 - // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示 + if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { + // 如果能够进入这个判断,说明数据请求成功了 + // (5)在注册的事件中,获取返回的内容,并显示在页面上 console.log('数据返回成功'); - + // 数据是保存在 异步对象的 属性中 - console.log(ajaxObj.responseText); + console.log(xmlhttp.responseText); - // 修改页面的显示 - document.querySelector('h1').innerHTML = ajaxObj.responseText; + // 显示在页面上 + document.querySelector('h1').innerHTML = xmlhttp.responseText; } } }