diff --git "a/39\345\217\266\345\260\217\346\235\260/\347\254\224\350\256\260/2022.11.30--jqueryAjax\344\270\216\345\216\237\347\224\237Ajax.md" "b/39\345\217\266\345\260\217\346\235\260/\347\254\224\350\256\260/2022.11.30--jqueryAjax\344\270\216\345\216\237\347\224\237Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..6cf0e8e126d808e947965e4b0a66c8273506bd87 --- /dev/null +++ "b/39\345\217\266\345\260\217\346\235\260/\347\254\224\350\256\260/2022.11.30--jqueryAjax\344\270\216\345\216\237\347\224\237Ajax.md" @@ -0,0 +1,113 @@ +##### jQuery Ajax + +Ajax的原理: + +##### 简单来说就是 通过XmlHttpRequest对象向服务器发异步请求,从服务器获得数据,然后用 javascript 来操作DOM更新页面的技术。 + +1. ##### 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); + } + } +``` + diff --git "a/39\345\217\266\345\260\217\346\235\260/\347\254\224\350\256\260/2022.12.1--Promise.md" "b/39\345\217\266\345\260\217\346\235\260/\347\254\224\350\256\260/2022.12.1--Promise.md" new file mode 100644 index 0000000000000000000000000000000000000000..55fbbcaa5e322e4472cdee5cd384d9c35619120a --- /dev/null +++ "b/39\345\217\266\345\260\217\346\235\260/\347\254\224\350\256\260/2022.12.1--Promise.md" @@ -0,0 +1,23 @@ +#### PROMISE + +Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态: **pending(等待态),fulfiled(成功态),rejected(失败态)**;状态一旦改变,就不会再变。创造promise实例后,它会立即执行。 + +- 代码逻辑书写顺序与执行顺序不一致,不利于阅读与维护。 + + 异步操作的顺序变更时,需要大规模的代码重构。 + + 回调函数基本都是匿名函数,bug 追踪困难。 + + 回调函数是被第三方库代码(如上例中的 ajax )而非自己的业务代码所调用的,造成了 IoC 控制反转。 + + + + 一个 `Promise` 必然处于以下几种状态之一: + + - *待定(pending)*:初始状态,既没有被兑现,也没有被拒绝。 + - *已兑现(fulfilled)*:意味着操作成功完成。 + - *已拒绝(rejected)*:意味着操作失败。 + + + + \ No newline at end of file