1. Ajax
什么是 AJAX
定义:
AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。简单点说，就是使用XLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
怎么用 AJAX ?
1.先使用 axios库，与服务器进行数据通信
- 基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次
- Vue、React 项目中都会用到 axios
2.再学习 XMLHttpRequest 对象的使用，了解 AAX 底层原理
axios 使用
语法:
1.引入axios.js: https://cdn.isdelivr.net/npm/axios/dist/axios.min.is
2.使用 axios 函数
传入配置对象
再用.then 回调函数接收结果，并做后续处理
URL:就是统一资源定位符，简称网址，用于访问网络上的资源
axios-查询参数
语法:使用 axios 提供的 params 选项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <p class="my-p"></p> <script> axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: '四川省' } }).then(resullt => { console.log(resullt); console.log(resullt.data.list.join("<br\>")); document.querySelector('.my-p').innerHTML = resullt.data.list.join("<br\>") }) </script> </body> </html>
axios 请求配置
url:请求的 URL 网址
- method:请求的方法，GET可以省略(不区分大小写)
- data:提交数据
数据提交-注册账号
需求:通过 axios 提交用户名和密码，完成注册功能注册用户 URL 地址:http://hmajax.itheima.net/api/register请求方法:POST
参数名:
- username用户名(中英文和数字组成，最少8位)
- password 密码(最少6位)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <p class="my-p"></p> <button class="bin">1111</button> <script> axios({ url: 'http://hmajax.itheima.net/api/register', method: 'post', data: { username: 'doujiang1', password: '123456' } }).then(resullt => { console.log(resullt); }) </script> </body> </html>
axios 错误处理
场景:再次注册相同的账号，会遇到报错信息处理:用更直观的方式，给普通用户展示错误信息
此网页显示:
语法:在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <p class="my-p"></p> <button class="bin">1111</button> <script> axios({ url: 'http://hmajax.itheima.net/api/register', method: 'post', data: { username: 'doujiang1', password: '123456' } }).then(resullt => { console.log(resullt); }).catch(re => { console.log(re.response.data.message); alert(re.response.data.message) }) </script> </body> </html>
传送门：欢迎使用 - AJAX阶段 (apifox.com)
https://apifox.com/apidoc/project-1937884
form-serialize 插件（先下载插件）
作用:快速收集表单元素的值
语法：
AJAX原理-XMLHttpRequest
定义:
XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。xLHttpRequest 在AJAX 编程中被大量使用
使用 XMLHttpRequest
步骤:
- 创建 XMLHttpRequest 对象
- 配置请求方法和请求 url 地址
- 监听 loadend 事件，接收响应结果
- 发起请求
<body>
<p class="my-p"></p>
<div class="div1"></div>
<script>
const xhr = new XMLHttpRequest();
xhr.open('get', 'https://hmajax.itheima.net/api/province');
xhr.addEventListener('loadend', () => {
console.log(xhr.response);
const xhr01 = JSON.parse(xhr.response);
console.log(xhr01.list.join('<br>'));
document.querySelector('.my-p').innerHTML = xhr01.list.join('<br>');
})
xhr.send()
</script>
</body>XMLHttpRequest查询参数
请求头设置 Content-Type:application/json
请求体携带JSON 字符串
Promise
Promise-三种状态
作用:了解Promise对象如何关联的处理函数，以及代码执行顺序
概念:一个Promise对象，必然处于以下几种状态之一
- 待定(pending)初始状态，既没有被兑现，也没有被拒绝
- 已兑现(fulfilled)意味着，操作成功完成
- V已拒绝(rejected)意味着，操作失败
注意:Promise对象一旦被兑现/拒绝就是已敲定了，状态无法再被改变
封装 简易axios 获取省份列表
需求:基于 Promise+XHR 封装 myAxios 函数，获取省份列表展示
步骤:
- 定义 myAxios 函数，接收配置对象，返回 Promise 对象
- 发起 XHR 请求，默认请求方法为 GET
- 调用成功/失败的处理程序
- 使用 myAxios 函数，获取省份列表展示
同步代码和异步代码
同步代码:
我们应该注意的是，实际上浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作，在上一行完成后才会执行下一行这样做是很有必要的，因为每一行新的代码都是建立在前面代码的基础之上的。这也使得它成为一个同步程序。
异步代码:
异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时，你的程序也将在任务完成后显示结果。
- 同步代码:逐行执行，需原地等待结果后，才继续向下执行
- 异步代码:调用后耗时，不阻塞代码继续执行(不必原地等待)，在将来完成后触发一个回调函数
JS 中有哪些异步代码?
- setTimeout /setinterval
- 事件
- AJAX
回调函数地狱
- 需求:展示默认第一个省，第一个城市，第一个地区在下拉菜单中
- 概念:在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
- 缺点:可读性差，异常无法捕获，耦合性严重，牵一发动全身
解决回调函数地狱：Promise-链式调用
- 概念:依靠 then()方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束
- 细节:then()回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果
- 好处:通过链式调用，解决回调函数嵌套问题
async函数和await
定义:
async 函数是使用 async 关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。 async 和 await 关键字让我们可以用一种更简洁的方式写出基于 promise 的异步行为，而无需刻意地链式调用 promise。
在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值
2. Node.js
Node.js: 是一个跨平台 JavaScript 运行环境,使开发者可以搭建服务器端的 JavaScript 应用程序
作用:使用 Node.js 编写服务器端程序
- 编写数据接口，提供网页资源浏览功能等等
- 前端工程化:为后续学习 Vue 和 React 等框架做铺垫
前端工程化:开发项目直到上线，过程中集成的所有工具和技术
Node.js 为何能执行JS?
- 首先:浏览器能执行JS 代码，依靠的是内核中的 V8 引擎(C++ 程序)
- 其次:Node.js 是基于Chrome V8 引擎进行封装(运行环境)
// 目标:基于 fs 模块读写文件内
// 1.加载 fs 模块对象
// 2.写入文件内容
// 3.读取文件内容
const fs = require('fs')
fs.writeFile('./test.txt', 'Hello,Nodejs', (err) => {
if (err) {
console.log(err);
} else {
console.log('写入成功');
}
})
fs.readFile('./test.txt', (err, data) => {
if (err) {
console.log(err);
} else {
//toString转换成字符串
console.log(data.toString());
}
})2.path 模块-路径处理：
问题:Node.is 代码中，相对路径是根据终端所在路径来查找的，可能无法找到你想要的文件
建议:在 Node.js 代码中，使用绝对路径
补充:_dirname 内置变量(获取当前模块目录-绝对路径)
注意:path.join()会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起
3.URL 中的端口号
URL:统一资源定位符，简称网址，用于访问服务器里的资源
Web 服务程序:用于提供网上信息浏览功能
注意:0-1023 和一些特定端口号被占用，我们自己编写服务程序请避开使用
4.http 模块-创建 Web 服务
5.什么是模块化：
CommonJS标准:
ECMAScript 标准-默认导出和导入：
需求:封装并导出基地址和求数组元素和的函数
注意:Node.js 默认支持CommonJS 标准语法
如需使用 ECMAScript 标准语法，在运行模块所在文件夹新建 package.json 文件，并设置{"type":"module”}
ECMAScript 标准-命名导出和导入：
3. npm
包:将模块，代码，其他资料聚合成一个文件夹
包分类:
- 项目包:主要用于编写项目和业务逻辑
- 软件包:封装工具和方法进行使用
要求:根目录中，必须有 package.json 文件(记录包的清单信息)
注意:导入软件包时，引入的默认是index.is 模块文件/main 属性指定的模块文件
需求:封装数组求和函数的模块，判断用户名和密码长度函数的模块，形成成一个软件包
npm --软件包管理器：
npm-安装所有依赖:
- 1.当项目中只有 package.json 没有 node modules 怎么办当前项目下，执行npmi安装所有依赖软件包
- 2.为什么 node modules 不进行传递?因为用 npm 下载比磁盘传递要快
npm-全局软件包 nodemon:
软件包区别:
- 本地软件包:当前项目内使用，封装属性和方法，存在于node_modules
- 全局软件包:本机所有项目使用，封装命令和工具，存在于系统设置的位置
nodemon作用:替代 node命令，检测代码更改，自动重启程序
使用:
- 1.安装:npminodemon-g(-g 代表安装到全局环境中)
- 2.运行:nodemon 待执行的目标js 文件
需求:启动准备好的项目，修改代码保存后，观察自动重启应用程序
nodemon 怎么用?
- 先确保安装npminodemon-g
- 使用 nodemon 执行目标js 文件
4. WebPack
概念 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)https://www.webpackjs.com/concepts/
定义:本质上，webpack是一个用于现代 JavaScript应用程序的 静态模块打包工具。当webpack处理应用它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所程序时，需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。
静态模块:指的是编写代码过程中的，html，css，js，图片等固定内容的文件
打包:把静态模块内容，压缩，整合，转译等(前端工程化)
- 把 less/sass 转成 css 代码
- 把 ES6+降级成 ES5
- 支持多种模块标准语法
自动生成 html 文件：
插件 html-webpack=plugin:在 Webpack 打包时生成 html 文件
打包css代码：
加载器 css-loader:解析 css 代码
加载器 style-loader:把解析后的 css 代码插入到 DOM
优化--css代码：
优化-压缩过程:
多读webpack中文文档：概念 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
