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