From 780502f456f9402831c9726bd6292b0835c0b303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E8=B6=85?=
 <9828390+wu-chao24@user.noreply.gitee.com>
Date: Fri, 2 Dec 2022 15:56:46 +0000
Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 吴超 <9828390+wu-chao24@user.noreply.gitee.com>
---
 ...24\346\211\230\347\254\224\350\256\260.md" |  41 +++++
 .../11.29 AJAX\347\254\224\350\256\260.md"    | 163 ++++++++++++++++++
 ...47\224\237AJAX\347\254\224\350\256\260.md" | 145 ++++++++++++++++
 .../12.1Promise\347\254\224\350\256\260.md"   |  58 +++++++
 4 files changed, 407 insertions(+)
 create mode 100644 "30\345\220\264\350\266\205/\347\254\224\350\256\260/11.28\344\272\213\344\273\266\345\247\224\346\211\230\347\254\224\350\256\260.md"
 create mode 100644 "30\345\220\264\350\266\205/\347\254\224\350\256\260/11.29 AJAX\347\254\224\350\256\260.md"
 create mode 100644 "30\345\220\264\350\266\205/\347\254\224\350\256\260/11.30\345\216\237\347\224\237AJAX\347\254\224\350\256\260.md"
 create mode 100644 "30\345\220\264\350\266\205/\347\254\224\350\256\260/12.1Promise\347\254\224\350\256\260.md"

diff --git "a/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.28\344\272\213\344\273\266\345\247\224\346\211\230\347\254\224\350\256\260.md" "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.28\344\272\213\344\273\266\345\247\224\346\211\230\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..f882b8d
--- /dev/null
+++ "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.28\344\272\213\344\273\266\345\247\224\346\211\230\347\254\224\350\256\260.md"
@@ -0,0 +1,41 @@
+## 事件委托
+
+  事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
+
+1. on方法
+
+   ```
+     $(function(){
+              $("#lists").on("click","li",function(event){
+                   var target = $(event.target);
+                    target.css("background-color","red");
+                })
+            })
+   ```
+
+2. delegate（）方法
+
+   ```
+      $(function(){
+                $("#lists").delegate("li","click",function(event){
+                    var target = $(event.target);
+                    target.css("background-color","red");
+                })
+            })
+   ```
+
+   on()方法和delegate（）方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素（本文中的li）会触发事件，而代为执行的父元素（本文中为ul）不会触发事件，所以我们不需要盘判断触发事件的元素节点名，这一点明显优于原生的JavaScript。
+
+3. bind()方法
+
+           $(function(){
+                $("#lists").bind("click","li",function(event){
+                    var target = $(event.target);
+                    if(target.prop("nodeName")=="LI"){
+                    target.css("background-color","red");}
+                })
+            })
+
+bind()方法同原生的JavaScript实现方法一样，当父元素代子元素执行事件时，父元素也会触发事件，所以我们需要判断一下触发事件的元素名。此外，用bind()方法给元素绑定事件的时候要注意，它只能给已经存在DOM元素添加事件，不能给未来存在DOM
+
+元素添加添加事件。如果要频繁地添加DOM元素，并且给新添加的DOM元素绑定事件的话，用live(),delegate(),on()等方法。鉴于jQuery从1.7之后就不推荐live（）和delegate（）方法了
\ No newline at end of file
diff --git "a/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.29 AJAX\347\254\224\350\256\260.md" "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.29 AJAX\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..859f97c
--- /dev/null
+++ "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.29 AJAX\347\254\224\350\256\260.md"	
@@ -0,0 +1,163 @@
+### 1. AJAX 简介
+
+AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：==无刷新获取数据==。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
+
+### 2. AJAX特点
+
+##### 1AJAX 的优点
+
+1. 可以无需刷新页面而与服务器端进行通信。
+2. 允许你根据用户事件来更新部分页面内容。
+
+##### 2 AJAX 的缺点
+
+1. 没有浏览历史，不能回退
+2. 存在跨域问题(同源)
+3. SEO 不友
+
+### 3.使用
+
+##### 1 XMLHttpRequest
+
+有关Ajax的所有操作都是通过`XMLHttpRequest`来操作的。
+
+##### 2 服务端的准备
+
+在使用Ajax之前，因为需要对服务端发送请求，因此这里使用`express`框架，创建`server.js`文件搭建一个服务器。由于Ajax默认是服从同源策略，因此在服务器中设置`Access-Control-Allow-Origin`响应头在解决跨域问题（CORS跨域）。
+
+```javascript
+// server.js
+const express = require('express')
+// 创建应用对象
+const app = express()
+// 创建路由规则
+app.get('/index', (request, response) => {
+  // 设置允许跨域的响应头
+  response.setHeader('Access-Control-Allow-Origin', '*')
+  // 设置响应体
+  response.send('hello ajax')
+})
+app.post('/index', (request, response) => {
+  response.setHeader('Access-Control-Allow-Origin', '*')
+  response.send('post ajax')
+})
+
+// 监听端口，启动服务
+app.listen(8282, () => {
+  console.log('服务器启动，8000端口监听中...');
+})
+复制代码
+```
+
+在测试过程中，要保证服务端处于开启状态，开启命令：`node server.js`
+
+##  4.同步与异步
+
+```
+* `xhr.open`的第三个参数是async，默认为true，用来控制xhr是否以异步形式发送请求
+* 当以同步形式调用时，javascript会在`xhr.send`执行后直到收到响应为止进行等待
+
+## 响应数据格式
+
+* 影响到客户端的javascript如何对服务端返回的数据进行解析
+* 服务端需要设置合理的content-type来决定客户端如何对其进行解析
+
+### XML
+
+* 响应头为application/xml
+* 从responseXML中获取，且能通过dom操作来操作xml
+
+### JSON
+
+* 响应头为application/json
+
+## 兼容方案
+
+* 对于IE5/6需要使用兼容方案
+  `xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('microsoft.XMLHTTP')`
+ 
+```
+
+## 5.jQuery中的封装
+
+```
+<script>
+    function ajax(options){
+        options = options ||{};  //调用函数时如果options没有指定，就给它赋值{},一个空的Object
+        options.type=(options.type || "GET").toUpperCase();/// 请求格式GET、POST，默认为GET
+        options.dataType=options.dataType || "json";    //响应数据格式，默认json
+
+        var params=formatParams(options.data);//options.data请求的数据
+
+        var xhr;
+        //考虑兼容性
+        if(window.XMLHttpRequest){
+            xhr=new XMLHttpRequest();
+        }else if(window.ActiveObject){//兼容IE6以下版本
+            xhr=new ActiveXobject('Microsoft.XMLHTTP');
+        }
+
+        //启动并发送一个请求
+        if(options.type=="GET"){
+            xhr.open("GET",options.url+"?"+params,true);
+            xhr.send(null);
+        }else if(options.type=="POST"){
+            xhr.open("post",options.url,true);
+
+            //设置表单提交时的内容类型
+            //Content-type数据请求的格式
+            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+            xhr.send(params);
+        }
+
+    //    设置有效时间
+        setTimeout(function(){
+            if(xhr.readySate!=4){
+                xhr.abort();
+            }
+        },options.timeout)
+
+    //    接收
+    //     options.success成功之后的回调函数  options.error失败后的回调函数    //xhr.responseText,xhr.responseXML  获得字符串形式的响应数据或者XML形式的响应数据
+        xhr.onreadystatechange=function(){
+            if(xhr.readyState==4){
+                var status=xhr.status;
+                if(status>=200&& status<300 || status==304){
+                  options.success&&options.success(xhr.responseText,xhr.responseXML);
+                }else{
+                    options.error&&options.error(status);
+                }
+            }
+        }
+    }
+
+    //格式化请求参数
+    function formatParams(data){
+        var arr=[];
+        for(var name in data){
+            arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
+        }
+        arr.push(("v="+Math.random()).replace(".",""));
+        return arr.join("&");
+
+    }
+    //基本的使用实例
+    ajax({
+        url:"http://server-name/login",
+        type:'post',
+        data:{
+            username:'username',
+            password:'password'
+        },
+        dataType:'json',
+        timeout:10000,
+        contentType:"application/json",
+        success:function(data){
+　　　　　　。。。。。。//服务器返回响应，根据响应结果，分析是否登录成功
+        },        //异常处理
+        error:function(e){
+            console.log(e);
+        }
+    })
+</script>
+```
\ No newline at end of file
diff --git "a/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.30\345\216\237\347\224\237AJAX\347\254\224\350\256\260.md" "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.30\345\216\237\347\224\237AJAX\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..a6a2335
--- /dev/null
+++ "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/11.30\345\216\237\347\224\237AJAX\347\254\224\350\256\260.md"
@@ -0,0 +1,145 @@
+## 一.原生AJAX
+
+### 1、GET方法
+
+```javascript
+//1. 创建XMLHttpRequest类型的对象
+const xhr = new XMLHttpRequest();
+//2. 调用open方法对请求进行初始化 设置请求方法为“GET”且指明目标资源地址，可以带上查询字符串
+xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
+//3. 调用send方法发送请求
+xhr.send();
+//4. 给xhr对象绑定相关响应事件以处理服务端返回的结果
+// 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);//响应体
+    } else {
+        console.warn('请求结果不成功');
+    }
+  }
+}
+```
+
+### 2. post方法;
+
+#### 传送数据量大，处理效率低，安全性高，不会被缓存
+
+- send()中需要添加参数，建议设置请求头
+- 参数可以是null或者xhr.send()|send(带有参数的)post请求在传递值的情况下必须 设置 xhr.setRequestHeader(header,value)
+
+```
+        var xhr = new XMLHttpRequest();
+        xhr.open('post', 'data.json', true);
+        xhr.send({ a: 100, b: 200 });
+        //设置行头
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                console.log(xhr.response['No1']);
+                // 手动转成对象
+                // var obj = JSON.parse(xhr.response);
+            }
+        }
+```
+
+### 3. 响应数据处理；将返回的json类型的数据转换成对象
+
+##### 1.手动转换
+
+```
+var obj = JSON.parse(xhr.response)
+console.log(obj.name)
+```
+
+##### 2.自动转换
+
+```
+//创建对象后设置:
+xhr.responseType = 'json';
+console.log(xhr.response.name)
+```
+
+### 二，jQuery Ajax
+
+#### 1，$.get()；执行get请求方式的ajax
+
+```
+    $('button').eq(0).click(
+        function () {
+            $.get('data.json',{a:100,b:200},function (data) {
+                console.log(data);
+            },'json');
+        }
+    )
+```
+
+#### 2，$.post()；执行post请求方式的ajax
+
+```
+    $('button').eq(1).click(
+        function () {
+            $.post('data.json',{a:100,b:200},function (data) {
+                console.log(data);
+            },'json');
+        }
+    )
+```
+
+#### 3，$.getJSON()
+
+- 通过Ajax获取服务器中JSON格式的数据
+- “全局方法”，直接定义在jQuery对象（即“$”）下的方法
+
+```
+    $('button').eq(2).click(
+        function () {
+            $.getJSON('data.json',function (data) {
+                console.log(data);
+            })
+        }
+    )
+```
+
+#### 4，$.getScript()；动态加载JavaScript的方法
+
+- 通过AJAX来获取并运行一个外部JavaScript文件
+- 异步跨域加载JavaScript文件，可避免提前加载JavaScript文件
+- 减少服务器和客户端的负 担，加快页面加载速度
+
+```
+    $('button').eq(3).click(
+        function () {
+            $.getScript('test.js');
+        }
+    )
+```
+
+#### 5，$.ajax()；核心方法，所有的其他方法都是在内部使用此方法
+
+- 以上方法用ajax（）都能实现
+
+```
+    $('button').eq(4).click(
+        function () {
+            $.ajax({
+                url:'data.json',
+                type:'get',
+                data:{a:100,b:200},
+                success:(data) => console.log(data),
+                error:()=> console.log('请求失败')
+            })
+        }
+    )
+```
\ No newline at end of file
diff --git "a/30\345\220\264\350\266\205/\347\254\224\350\256\260/12.1Promise\347\254\224\350\256\260.md" "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/12.1Promise\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..7927e06
--- /dev/null
+++ "b/30\345\220\264\350\266\205/\347\254\224\350\256\260/12.1Promise\347\254\224\350\256\260.md"
@@ -0,0 +1,58 @@
+## Promise
+
+在JavaScript中，promise是一个对象，返回一个希望在未来得到的结果，不是现在。
+
+一个promise有三种状态：
+
+- pending: 初始状态，既没有完成，也没有失败。
+- fulfilled: 完成/成功
+- rejected: 失败/拒绝
+
+一个promise以`pending`状态开始，最后会走向`fulfilled`成功或者`rejected`失败。
+
+## 创建一个Promise
+
+要创建Promise对象，我们使用Promise构造函数
+
+```javascript
+let completed = true;
+
+let learnJS = new Promise((resolve, reject) => {
+    if (completed) {
+        resolve("我已经完成JS学习");
+    } else {
+        reject("我未完成JS学习");
+    }
+});
+复制代码
+```
+
+Promise构造函数接受一个函数作为执行器，执行器函数的参数是两个函数，分别为resolve、reject，代表成功和失败。
+
+当我们new Promise()时，执行器函数默认执行。
+
+```
+console.log(learnJS); 
+//输出：Promise {<fulfilled>: '我已经完成学习'}
+```
+
+###  PromiseResult
+
+接收**resolve**或者**reject**中的参数
+
+```
+const p = new Promise((resolve, reject) => {
+    // resolve('这是成功');
+    reject('这是失败');  
+}).then(data =>{
+    console.log('成功then调用');
+    return 123
+    //catch:捕获异常
+}).catch(
+    function (e) {
+        console.log(e);
+    }
+)
+//then(成功时调用的函数,失败时调用的函数),返回值也是一个promise对象,pending
+console.log(p)
+```
\ No newline at end of file
-- 
Gitee