From 7eca4adb01cdb9452edfcba416ce91bacc62d81b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?09=E9=99=88=E7=83=BD=E6=9D=B0sql=E8=BF=9B=E9=98=B6?=
 <3241892760@qq.com>
Date: Sun, 4 Dec 2022 23:29:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../11.30\345\216\237\347\224\237ajax.md"     | 145 ++++++++++++++++++
 .../12.01JQueryPromise.md"                    |  75 +++++++++
 2 files changed, 220 insertions(+)
 create mode 100644 "09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.30\345\216\237\347\224\237ajax.md"
 create mode 100644 "09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/12.01JQueryPromise.md"

diff --git "a/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.30\345\216\237\347\224\237ajax.md" "b/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.30\345\216\237\347\224\237ajax.md"
new file mode 100644
index 0000000..1c7c60f
--- /dev/null
+++ "b/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.30\345\216\237\347\224\237ajax.md"
@@ -0,0 +1,145 @@
+**jquery与ajax的区别：**
+
+**AJAX**
+
+AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。
+
+组成：
+
+- 基于XHTML和CSS标准的表示；
+- 使用Document Object Model进行动态显示和交互；
+- 使用XML和XSLT做数据交互和操作；
+- 使用XML HttpRequest与服务器进行异步通信；
+- 使用JavaScript绑定一切。
+
+**jquery与ajax的区别：**
+
+- Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
+- jQuery是一个库，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便。
+
+区别就在于Ajax是一种异步请求技术，而jQuery对Ajax进行了封装，更方便我们使用。
+
+使用 AJAX 请求改变
+
+元素的文本：
+
+$("button").click(function(){    $.ajax({url:"demo_test.txt",success:function(result){        $("#div1").html(result);    }}); });
+
+## 定义和用法
+
+ajax() 方法用于执行 AJAX（异步 HTTP）请求。
+
+所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
+
+### 一，原生AJAX
+
+#### 1，GET方法；传送数据量小，处理效率高，安全性低，会被缓存
+
+- send()中不需要添加任何参数,因为在连接服务器的时候就已经发送
+- get请求就不必要设置 xhr.setRequestHeader(header,value)
+
+var newAj=new XMLHttpRequest();
+        newAj.open("GET","json练习.json",true);
+        newAj.send();
+        newAj.onreadystatechange=function(){
+            if (newAj.readyState==4) {
+                if (newAj.status==200) {
+                    var obj=JSON.parse(newAj.responseText);
+                    console.log(obj);
+                }
+            }
+        }
+
+#### 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('请求失败')
+​            })
+​        }
+​    )
diff --git "a/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/12.01JQueryPromise.md" "b/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/12.01JQueryPromise.md"
new file mode 100644
index 0000000..5283144
--- /dev/null
+++ "b/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/12.01JQueryPromise.md"
@@ -0,0 +1,75 @@
+## promise
+
+Promise
+
+Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
+
+由于 Promise 是 es6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。
+
+##### promise的三种状态
+
+Promise 有三种状态 ，分别是 pending 、 resolved 、rejected
+
+##### pending可以转换成另外两种状态
+
+**pending -> resolved**
+
+**pending -> rejected**
+
+// PromiseState(在每个promise对象中，状态只会改变一次)：pending准备中   
+// fulfilled（成功） ：调用了resolve函数，将状态改为成功
+// rejected（失败）：调用了reject函数，将状态改为失败
+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);
+    }
+)
+console.log('1111111111111');
+//then(成功时调用的函数,失败时调用的函数),返回值也是一个promise对象,pending
+console.log(p)
+//get
+//回调地狱
+$('div').eq(0).one('mousemove', function () {
+    $.get('data.json', function (data) {
+        // console.log(data.username);
+        //对象解构 username='周飘'
+        const { username } = data;
+        $.get('data1.json', function (data1) {
+            const contact = data1[username]
+            $.get('data2.json', function (data2) {
+                console.log(username + ':' + data2[contact]);
+            })
+        })
+    })
+})
+
+###  then 链式操作的用法
+
+所以，从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：
+
+p.then((data) => {
+
+​    console.log(data);
+
+})
+
+.then((data) => {
+
+​    console.log(data);
+
+})
+
+.then((data) => {
+
+​    console.log(data);
+
+});
+
-- 
Gitee