From 3cbc6e0f268a69d1895762ba07b5595e2a2b0af8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B8=A9=E8=B4=B5=E9=9B=AF?= <2046174331@qq.com> Date: Thu, 7 Dec 2023 04:23:03 +0000 Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 温贵雯 <2046174331@qq.com> --- ...1 \345\260\217\347\237\245\350\257\206.md" | 426 ++++++++++++ ...5 \350\264\255\347\211\251\350\275\246.md" | 496 ++++++++++++++ .../20231206 ajax.md" | 620 ++++++++++++++++++ 3 files changed, 1542 insertions(+) create mode 100644 "10 \346\270\251\350\264\265\351\233\257/20231201 \345\260\217\347\237\245\350\257\206.md" create mode 100644 "10 \346\270\251\350\264\265\351\233\257/20231205 \350\264\255\347\211\251\350\275\246.md" create mode 100644 "10 \346\270\251\350\264\265\351\233\257/20231206 ajax.md" diff --git "a/10 \346\270\251\350\264\265\351\233\257/20231201 \345\260\217\347\237\245\350\257\206.md" "b/10 \346\270\251\350\264\265\351\233\257/20231201 \345\260\217\347\237\245\350\257\206.md" new file mode 100644 index 0000000..2b90db8 --- /dev/null +++ "b/10 \346\270\251\350\264\265\351\233\257/20231201 \345\260\217\347\237\245\350\257\206.md" @@ -0,0 +1,426 @@ +# 笔记 + +```html + + + + + + + + Document + + + + + + +``` + +```html + + + + + + + + Document + + + + + +``` + +```html + + + + + + + + Document + + + + + + + +``` + +```html + + + + + + + + Document + + + + + + + +``` + +```html + + + + + + + + Document + + + + + + + +``` + +```html + + + + + + + + Document + + + + + + + +``` + + + + + +### 作业 + +```html + +``` + diff --git "a/10 \346\270\251\350\264\265\351\233\257/20231205 \350\264\255\347\211\251\350\275\246.md" "b/10 \346\270\251\350\264\265\351\233\257/20231205 \350\264\255\347\211\251\350\275\246.md" new file mode 100644 index 0000000..d6819ce --- /dev/null +++ "b/10 \346\270\251\350\264\265\351\233\257/20231205 \350\264\255\347\211\251\350\275\246.md" @@ -0,0 +1,496 @@ +## 笔记 + +## 深入对象 + +> 了解面向对象的基础概念，能够利用构造函数创建对象。 + +### 构造函数 + +构造函数是专门用于创建对象的函数，如果一个函数使用 `new` 关键字调用，那么这个函数就是构造函数。 + +```html + +``` + +总结： + +2. 使用 `new` 关键字调用函数的行为被称为实例化 +3. 实例化构造函数时没有参数时可以省略 `()` +4. 构造函数的返回值即为新创建的对象 +5. 构造函数内部的 `return` 返回的值无效！ + +注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。 + +### 实例成员 + +通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。 + +```html + +``` + +总结： + +1. 构造函数内部 `this` 实际上就是实例对象，为其动态添加的属性和方法即为实例成员 +2. 为构造函数传入参数，动态创建结构相同但值不同的对象 + +注：构造函数创建的实例对象彼此独立互不影响。 + +### 静态成员 + +在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。 + +```html + +``` + +总结： + +1. 静态成员指的是添加到构造函数本身的属性和方法 +2. 一般公共特征的属性或方法静态成员设置为静态成员 +3. 静态成员方法中的 `this` 指向构造函数本身 + +## 内置构造函数 + +> 掌握各引用类型和包装类型对象属性和方法的使用。 + +在 JavaScript 中**最主要**的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型，对象也被称为引用类型。 + +在 JavaScript 内置了一些构造函数，绝大部的数据处理都是基于这些构造函数实现的，JavaScript 基础阶段学习的 `Date` 就是内置的构造函数。 + +```html + +``` + +甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。 + +### Object + +`Object` 是内置的构造函数，用于创建普通对象。 + +```html + +``` + +。 + +总结： + +1. 推荐使用字面量方式声明对象，而不是 `Object` 构造函数 +2. `Object.assign` 静态方法创建新的对象 +3. `Object.keys` 静态方法获取对象中所有属性 +4. `Object.values` 表态方法获取对象中所有属性值 + +### Array + +`Array` 是内置的构造函数，用于创建数组。 + +```html + +``` + +数组赋值后，无论修改哪个变量另一个对象的数据值也会相当发生改变。 + +总结： + +1. 推荐使用字面量方式声明数组，而不是 `Array` 构造函数 + +2. 实例方法 `forEach` 用于遍历数组，替代 `for` 循环 (重点) + +3. 实例方法 `filter` 过滤数组单元值，生成新数组(重点) + +4. 实例方法 `map` 迭代原数组，生成新数组(重点) + +5. 实例方法 `join` 数组元素拼接为字符串，返回字符串(重点) + +6. 实例方法 `find` 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点) indexOf() + +7. 实例方法`every` 检测数组所有元素是否都符合指定条件，如果**所有元素**都通过检测返回 true，否则返回 false(重点) + +8. 实例方法`some` 检测数组中的元素是否满足指定条件 **如果数组中有**元素满足条件返回 true，否则返回 false + +9. 实例方法 `concat` 合并两个数组，返回生成新数组 + +10. 实例方法 `sort` 对原数组单元值排序 + +11. 实例方法 `splice` 删除或替换原数组单元 + +12. 实例方法 `reverse` 反转数组 + +13. 实例方法 `findIndex` 查找元素的索引值 + + + +### 包装类型 + +在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，如下代码举例： + +```html + +``` + +之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。 + +#### String + +`String` 是内置的构造函数，用于创建字符串。 + +```html + +``` + +总结： + +1. 实例属性 `length` 用来获取字符串的度长(重点) +2. 实例方法 `split('分隔符')` 用来将字符串拆分成数组(重点) +3. 实例方法 `substring（需要截取的第一个字符的索引[,结束的索引号]）` 用于字符串截取(重点) +4. 实例方法 `startsWith(检测字符串[, 检测位置索引号])` 检测是否以某字符开头(重点) +5. 实例方法 `includes(搜索的字符串[, 检测位置索引号])` 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点) +6. 实例方法 `toUpperCase` 用于将字母转换成大写 +7. 实例方法 `toLowerCase` 用于将就转换成小写 +8. 实例方法 `indexOf` 检测是否包含某字符 +9. 实例方法 `endsWith` 检测是否以某字符结尾 +10. 实例方法 `replace` 用于替换字符串，支持正则匹配 +11. 实例方法 `match` 用于查找字符串，支持正则匹配 + +注：String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。 + +#### Number + +`Number` 是内置的构造函数，用于创建数值。 + +```html + +``` + +总结： + +1. 推荐使用字面量方式声明数值，而不是 `Number` 构造函数 +2. 实例方法 `toFixed` 用于设置保留小数位的长度 + +## 作业 + +```html + + + + + + + + + + 购物车 + + + +
+ + + +
+ 🏠 + / + 购物车 +
+ +
+
+ +
+
+
选中
+
图片
+
单价
+
个数
+
小计
+
操作
+
+
+ +
+ + + + + + + + +
+
+ +
+ + +
+ + 总价  :  ¥ 0 + + +
+
+ +
+ + +
+ + + + +``` + diff --git "a/10 \346\270\251\350\264\265\351\233\257/20231206 ajax.md" "b/10 \346\270\251\350\264\265\351\233\257/20231206 ajax.md" new file mode 100644 index 0000000..956d292 --- /dev/null +++ "b/10 \346\270\251\350\264\265\351\233\257/20231206 ajax.md" @@ -0,0 +1,620 @@ +## Ajax预习 + +## 一、Ajax简介 + +AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。 + +通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：`无刷新获取数据`。 + +AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 + +## 1. XML简介 + +1. XML 可扩展标记语言。 +2. XML 被设计用来传输和存储数据。 +3. XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据。 + +比如说我有一个学生数据： name = "aodi" ; age = 22; gender = "男" ; + +```xml +用 XML 表示： + +aodi +22 +男 + +``` + +现在已经被 JSON 取代了。 + +```json +{"name":"aodi","age":22,"gender":"男"} +``` + +## 2. Ajax的特点 + +### 2.1 AJAX 的优点 + +\1) 可以无需刷新页面而与服务器端进行通信。 + +\2) 允许你根据用户事件来更新部分页面内容。 + +### 2.2 Ajax的缺点 + +\1) 没有浏览历史，不能回退 + +\2) 存在跨域问题(同源) + +\3) SEO 不友好 + +## 3. HTTP简介 + +HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则、约定,、规则 + +### 3.1 请求报文 + +``` +重点是格式与参数 +行 POST /s?ie=utf-8 HTTP/1.1 + +头 Host: xiaoaodi.com + Cookie: name=guigu + Content-type: application/x-www-form-urlencoded + User-Agent: chrome 83 +空行 +体 username=admin&password=admin +``` + +### 3.2 响应报文 + +```js +行 HTTP/1.1 200 OK + +头 Content-Type: text/html;charset=utf-8 + Content-length: 2048 + Content-encoding: gzip +空行 +体 + + + +

aodi

+ + +``` + +### 3.3 Chrome网络控制台查看通信报文 + +1、Network --> Hearders 请求头 + +2、Network --> Response 响应体:通常返回的是html + +## 二、原生Ajax + +1、XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。 + +2、当你前端想设置自定义的请求头时,需要如此后端设置响应头 + +```js +//表示接收任意类型的请求 +app.all('/server', (request, response) => { + //响应头 允许跨域 运行自定义响应头 + response.setHeader('Access-Control-Allow-Origin', '*'); + response.setHeader('Access-Control-Allow-Headers', '*');} +``` + +3、`ajax请求状态`:xhr.readyState 0：请求未初始化，还没有调用 open()。 + + 1：请求已经建立，但是还没有发送，还没有调用 send()。 + + 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 + + 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。 + + 4：响应已完成；您可以获取并使用服务器的响应了 + +## 1. Ajax的使用 + +使用步骤: + +```js +1) 创建 XMLHttpRequest 对象 +var xhr = new XMLHttpRequest(); +2) 设置请求信息 +xhr.open(method, url); +//可以设置请求头，一般不设置 +xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +3) 发送请求 +xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用 +4) 接收响应 +//xhr.responseXML 接收 xml 格式的响应数据 +//xhr.responseText 接收文本格式的响应数据 +xhr.onreadystatechange = function (){ +if(xhr.readyState == 4 && xhr.status == 200){ +var text = xhr.responseText; +console.log(text); +}} +``` + +### 1.1 Get方式 + +```js +//绑定事件 + btn.onclick = function () { + //1. 创建对象 + const xhr = new XMLHttpRequest(); + //2. 初始化 设置请求方法和 url + xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300'); + //3. 发送 + xhr.send(); + //4. 事件绑定 处理服务端返回的结果 + // on when 当....时候 + // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4 + // change 改变 + xhr.onreadystatechange = function () { + //判断 (服务端返回了所有的结果) + if (xhr.readyState === 4) { + //判断响应状态码 200 404 403 401 500 + // 2xx 成功 + if (xhr.status >= 200 && xhr.status < 300) { + //处理结果 行 头 空行 体 + //响应 + // console.log(xhr.status);//状态码 + // console.log(xhr.statusText);//状态字符串 + // console.log(xhr.getAllResponseHeaders());//所有响应头 + // console.log(xhr.response);//响应体 + //设置 result 的文本 + result.innerHTML = xhr.response; + } else {} + } + } + } +``` + +### 1.2 Post方式 + +```js +//绑定事件 + result.addEventListener("mouseover", function(){ + //1. 创建对象 + const xhr = new XMLHttpRequest(); + //2. 初始化 设置类型与 URL + xhr.open('POST', 'http://127.0.0.1:8000/server'); + //设置请求头 + xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); + xhr.setRequestHeader('name','aodi'); + //3. 发送 + xhr.send('a=100&b=200&c=300'); + // xhr.send('a:100&b:200&c:300'); + // xhr.send('1233211234567'); + //4. 事件绑定 + xhr.onreadystatechange = function(){ + //判断 + if(xhr.readyState === 4){ + if(xhr.status >= 200 && xhr.status < 300){ + //处理服务端返回的结果 + result.innerHTML = xhr.response; + } + } + } + }); +``` + +### 1.3 解决ie缓存问题 + +问题：在一些浏览器中(IE),由于`缓存机制`的存在，ajax 只会发送的第一次请求，剩余多次请求不会再发送给浏览器而是直接加载缓存中的数据。 + +解决方式：浏览器的缓存是根据 url地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题 `xhr.open("get","/testAJAX?t="+Date.now());` + +### 1.4 请求超时与网络异常 + +当你的请求时间过长,或者无网络时,进行的相应处理 + +```js +btn.addEventListener('click', function(){ + const xhr = new XMLHttpRequest(); + //超时设置 2s 设置 + xhr.timeout = 2000; + //超时回调 + xhr.ontimeout = function(){ + alert("网络异常, 请稍后重试!!"); + } + //网络异常回调 + xhr.onerror = function(){ + alert("你的网络似乎出了一些问题!"); + } + + xhr.open("GET",'http://127.0.0.1:8000/delay'); + xhr.send(); + xhr.onreadystatechange = function(){ + if(xhr.readyState === 4){ + if(xhr.status >= 200 && xhr.status< 300){ + result.innerHTML = xhr.response; + } + } + } + }) +``` + +### 1.5 取消请求 + +在请求发出去后`但是未响应完成`时可以进行取消请求操作 + +```js +const btns = document.querySelectorAll('button'); + let x = null; + btns[0].onclick = function(){ + x = new XMLHttpRequest(); + x.open("GET",'http://127.0.0.1:8000/delay'); + x.send(); + } + // abort + btns[1].onclick = function(){ + x.abort(); + } +``` + +### 1.6 重复请求问题 + +利用之前Ⅴ中取消请求知识点,当我点击时判断之前请求是否在发送中,如果是,则停止请求 + +```js +btns[0].onclick = function(){ + //判断标识变量 + if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求 + x = new XMLHttpRequest(); + //修改 标识变量的值 + isSending = true; + x.open("GET",'http://127.0.0.1:8000/delay'); + x.send(); + x.onreadystatechange = function(){ + if(x.readyState === 4){ + //修改标识变量 + isSending = false; + } + } + } +``` + + + + + +## 作业 + +### 购物车 + +```html + + + + + + + + + + 购物车 + + + +
+ + + +
+ 🏠 + / + 购物车 +
+ +
+
+ +
+
+
选中
+
图片
+
单价
+
个数
+
小计
+
操作
+
+
+ +
+ + + + + + + + +
+
+ +
+ + +
+ + 总价  :  ¥ 0 + + +
+
+ +
+ + +
+ + + + +``` + + + +### ajax天气预报 + +```html + + + + + + jajx + + + +
+ + + + + + + + + + + + +
城市日期温度天气图示
+ + + + + + + + + + + + + + + + +
日期天别白天晚上天气图示风向风级
+
+ + + + +``` + + + -- Gitee