diff --git "a/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.29jquery AJAX.md" "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.29jquery AJAX.md" new file mode 100644 index 0000000000000000000000000000000000000000..bb607d9e47bac9df8590736b02aaf3681e8a0877 --- /dev/null +++ "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.29jquery AJAX.md" @@ -0,0 +1,41 @@ +## 定义和用法 + +ajax() 方法用于执行 AJAX(异步 HTTP)请求。 + +所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。$.ajax(*{name:value, name:value, ... }*) + +使用 AJAX 请求改变
元素的文本: + +$("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){ $("#div1").html(result); }}); }); + + + +### 参数 + +- options + + 类型:Object可选。AJAX 请求设置。所有选项都是可选的。 + +- async + + 类型:Boolean默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 + +- beforeSend(XHR) + + 类型:Function发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。 + +- cache + + 类型:Boolean默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。jQuery 1.2 新功能。 + +- complete(XHR, TS) + + 类型:Function请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。 + +- contentType + + 类型:String默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。 + +- context + + 类型:Object这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。 \ No newline at end of file diff --git "a/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/12.1Promise.md" "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/12.1Promise.md" new file mode 100644 index 0000000000000000000000000000000000000000..3d221ebe3572ade08d1f213de1b5bb086ede3d76 --- /dev/null +++ "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/12.1Promise.md" @@ -0,0 +1,58 @@ +# Promise + +**`Promise`** 对象用于表示一个异步操作的最终完成(或失败)及其结果值。\ + +一个 `Promise` 对象代表一个在这个 promise 被创建出来时不一定已知值的代理。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 *promise*,以便在未来某个时候把值交给使用者。 + +一个 `Promise` 必然处于以下几种状态之一: + +- *待定(pending)*:初始状态,既没有被兑现,也没有被拒绝。 +- *已兑现(fulfilled)*:意味着操作成功完成。 +- *已拒绝(rejected)*:意味着操作失败。 + +待定状态的 Promise 对象要么会通过一个值*被兑现*,要么会通过一个原因(错误)*被拒绝*。当这些情况之一发生时,我们用 promise 的 `then` 方法排列起来的相关处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了,那么这个处理程序也同样会被调用,因此在完成异步操作和绑定处理方法之间不存在竞态条件。 + +因为 `Promise.prototype.then` 和 `Promise.prototype.catch` 方法返回的是 promise,所以它们可以被链式调用。 + +我们可以用 `Promise.prototype.then()`、`Promise.prototype.catch()` 和 `Promise.prototype.finally()` 这些方法将进一步的操作与一个变为已敲定状态的 promise 关联起来。 + +例如 `.then()` 方法需要两个参数,第一个参数作为处理已兑现状态的回调函数,而第二个参数则作为处理已拒绝状态的回调函数。每一个 `.then()` 方法还会返回一个新生成的 promise 对象,这个对象可被用作链式调用,就像这样: + +``` +const myPromise = new Promise((resolve, reject) => { + setTimeout(() => { + resolve('foo'); + }, 300); +}); + +myPromise + .then(handleResolvedA, handleRejectedA) + .then(handleResolvedB, handleRejectedB) + .then(handleResolvedC, handleRejectedC); +``` + +当 `.then()` 中缺少能够返回 promise 对象的函数时,链式调用就直接继续进行下一环操作。因此,链式调用可以在最后一个 `.catch()` 之前把所有的处理已拒绝状态的回调函数都省略掉。 + +过早地处理变为已拒绝状态的 promise 会对之后 promise 的链式调用造成影响。不过有时候我们因为需要马上处理一个错误也只能这样做。例如,外面必须抛出某种类型的错误以在链式调用中传递错误状态。另一方面,在没有迫切需要的情况下,可以在最后一个 `.catch()` 语句时再进行错误处理,这种做法更加简单。`.catch()` 其实只是没有给处理已兑现状态的回调函数预留参数位置的 `.then()` 而已。 + +``` +myPromise + .then(handleResolvedA) + .then(handleResolvedB) + .then(handleResolvedC) + .catch(handleRejectedAny); +``` + +Copy to Clipboard + +使用[箭头函数表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)作为 promise 回调函数的示例如下: + +``` +myPromise + .then(value => { return value + ' and bar'; }) + .then(value => { return value + ' and bar again'; }) + .then(value => { return value + ' and again'; }) + .then(value => { return value + ' and again'; }) + .then(value => { console.log(value) }) + .catch(err => { console.log(err) }); +``` \ No newline at end of file diff --git "a/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/12.30\345\216\237\347\224\237AJAX.md" "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/12.30\345\216\237\347\224\237AJAX.md" new file mode 100644 index 0000000000000000000000000000000000000000..13b14d4a18fe634959fa9d930ecda7cd4fee0859 --- /dev/null +++ "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/12.30\345\216\237\347\224\237AJAX.md" @@ -0,0 +1,185 @@ +```` +**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) + +```js +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) + +```js + 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,手动转换 + +```js +var obj = JSON.parse(xhr.response) +console.log(obj.name) +``` + +##### 2,自动转换 + +```js +//创建对象后设置: +xhr.responseType = 'json'; +console.log(xhr.response.name) +``` + + + + + +### 二,jQuery Ajax + +#### 1,$.get();执行get请求方式的ajax + +```js + $('button').eq(0).click( + function () { + $.get('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + + + +#### 2,$.post();执行post请求方式的ajax + +```js + $('button').eq(1).click( + function () { + $.post('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + + + +#### 3,$.getJSON() + +* 通过Ajax获取服务器中JSON格式的数据 +* “全局方法”,直接定义在jQuery对象(即“$”)下的方法 + +```js + $('button').eq(2).click( + function () { + $.getJSON('data.json',function (data) { + console.log(data); + }) + } + ) +``` + + + +#### 4,$.getScript();动态加载JavaScript的方法 + +* 通过AJAX来获取并运行一个外部JavaScript文件 +* 异步跨域加载JavaScript文件,可避免提前加载JavaScript文件 +* 减少服务器和客户端的负 担,加快页面加载速度 + +```js + $('button').eq(3).click( + function () { + $.getScript('test.js'); + } + ) +``` + +#### 5,$.ajax();核心方法,所有的其他方法都是在内部使用此方法 + +* 以上方法用ajax()都能实现 + +```js + $('button').eq(4).click( + function () { + $.ajax({ + url:'data.json', + type:'get', + data:{a:100,b:200}, + success:(data) => console.log(data), + error:()=> console.log('请求失败') + }) + } + ) +``` +```` \ No newline at end of file