为字符集和字符编码部分添加图片

README.md

@@ -41,7 +41,7 @@
 
 #### 2.2.3 JavaScript基本语法和DOM操作（掌握)
 
-#### 2.2.4 字符编码和字符集(了解)
+#### 2.2.4 字符集和字符编码(了解)
 
 #### 2.2.5 认识TypeScript（简单了解）
 
@@ -59,13 +59,15 @@
 
 #### 3.2.2 Bootstrap框架的使用 (了解)
 
-### 3.3 AJAX与异步请求处理
+### 3.3 异步编程与AJAX
 
-#### 3.3.1 XMLHttpRequest对象的使用 (了解)
+#### 3.3.1 异步编程
 
-#### 3.3.2 Fetch API和Promise (掌握)
+#### 3.3.2 XMLHttpRequest对象的使用 (了解)
 
-#### 3.3.3 使用jQuery进行AJAX调用 (掌握)
+#### 3.3.3 Fetch API的使用 (掌握)
+
+#### 3.3.4 jQuery的AJAX API的使用 (掌握)
 
 ### 3.4 XML简介(掌握)
 

docs/chapter02.md

@@ -317,13 +317,7 @@ CSS选择器用以筛选出要添加样式的元素。
 - **样式操作**：className, style属性。
 - **创建/删除节点**：createElement(), appendChild(), removeChild()。
 
-#### 2.2.3.4 异步编程
-- **回调函数**：理解回调函数。
-- **Promise对象**：解决异步编程中的链式调用。
-- **async/await**：让异步代码看起来更像同步代码。
-- **Fetch API**：替代XMLHttpRequest的新方法。
-
-#### 2.2.3.5 ES6+特性
+#### 2.2.3.4 ES6+特性
 - **箭头函数**：简化函数定义。
 
 > ES6允许使用 “箭头”（ => ）定义函数。
@@ -428,22 +422,44 @@ let sum = function(num1, num2){
   console.log(multiLine);
  ```
 
-#### 2.2.4字符编码和字符集(了解)
+#### 2.2.4 字符集和字符编码(了解)
 
 [字符编码和字符集PPT](./resources/javaweb-week-02-chartset.pptx)
 
-- **ASCII：** 7位编码，只能表示128个字符。
-- **Unicode：** 一种国际字符编码标准，支持世界上几乎所有的字符。
+[字符集和字符编码（Charset & Encoding）](https://www.runoob.com/w3cnote/charset-encoding.htm)
+
+计算机中储存的信息都是用二进制数表示的；而我们在屏幕上看到的英文、汉字等字符是二进制数转换之后的结果。通俗的说，按照何种规则将字符存储在计算机中，如'a'用什么表示，称为"编码"；反之，将存储在计算机中的二进制数解析显示出来，称为"解码".
+
+字符集（Charset）：是一个系统支持的所有抽象字符的集合。字符是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。
+
+字符编码（Character Encoding）：是一套法则，使用该法则能够对自然语言的字符的一个集合（如字母表或音节表），与其他东西的一个集合（如号码或电脉冲）进行配对。即在符号集合与数字系统之间建立对应关系，它是信息处理的一项基本技术。
+
+常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、GB18030字符集、Unicode字符集等。
+
+- **ASCII字符集&编码** 
+
+ASCII字符集：主要包括控制字符（回车键、退格、换行键等）；可显示字符（英文大小写字符、阿拉伯数字和西文符号）。
+
+ASCII编码：将ASCII字符集转换为计算机可以接受的数字系统的数的规则。使用7位（bits）表示一个字符，共128字符；但是7位编码的字符集只能支持128个字符，为了表示更多的欧洲常用字符对ASCII进行了扩展，ASCII扩展字符集使用8位（bits）表示一个字符，共256字符。
+
+- **GBXXXX字符集&编码**
+
+中文字符集和编码： GB2312、GBK、GB18030
+
+- **Unicode字符集&UTF编码：**
+  一种国际字符编码标准，支持世界上几乎所有的字符。
 - - **UTF-8：** 基于Unicode的编码，兼容ASCII，广泛用于Web页面。
 - - **UTF-16：** Unicode的另一种编码形式，JavaScript内部使用UTF-16。
 
+
+![](./resources/imgs/charset.png)
+
 #### 2.2.5 认识TypeScript（简单了解）
 
 [面向初学者的 TypeScript 完全指南](https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide)
 
-- **TypeScript简介：** TypeScript是JavaScript的一个超集，它添加了静态类型检查。
-- **类型系统：** TypeScript支持多种数据类型，如`number`、`string`、`boolean`、`object`、`array`等。
-- **接口与类：** TypeScript支持面向对象编程，包括类、接口、继承、抽象类等。
-- **装饰器：** 一种特殊类型的声明，可以修改类的行为。
-- **模块与命名空间：** 用于组织代码结构，避免全局命名冲突。
-- **工具与编译：** 使用`tsc`命令将TypeScript代码编译为JavaScript代码。
+TypeScript是一种由微软开发的开源编程语言。TypeScript是JavaScript的超集，意味着它能做JavaScript所做的一切，但有一些附加功能。
+
+使用TypeScript的主要原因是为JavaScript添加静态类型。静态类型意味着变量的类型在程序中的任何时候都不能被改变。
+
+TypeScript不能被浏览器理解，所以它必须由TypeScript编译器（TSC）编译成JavaScript。

docs/chapter03.md

@@ -32,11 +32,178 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
 
 
 
-### 3.3 AJAX与异步请求处理
+### 3.3 异步编程与AJAX
 
 参考[ajax(PPT)](./resources/Ajax-heima.pptx)
 
-#### 3.3.1 XMLHttpRequest对象的使用 (了解)
+
+#### 3.3.1 异步编程
+
+在JavaScript中，异步编程是一个重要的概念，它允许程序在等待某些操作（如网络请求）完成的同时继续执行其他任务。回调函数是实现异步编程的一种早期方式，在现代JavaScript中仍然非常常见，尤其是在一些旧的库或API中。
+
+
+##### 3.3.1.1 回调函数
+
+回调函数是一种函数，作为参数传递给另一个函数，并且在这个函数内部被调用。这种方式常用于处理异步操作的结果。当一个异步操作完成时，通常会调用回调函数，并将结果或者错误作为参数传递给这个回调函数。
+
+
+**示例**
+下面是一个简单的使用回调函数进行异步操作的例子：
+
+```javascript
+function doSomethingAsync(callback) {
+    setTimeout(() => {
+        const result = '这是结果';
+        callback(result); // 在异步操作完成后调用回调函数
+    }, 1000);
+}
+
+// 使用回调函数
+doSomethingAsync((result) => {
+    console.log('得到结果: ' + result);
+});
+```
+在这个例子中，`doSomethingAsync` 函数模拟了一个耗时1秒的异步操作。当这个操作完成时，它通过调用 `callback` 函数来通知外部世界，并将结果传递给这个回调函数。
+
+**回调地狱**
+
+随着应用程序变得越来越复杂，回调函数可以导致所谓的“回调地狱”（Callback Hell），即嵌套的回调函数层次过深，使得代码难以阅读和维护。例如：
+
+```javascript
+doSomethingAsync((result1) => {
+    doAnotherThingAsync(result1, (result2) => {
+        doThirdThingAsync(result2, (result3) => {
+            console.log('所有操作完成');
+        });
+    });
+});
+```
+
+为了解决这个问题，JavaScript 社区引入了 `Promise` 和 `async/await`，这些特性可以帮助我们以更简洁的方式编写异步代码。
+
+##### 3.3.1.2 Promise对象
+
+`Promise` 是 JavaScript 中一种用于处理异步操作的模式，它旨在简化异步编程并解决回调地狱的问题。`Promise` 提供了一种更加结构化的处理异步操作的方法，使得代码更易读和维护。
+
+一个 `Promise` 对象代表了一个最终可能会完成或失败的异步操作，并且它的完成（或失败）可能会发生在当前时刻，也可能是在未来的某个时刻。Promise 可以处于以下三种状态之一：
+- **pending**（未定）：初始状态，既不是成功也不是失败。
+- **fulfilled**（已成功）：意味着操作已完成，并且有一个值。
+- **rejected**（已失败）：意味着操作出现了错误，并且有一个原因（通常是错误对象）。
+
+
+**创建 Promise**
+
+创建一个 `Promise` 对象需要提供一个构造函数，该构造函数接受一个带有两个参数的执行器函数：`resolve` 和 `reject`。这两个函数用来改变 `Promise` 的状态：
+- `resolve(value)`：当异步操作成功时调用，并传入结果值。
+- `reject(reason)`：当异步操作失败时调用，并传入失败原因（通常是 `Error` 类型的一个实例）。
+
+**示例**
+
+这里是一个创建 `Promise` 并使用 `setTimeout` 模拟异步操作的例子：
+
+```javascript
+const promise = new Promise((resolve, reject) => {
+    setTimeout(() => {
+        resolve('异步操作成功');
+    }, 1000);
+});
+
+promise.then(result => {
+    console.log(result); // 输出 "异步操作成功"
+}).catch(error => {
+    console.error(error);
+});
+```
+
+**链式调用**
+`Promise` 的一个强大之处在于你可以链接多个 `.then()` 方法来指定一个操作序列。每个 `.then()` 方法返回一个新的 `Promise`，这允许你在链式调用中继续处理数据。
+
+```javascript
+new Promise(resolve => {
+    setTimeout(() => resolve(1), 1000);
+}).then(result => {
+    console.log(result); // 输出 "1"
+    return result * 2;
+}).then(newResult => {
+    console.log(newResult); // 输出 "2"
+});
+```
+
+**错误处理**
+如果在某个 `.then()` 方法中抛出了异常，或者之前的 `Promise` 被拒绝 (`rejected`)，那么链式调用中的下一个 `.catch()` 方法就会捕获到这个错误。如果没有显式的 `.catch()` 处理错误，那么未处理的 `Promise` 拒绝会被作为全局错误处理。
+
+```javascript
+new Promise((resolve, reject) => {
+    setTimeout(() => reject(new Error('出错了')), 1000);
+}).then(result => {
+    console.log(result);
+}).catch(error => {
+    console.error(error.message); // 输出 "出错了"
+});
+```
+
+> `Promise` 是一种现代的异步编程模式，它可以让我们以更加结构化的方式编写代码。它不仅解决了回调地狱的问题，还提供了强大的错误处理机制。
+
+
+##### 3.3.1.3  async异步函数/await表达式
+`async/await` 是 JavaScript 中用于简化异步代码编写的一种语法糖。它使得异步代码看起来更像同步代码，提高了代码的可读性和可维护性。
+
+**async 函数**
+
+`async` 关键字用于声明一个函数为异步函数。一旦一个函数被声明为异步函数，它将总是返回一个 `Promise`。
+
+```javascript
+async function fetchUser() {
+  // 返回一个模拟的 Promise
+  return new Promise((resolve, reject) => {
+    setTimeout(() => resolve('User data'), 2000);
+  });
+}
+
+fetchUser().then(data => console.log(data)); // 输出: User data
+```
+
+**await 表达式**
+
+`await` 关键字只能出现在 `async` 函数内部，它可以让 JavaScript 等待直到一个 `Promise` 完成（解决或拒绝）。`await` 后面跟的是一个 `Promise`，表达式的值就是 `Promise` 解决后的值。
+
+```javascript
+async function fetchData() {
+  try {
+    const response = await fetchUser();
+    console.log(response); // 输出: User data
+  } catch (error) {
+    console.error('Failed to fetch user:', error);
+  }
+}
+
+fetchData();
+```
+
+**异常处理**
+
+如果 `Promise` 被拒绝（rejected），或者在 `await` 表达式之前或之后的代码中抛出了异常，可以通过在 `async` 函数内使用 `try...catch` 语句来捕获这些异常。
+
+```javascript
+async function example() {
+  try {
+    const result = await someAsyncFunctionThatMightFail();
+    console.log(result);
+  } catch (error) {
+    console.error('Caught an exception:', error);
+  }
+}
+```
+
+**注意事项**
+
+- `await` 只能出现在 `async` 函数内。
+- 如果 `async` 函数内没有任何 `await` 表达式，那么它等同于一个普通函数，只是返回了一个已经解决的 `Promise`。
+- 当 `async` 函数内的所有 `await` 操作都没有拒绝时，整个 `async` 函数会返回一个解决的 `Promise`；如果有任何 `await` 操作被拒绝或者抛出了异常，则会返回一个被拒绝的 `Promise`。
+
+
+
+#### 3.3.2 XMLHttpRequest对象的使用 (了解)
 - **基本用法：** 创建对象、设置请求类型、发送请求、处理响应。
 - **事件监听：** 监听 `onreadystatechange` 事件来获取服务器响应的状态。
 - **请求方法：** `open` 方法设置请求类型和URL，`send` 方法发送请求。
@@ -70,7 +237,7 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
     // 发送请求
     xhr.send(); 
 ```
-#### 3.3.2 Fetch API和Promise (掌握)
+#### 3.3.3 Fetch API的使用 (掌握)
 - **Fetch API：** 是一个现代替代 XMLHttpRequest 的 API，提供了更简洁的语法和基于 Promise 的接口。
 - **基本语法：** `fetch(url)`返回一个 Promise 对象。
 
@@ -130,7 +297,7 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
 - **处理响应：** 使用`.then()`处理响应，如`.json()`或`.text()`。
 - **错误处理：** 使用`.catch()`处理网络错误或其他异常。
 
-#### 3.3.3 使用jQuery进行AJAX调用 (掌握)
+#### 3.3.4 jQuery的AJAX API的使用 (掌握)
 - **$.ajax()：** jQuery 的 AJAX 方法，提供简单的语法糖。
 - **$.get() 和 $.post()：** 简化 GET 和 POST 请求的语法。
 - **$.getJSON()：** 专门用于获取 JSON 数据的快捷方法。

docs/index.md

@@ -41,7 +41,7 @@
 
 #### 2.2.3 JavaScript基本语法和DOM操作（掌握)
 
-#### 2.2.4 字符编码和字符集(了解)
+#### 2.2.4 字符集和字符编码(了解)
 
 #### 2.2.5 认识TypeScript（简单了解）
 
@@ -59,13 +59,15 @@
 
 #### 3.2.2 Bootstrap框架的使用 (了解)
 
-### 3.3 AJAX与异步请求处理
+### 3.3 异步编程与AJAX
 
-#### 3.3.1 XMLHttpRequest对象的使用 (了解)
+#### 3.3.1 异步编程
 
-#### 3.3.2 Fetch API和Promise (掌握)
+#### 3.3.2 XMLHttpRequest对象的使用 (了解)
 
-#### 3.3.3 使用jQuery进行AJAX调用 (掌握)
+#### 3.3.3 Fetch API的使用 (掌握)
+
+#### 3.3.4 jQuery的AJAX API的使用 (掌握)
 
 ### 3.4 XML简介(掌握)