diff --git "a/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/11.30 AJAX.md" "b/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/11.30 AJAX.md" new file mode 100644 index 0000000000000000000000000000000000000000..bd61f473579b4bccef8af93c9d136fe31d76e26d --- /dev/null +++ "b/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/11.30 AJAX.md" @@ -0,0 +1,102 @@ +### AJAX + +#### 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); + } + } + } +``` + +#### 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); + } + } +``` + +#### 响应数据处理;将返回的json类型的数据转换成对象 + +##### 手动转换 + +``` +var obj = JSON.parse(xhr.response) +console.log(obj.name) +``` + +##### 自动转换 + +``` +//创建对象后设置: +xhr.responseType = 'json'; +console.log(xhr.response.name) +``` + +### jQuery Ajax + +#### $.get();执行get请求方式的ajax + +``` + $('button').eq(0).click( + function () { + $.get('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + +#### $.post();执行post请求方式的ajax + +``` + $('button').eq(1).click( + function () { + $.post('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + +#### $.ajax();核心方法,所有的其他方法都是在内部使用此方法 + +- 以上方法用ajax()都能实现 + +``` + $('button').eq(3).click( + function () { + $.ajax({ + url:'data.json', + type:'get', + data:{a:100,b:200}, + success:(data) => console.log(data), + error:()=> console.log('请求失败') + }) + } + ) +``` + diff --git "a/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/12.1 promise.md" "b/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/12.1 promise.md" new file mode 100644 index 0000000000000000000000000000000000000000..6c3ef855d4bffd9527287ff616828b956e6c2d0f --- /dev/null +++ "b/37\350\276\276\345\205\264\345\273\272/\347\254\224\350\256\260/12.1 promise.md" @@ -0,0 +1,70 @@ +## promise + +1.promise 对象初始化状态为 pending + 2.当调用resolve(成功),会由pending => fulfilled + 3.当调用reject(失败),会由pending => rejected + +> 注意promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能再变 + +#### promise对象方法 + +1.then方法注册 当resolve(成功)/reject(失败)的回调函数 + +```cpp +// onFulfilled 是用来接收promise成功的值 +// onRejected 是用来接收promise失败的原因 +promise.then(onFulfilled, onRejected); +``` + +then方法是异步执行的 + +2.resolve(成功) onFulfilled会被调用 + +```tsx +const promise = new Promise((resolve, reject) => { + resolve('fulfilled'); // 状态由 pending => fulfilled +}); +promise.then(result => { // onFulfilled + console.log(result); // 'fulfilled' +}, reason => { // onRejected 不会被调用 + +}) +``` + +3.reject(失败) onRejected会被调用 + +```tsx +const promise = new Promise((resolve, reject) => { + reject('rejected'); // 状态由 pending => rejected +}); +promise.then(result => { // onFulfilled 不会被调用 + +}, reason => { // onRejected + console.log(rejected); // 'rejected' +}) +``` + +4.promise.catch + +在链式写法中可以捕获前面then中发送的异常, + +```csharp +promise.catch(onRejected) +相当于 +promise.then(null, onRrejected); + +// 注意 +// onRejected 不能捕获当前onFulfilled中的异常 +promise.then(onFulfilled, onRrejected); + +// 可以写成: +promise.then(onFulfilled) + .catch(onRrejected); +``` + + + + + + +