From 979e92a1dd924caf9a585b754db7f29d3c167b14 Mon Sep 17 00:00:00 2001
From: unknown <2264070297@qq.com>
Date: Mon, 5 Dec 2022 00:00:13 +0800
Subject: [PATCH] 555
---
.../11.28--Jquery\346\226\271\346\263\225.md" | 45 ++++++++++
.../\347\254\224\350\256\260/11.29--Ajax.md" | 41 ++++++++++
...44\270\216\345\216\237\347\224\237Ajax.md" | 82 +++++++++++++++++++
.../12.1--Promise.md" | 16 ++++
4 files changed, 184 insertions(+)
create mode 100644 "29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.28--Jquery\346\226\271\346\263\225.md"
create mode 100644 "29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.29--Ajax.md"
create mode 100644 "29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.30--jqueryAjax\344\270\216\345\216\237\347\224\237Ajax.md"
create mode 100644 "29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/12.1--Promise.md"
diff --git "a/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.28--Jquery\346\226\271\346\263\225.md" "b/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.28--Jquery\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..482524b
--- /dev/null
+++ "b/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.28--Jquery\346\226\271\346\263\225.md"
@@ -0,0 +1,45 @@
+jQuery
+bind():绑定
+$(selector).bind(event,data,function)
+on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
+
+绑定事件
+
+绑定多个事件
+
+JQuery off() 方法
+off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
+
+解绑事件
+
+hover()方法
+用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,会触发指定的第二个函数.
+
+
\ No newline at end of file
diff --git "a/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.29--Ajax.md" "b/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.29--Ajax.md"
new file mode 100644
index 0000000..92e6eaf
--- /dev/null
+++ "b/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.29--Ajax.md"
@@ -0,0 +1,41 @@
+Ajax
+1.http:超文本传输协议
+ 请求(request)和响应(response)
+ 请求:请求报文
+ 请求行:方法(get,post) 请求地址(url) http版本(1.1)
+2.Ajax 的使用
+Ajax一般包括以下步骤
+
+创建 XMLHttpRequest 实例
+
+发出 HTTP 请求
+
+接收服务器传回的数据
+
+处理网页数据
+1.创建http请求对象
+ var oAjax = new XMLHttpRequest();
+ //2.请求行设置
+ oAjax.open("GET","data.json",true);
+ //3.发送一个请求
+ oAjax.send();
+ //4.
+ //the server responded with a status of 404 (Not Found)
+ oAjax.onreadystatechange = function () {
+ if(oAjax.readyState == 4){
+ if(oAjax.status == 200){
+ console.log(oAjax.responseText);
+ var obj = JSON.parse(oAjax.responseText);
+ console.log(obj);
+ }
+ }
+ }
+3.JSON.stringify(obj):将对象转成json数据格式
+ const arr = [1, 2, 3, 4, 5];
+ var obj = {
+ name: '周飘',
+ age: 18
+ }
+ var json = JSON.stringify(obj);
+4.JSON.parse(json):将json转成对象
+ var jsonObj = JSON.parse(json);
\ No newline at end of file
diff --git "a/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.30--jqueryAjax\344\270\216\345\216\237\347\224\237Ajax.md" "b/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.30--jqueryAjax\344\270\216\345\216\237\347\224\237Ajax.md"
new file mode 100644
index 0000000..8f75749
--- /dev/null
+++ "b/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/11.30--jqueryAjax\344\270\216\345\216\237\347\224\237Ajax.md"
@@ -0,0 +1,82 @@
+jQuery Ajax
+Ajax的原理:
+
+简单来说就是 通过XmlHttpRequest对象向服务器发异步请求,从服务器获得数据,然后用 javascript 来操作DOM更新页面的技术。
+GET方式获取数据
+ $.get
+ $('button').eq(0).click(
+ function () {
+ $.get('data.json',{a:100,b:200},function (data) {
+ console.log(data);
+ },'json');
+ }
+ )
+2.POST方式获取数据
+ $.post
+ $('button').eq(1).click(
+ function () {
+ $.post('data.json',{a:100,b:200},function (data) {
+ console.log(data);
+ },'json');
+ }
+ )
+3.getJSON方式获取数据
+ getJSON
+ $('button').eq(2).click(
+ function () {
+ $.getJSON('data.json',function (data) {
+ console.log(data);
+ })
+ }
+ )
+4.getScript方式获取数据
+ getScript:动态引入js文件
+ $('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('请求失败')
+ })
+ }
+ )
+原生Ajax
+1.GET
+ //1.
+ var xhr = new XMLHttpRequest();
+ //2.自动转换
+ xhr.responseType = 'json';
+ //2.
+ xhr.open('get','data.json?a=100&b=200',true);
+ //3.
+ xhr.send();
+ //4. 0 - 4
+ xhr.onreadystatechange = function () {
+ if(xhr.readyState == 4 && xhr.status ==200 ){
+ console.log(xhr.response['No1']);
+ // 手动转成对象
+ // var obj = JSON.parse(xhr.response);
+ }
+ }
+2.POST
+ 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);
+ }
+ }
\ No newline at end of file
diff --git "a/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/12.1--Promise.md" "b/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/12.1--Promise.md"
new file mode 100644
index 0000000..3231ce4
--- /dev/null
+++ "b/29\345\220\264\346\230\212\347\273\251/\347\254\224\350\256\260/12.1--Promise.md"
@@ -0,0 +1,16 @@
+PROMISE
+Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态: pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
+
+代码逻辑书写顺序与执行顺序不一致,不利于阅读与维护。
+
+异步操作的顺序变更时,需要大规模的代码重构。
+
+回调函数基本都是匿名函数,bug 追踪困难。
+
+回调函数是被第三方库代码(如上例中的 ajax )而非自己的业务代码所调用的,造成了 IoC 控制反转。
+
+一个 Promise 必然处于以下几种状态之一:
+
+待定(pending):初始状态,既没有被兑现,也没有被拒绝。
+已兑现(fulfilled):意味着操作成功完成。
+已拒绝(rejected):意味着操作失败。
\ No newline at end of file
--
Gitee