从零开始学习前端JAVASCRIPT—13Ajax前后端异步交互以及Promise异步编程的改进RockyLong

（注：本章讲解涉及部分后端知识，将以php提供数据的方式进行相应的demo实现）

全称：AsynchronousJavascriptAndXml

AJAX不是一种新的编程语言，而是一种用于创建更快更好以及交互性更强的WEB应用程序技术，该技术在98年前后得到了应用。通过AJAX，你的JS可以通过JS的XMLHttpRequest对象在页面不重载的情况下与服务器直接进行通信。这样可以在服务器请求到想要的数据，而不是整个页面。AJAX的核心就是JS的XMLHttpRequest对象。xhr对象是在IE5中首次引入，它是一种支持异步请求的对象。

1.创建XMLHttpRequest对象。

所有现代浏览器(IE7+，chrome，firefox，opera，safari)均内建XMLHttpRequest对象。但是IE5、6使用ActiveXObject对象。

open方法：创建新的HTTP请求，并指定此请求的方法，URL以及验证信息。

xhr.open(type,url,async,user,password);

type：HTTP请求方式，GET、POST等。大小写不敏感。

url：请求地址。（get请求如果有传值直接以urlparam=value的方式传递。post的方式直接在发送指令的时候传递）

async：布尔型，请求是否为异步方式。默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。（可选）

注释：当您使用async=false时，请不要编写onreadystatechange函数-把代码放到send()语句后面即可：

password：验证信息中的密码部分，如果用户名为空，则此值将会被忽略。（少用仅了解）

注：在AJAX中，其实我们就是来模拟正常的表单提交数据。正常的表单在POST数据时，会发送Content-Type字段，所以我们在AJAX中就要指定该字段值为application/x-www-form-urlencoded。并且对字段名称和值进行编码处理在发送。使用setRequestHeader：单独指定请求的某个HTTP头。

注：一些特殊字符可能与代码中的字符冲突（如URL中分隔符&等等），故数据应使用encocdeURIComponent()函数进行编码。

3.发送指令。

send()：发送请求到HTTP服务器并接收回应。

此方法的同步或异步方式取决于open方法中的async参数，如果async为true，此方法将立即返回，如果为false，此方法将会等待请求完成或者超时时才会返回。

xhr.send(body);

body：通过此请求发送的数据。GET请求设置为null即可。

post和get方式实现ajax的不同之处

5.客户端接收。

6.释放XMLHttpRequest对象。

通过onreadystatechange属性指定readystate属性改变时的事件处理回调函数。

xhr.onreadystatechange=function(){}

readyState属性：返回请求的当前状态。

status属性：返回当前请求的状态码。

statusText属性：返回当前请求的响应行信息。

responseXML属性：将响应信息格式化为XMLDocument对象返回。

responseText属性：将响应信息作为字符串返回。

JSON：JavascriptObjectNotation，一种轻量级的基于文本的数据交换格式，易于人阅读和编写，也能提高网络传输速率。

ES5新增的两个方法：

JSON.parse：将JSON字符串数据转换为JSON对象。

JSON.stringify：将JSON对象转换为JSON字符串。

注：1、浏览器支持：IE8+。

2、JSON格式的字符串里面的key或者字符串型的value都必须用双引号包裹

html页面

1,'title'=>'东航首位外籍女机长：来中国是最好的选择'],['id'=>2,'title'=>'南航首位外籍女机长：来中国是最好的选择'],['id'=>3,'title'=>'国际航空首位外籍女机长：来中国是最好的选择']];}elseif($pageNum==2){$arr=[['id'=>4,'title'=>'世界那么大不如出去走走'],['id'=>5,'title'=>'今天阳光明媚适合出去走走']];}else{$arr=[['id'=>6,'title'=>'我是第三页以后的内容'],['id'=>7,'title'=>'我是第三页以后的内容']];}echojson_encode($arr);>七、前后端分离（ajax函数的封装）后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示。简单的说：前端静态页面中没有有后台程序代码，后台输出不带有HTML标签的数据。前后端分离靠ajax来实现数据的交互。

demo通过封装的ajax实现加载更多的功能以及通过事件源对象删除单条数据(本来打算将源码托管到GitHub,账号丢失)

*文件夹目录

1.html页面

@charset"utf-8";/*CSSDocument*/*{margin:0;padding:0;}body{background:#7CCD7C;}.box{width:80%;margin:0auto;}.newsTitle{font-size:24px;text-align:center;margin:0auto;padding:20px10px;font-weight:normal;letter-spacing:10px;}.newsList{display:block;margin:0auto;line-height:50px;font-size:16px;list-style:none;}.newsListli{padding:020px;box-shadow:0010px#eeeeee;}.box.newsListli:hover{background:#B0E2FF;}.newsListli:nth-child(odd){background:#f3f3f3;}.newsListli:nth-child(even){background:#eeeeee;}.deleteBtn{float:right;text-decoration:none;font-size:16px;color:#555555;}.loadMoreInfo{margin-top:10px;text-align:center;line-height:50px;font-size:16px;background:#ffffff;cursor:pointer;vertical-align:middle;margin-bottom:20px;}.loadMoreInfoimg{display:none;width:20px;height:20px;vertical-align:middle;}ajax.css3.公共js(封装的$函数以及ajax函数)

在使用ajax异步调用的时候，可能碰到同时调用多个ajax的情况，而且多个ajax之间还存在依赖关系。

引用回调函数的嵌套说明ajax的以来调用：

functiona(d,e){d&&d(e);}functionb(f){console.log('函数b！');f&&f();}a(b,function(){console.log('实参e(回调函数)');});/*回调函数的简单理解：函数在方法中以参数的方式进行传递*//*这里提供两种形式理解回调函数的嵌套*//*functiona(d,e){d&&d(e);}a(functionb(f){console.log('函数b！');f&&f();},function(){console.log('实参e(回调函数)');});*/回调函数的嵌套demo：逐个异步验证验证码、用户名和密码，只有用户通过，才能异步验证密码。

此处只给出部分重要代码逐个调用封装的ajax方法（前后端分离的demo封装的ajax方法）进行异步验证验证码、用户名和密码：

1>Promise对象的特点：

1.Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise的优点：

Promise对象可以将异步操作以同步操作的流程表达出来，避免层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise的缺点：

1.无法取消Promise，一旦新建它就会立即执行，无法中途取消。

2.如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。

3.当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

2>Promise的基本用法

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。（Promise新建后就会立即执行。）

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

1）Promise的then方法：指定Resolved状态和Reject状态的回调函数。

then方法可以接受两个回调函数作为参数。

第一个回调函数：Promise对象的状态变为Resolved时调用

第二个回调函数：Promise对象的状态变为Reject时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

then方法支持链式写法且同时调用

只有被Promise封装过了,回调才能保证顺序。也就是Promise(意为承诺)设计的初衷。但前一个方法必须在它最后执行resolve(),后一个方法才可以开始。如果执行了reject(),则进入catch()方法。这里不能单纯的理解为resolve就是success,reject就是error现就职于阿里的大名鼎鼎的阮一峰老师,喜欢管它叫状态机,这是非常恰当的叫法。

2）catch方法：catch方法是.then(null,rejection)的别名，用于指定发生错误时的回调函数。Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。

3>promise构造函数身上的方法

1)Promise.all()：Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

varp=Promise.all([p1,p2,p3]);promise.all方法接受一个数组作为参数，p1、p2、p3都是Promise对象的实例。

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

2)Promise.race()：将多个Promise实例，包装成一个新的Promise实例。

varp=Promise.race([p1,p2,p3]);上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的回调函数

4>promise改造ajax依赖调用（以8：ajax的依赖调用demo改写为例）

文件目录结构：

1）公共js($函数的封装,promise改写ajax函数的封装)

所谓同源：是指协议、域名、端口都相同。

目的：保证用户信息的安全，防止恶意的网站窃取数据。

限制范围：

1：cookie，localStorage和IndexDB无法读取。

2：DOM无法获得。

3：AJAX请求不能发送。

JSONP=JSONWITHPADDING。一种数据调用的方式。

AJAX无论请求什么页面，因为同源策略的限制，只要是跨域就一律不准。不过我们发现凡是拥有src这个属性的标签都拥有跨域的能力，如img，iframe，script。那我们就可以把数据装载到JS文件内，供客户端调用和进一步处理。

提供下百度和淘宝的跨域的方式（京东的可看不可用）

淘宝：

百度：

步骤：

1：定义一个回调函数。

2：创建script标签，指定src地址，并添加到页面中。

注：src必须跟着一个参数callback来指定回调函数名称。（callback回调函数定义必须全局不能放到匿名函数或函数表达式，否则无法找到）

利用127.0.0.1和localhost本地环境演示jsonp跨域demo

（依据同源策略的概念可以看出127.0.0.1和localhost属于跨域，可通过实际请求测试若不进行跨域访问无法访问到127.0.0.1资源）

jsonp.php十二、服务器端跨域CORS是一个W3C标准，全称是"跨域资源共享"（Cross-originresourcesharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

浏览器发起CORS请求，都会在请求头信息中增加一个Origin字段。该字段用来说明本次请求来自哪个源（协议+域名+端口）。服务器根据这个值，来决定是否同意这次请求。

实现方式：

在服务器端指定Access-Control-Allow-Origin头信息，该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。如果Origin指定的值不在许可范围内，服务器返回一个正常的HTTP响应。浏览器如果发现响应头信息中没有包含Access-Control-Allow-Origin字段就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

向服务器发送Cookie：

1.在服务器端指定Access-Control-Allow-Credentials头信息，该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

2.开发者必须在AJAX中打开withCredentials字段。

3.要发送cookie，Access-Control-Allow-Origin的值不能是*，必须指定明确的，与请求网页一致的域名。同时cookie依然遵循同源策略，请求源与被请求源必须拥有同一个主域名，否则cookie还是不会被发送。

case1：www.a.com访问bbs.a.com，并且cookie的domain设置为.a.com，那么cookie才会随着CORS发送给后台。

case2：www.a.com访问www.b.com，这种情况下，cookie是不会随着CORS发送给后台。

（备注本想这里codingdemo来说明，然没主域名这样的条件，后续有机会补上......）

1：功能

get多用于从服务器上获取数据，post多用于向服务器发送数据。

2：数据提交

GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以分割URL和传输数据，参数之间以&相连。POST把提交的数据则放置在是HTTP包的包体中。

3：数据大小

GET请求传送的数据量比较小，达能大于2KB，这个受浏览器的限制。而POST请求传送的数据量比较大，一般默认为不受限制。其实大小受服务器的限制。