JavaScript2223AJAXPromise.docx
《JavaScript2223AJAXPromise.docx》由会员分享，可在线阅读，更多相关《JavaScript2223AJAXPromise.docx（16页珍藏版）》请在冰豆网上搜索。
JavaScript2223AJAXPromise
1：
ajax的概念
全称：
AsynchronousJavascriptAndXml
AJAX不是一种新的编程语言，而是一种用于创建更快更好以及交互性更强的WEB应用程序技术，该技术在98年前后得到了应用。
通过AJAX，你的JS可以通过JS的XMLHttpRequest对象在页面不重载的情况下与服务器直接进行通信。
这样可以在服务器请求到想要的数据，而不是整个页面。
AJAX的核心就是JS的XMLHttpRequest对象。
xhr对象是在IE5中首次引入，它是一种支持异步请求的对象。
2：
ajax的优势
1：
无刷新更新数据。
（局部刷新）
2：
异步与服务器通信。
3：
基于标准被广泛支持。
4：
界面与应用分离。
5：
节省带宽。
3：
编写步骤
1：
创建XMLHttpRequest对象。
所有现代浏览器（IE7+，chrome，firefox，opera，safari）均内建XMLHttpRequest对象。
但是IE5、6使用ActiveXObject对象。
functiongetAjax（）{
varxmlhttp=null;
if（window.ActiveXObject）{
xmlhttp=newActiveXObject（’Microsoft.XMLHTTP’）;
}elseif（window.XMLHttpRequest）{
xmlhttp=newXMLHttpRequest（）;
}
returnxmlhttp;
}
2：
打开与Server的连接，指定发送方式、URL以及权限等。
open方法：
创建新的HTTP请求，并指定此请求的方法，URL以及验证信息。
xhr.open（type,url,async,user,password）;
type：
HTTP请求方式，GET、POST等。
大小写不敏感。
url：
请求地址。
async：
布尔型，请求是否为异步方式。
默认为true。
如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
（可选）
user：
如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
（仅做了解）
password：
验证信息中的密码部分，如果用户名为空，则此值将会被忽略。
（仅做了解）
注：
在AJAX中，其实我们就是来模拟正常的表单提交数据。
正常的表单在POST数据时，会发送Content-Type字段，所以我们在AJAX中就要指定该字段值为application/x-www-form-urlencoded。
并且对字段名称和值进行编码处理再发送。
使用setRequestHeader：
单独指定请求的某个HTTP头。
注：
数据应使用encodeURIComponent（）函数进行编码。
3：
发送指令。
send（）：
发送请求到HTTP服务器并接收回应。
此方法的同步或异步方式取决于open方法中的async参数，如果async为true，此方法将立即返回，如果为false，此方法将会等待请求完成或者超时时才会返回。
xhr.send（body）;
body：
通过此请求发送的数据。
GET请求设置为null即可。
4：
等待并接收服务器返回的处理结果。
5：
客户端接收。
6：
释放XMLHttpRequest对象。
4：
回调函数
通过onreadystatechange属性指定readystate属性改变时的事件处理回调函数。
xhr.onreadystatechange=function（）{}
readyState属性：
返回请求的当前状态。
状态：
0：
对象已建立，尚未初始化（未调用open方法）。
1：
对象已建立，尚未调用send方法。
2：
send方法已调用，但是当前的状态以及HTTP状态未知。
3：
开始接收数据，因为响应以及HTTP头不全，这时通过responseBody和responseText获取部分数据会出现错误。
4：
数据接收完毕，此时可以通过responseBody和responseText获取完整的响应数据。
status属性：
返回当前请求的状态码。
200OK：
请求文档已经找到，并正确返回。
304NotModified：
拥有一个本地的缓存副本，服务器端内容与此相同。
403Forbidden：
请求者对所请求的文档不具有相应的权限。
404NotFound：
请求的文档没找到。
500：
内部服务器错误。
statusText属性：
返回当前请求的响应信息。
responseXML属性：
将响应信息格式化为XMLDocument对象返回。
responseText属性：
将响应信息作为字符串返回。
5：
编写PHP服务器接口
返回带有HTML标签的字符串。
应用：
1：
验证用户名是否存在。
2：
搜索下拉提示。
6：
JS解析JSON
JSON简介：
定义：
JavascriptObjectNotation，一种轻量级的基于文本的数据交换格式，易于人阅读和编写，也能提高网络传输速率。
ES5新增的两个方法：
JSON.parse：
将JSON字符串数据转换为JSON对象。
JSON.stringify：
将JSON对象转换为JSON字符串。
注：
1：
浏览器支持：
IE8+。
2：
JSON格式的字符串里面的key或者字符串型的value都必须用双引号包裹。
7：
局部数据刷新
操作相应的DOM节点。
8：
事件委托的应用
事件委托：
利用冒泡机制，将子元素事件委托给父元素执行。
讲解示例：
购物车选择发货地址的案例。
9：
前后端分离
后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示。
简单的说：
前端静态页面中没有有后台程序代码，后台输出不带有HTML标签的数据。
前后端分离靠ajax来实现数据的交互。
应用：
1：
文章列表
2：
加载更多
3：
级联菜单
综合应用：
1：
即时聊天
1：
回调函数的嵌套
在一个函数a（）里面执行另一个回调函数b（），然后再从b里面执行回调函数c（）。
2：
ajax的依赖调用
在使用ajax异步调用的时候，可能碰到同时调用多个ajax的情况，而且多个ajax之间还存在依赖关系。
举个例子：
逐个异步验证用户名和密码，只有用户通过，才能异步验证密码。
3：
Promise介绍
新推出的Promise函数,是一个构造函数,它实际上是对回调函数的一种封装，对异步编程的一种改进，使用链式调用。
Promise对象有以下两个特点：
1：
Promise对象代表一个异步操作，有三种状态：
Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
2：
一旦状态改变，就不会再变，任何时候都可以得到这个结果。
Promise对象的状态改变，只有两种可能：
从Pending变为Resolved和从Pending变为Rejected。
只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。
就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。
这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise也有一些缺点。
首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。
其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
基本用法：
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
它们是两个函数，由JavaScript引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
then方法可以接受两个回调函数作为参数。
第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。
其中，第二个函数是可选的，不一定要提供。
这两个函数都接受Promise对象传出的值作为参数。
Promise新建后就会立即执行。
上面代码中，Promise新建后立即执行，所以首先输出的是“Promise”。
然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以“Resolved”最后输出。
catch方法：
catch方法是.then（null,rejection）的别名，用于指定发生错误时的回调函数。
Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。
也就是说，错误总是会被下一个catch语句捕获。
一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。
如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。
上面代码中，someAsyncThing函数产生的Promise对象会报错，但是由于没有指定catch方法，这个错误不会被捕获，也不会传递到外层代码，导致运行后没有任何输出。
下面我们看看它能解决哪些以前难以解决的问题:
问题:
当有两个或以上的ajax请求需要按顺序执行,该如何编写?
而使用promise的写法如下:
也就是代码被改进成了newPromise（ajax1）.then（ajax2）.catch（）使用了链式调用代替了嵌套结构。
resolve（）和reject（）则意味着成功回调和失败回调的执行。
如果有三个或更多的ajax请求呢?
代码结构大概是这样的:
newPromise（ajax1）.then（returnnewPromise（ajax2））.then（ajax3）;如果有第四个请求要顺序执行,则:
newPromise（ajax1）.then（returnnewPromise（ajax2））.then（returnnewPromise（ajax3））.then（ajax4）;
从这里仔细观察,可以看出,只有被Promise封装过了,回调才能保证顺序。
也就是Promise（意为承诺）设计的初衷。
但前一个方法必须在它最后执行resolve（）后一个方法才可以开始。
如果执行了reject（）,则进入catch（）方法。
其实这里不能单纯的理解为resolve就是success,reject就是error现就职于阿里的大名鼎鼎的阮一峰老师,喜欢管它叫状态机,这是非常恰当的叫法。
Promise.all（）：
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。
上面代码中，Promise.all方法接
升级会员 