JavaScript2223AJAXPromise.docx

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

2、通信。3：基于标准被广泛支持。4：界面与应用分离。5：节省带宽。3：编写步骤1：创建XMLHttpRequest对象。所有现代浏览器(IE7+，chrome，firefox，opera，safari)均内建XMLHttpRequest对象。但是IE5、6使用ActiveXObject对象。function getAjax() var xmlhttp = null;if(window.ActiveXObject) xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); else if(window.XMLHttpRequest) xmlhttp = new

3、 XMLHttpRequest();return xmlhttp;2：打开与Server的连接，指定发送方式、URL以及权限等。open方法：创建新的HTTP请求，并指定此请求的方法，URL以及验证信息。xhr.open(type, url, async, user, password);type：HTTP请求方式，GET、POST等。大小写不敏感。url：请求地址。async：布尔型，请求是否为异步方式。默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。（可选）user：如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹

4、出验证窗口。（仅做了解）password：验证信息中的密码部分，如果用户名为空，则此值将会被忽略。（仅做了解）注： 在AJAX中，其实我们就是来模拟正常的表单提交数据。正常的表单在POST数据时，会发送Content-Type字段，所以我们在AJAX中就要指定该字段值为application/x-www-form-urlencoded。并且对字段名称和值进行编码处理再发送。使用setRequestHeader：单独指定请求的某个HTTP头。注：数据应使用encodeURIComponent()函数进行编码。3：发送指令。send()：发送请求到HTTP服务器并接收回应。此方法的同步或异步方式取

5、决于open方法中的async参数，如果async为true，此方法将立即返回，如果为false，此方法将会等待请求完成或者超时时才会返回。xhr.send(body);body：通过此请求发送的数据。GET请求设置为null即可。4：等待并接收服务器返回的处理结果。5：客户端接收。6：释放XMLHttpRequest对象。4：回调函数通过onreadystatechange属性指定readystate属性改变时的事件处理回调函数。xhr.onreadystatechange = function()readyState属性：返回请求的当前状态。状态：0：对象已建立，尚未初始化（未调用open

6、方法）。1：对象已建立，尚未调用send方法。2：send方法已调用，但是当前的状态以及HTTP状态未知。3：开始接收数据，因为响应以及HTTP头不全，这时通过responseBody和responseText获取部分数据会出现错误。4：数据接收完毕，此时可以通过responseBody和responseText获取完整的响应数据。status属性：返回当前请求的状态码。200 OK：请求文档已经找到，并正确返回。304 Not Modified：拥有一个本地的缓存副本，服务器端内容与此相同。403 Forbidden：请求者对所请求的文档不具有相应的权限。404 Not Found：请求的文

7、档没找到。500：内部服务器错误。statusText属性：返回当前请求的响应信息。responseXML属性：将响应信息格式化为XML Document对象返回。responseText属性：将响应信息作为字符串返回。5：编写PHP服务器接口返回带有HTML标签的字符串。应用： 1：验证用户名是否存在。 2：搜索下拉提示。 6：JS解析JSONJSON简介：定义：Javascript Object Notation，一种轻量级的基于文本的数据交换格式，易于人阅读和编写，也能提高网络传输速率。ES5新增的两个方法：JSON.parse：将JSON字符串数据转换为JSON对象。JSON.stri

8、ngify：将JSON对象转换为JSON字符串。注：1：浏览器支持：IE8+。2：JSON格式的字符串里面的key或者字符串型的value都必须用双引号包裹。7：局部数据刷新 操作相应的DOM节点。8：事件委托的应用事件委托：利用冒泡机制，将子元素事件委托给父元素执行。讲解示例：购物车选择发货地址的案例。9：前后端分离后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示。简单的说：前端静态页面中没有有后台程序代码，后台输出不带有HTML标签的数据。前后端分离靠ajax来实现数据的交互。应用：1：文章列表2：加载更多3：级联菜单综合应用： 1：即时聊天1：回调函数的嵌套在一个函数a()里面

9、执行另一个回调函数b()，然后再从b里面执行回调函数c()。2：ajax的依赖调用在使用ajax异步调用的时候，可能碰到同时调用多个ajax的情况，而且多个ajax之间还存在依赖关系。举个例子：逐个异步验证用户名和密码，只有用户通过，才能异步验证密码。3：Promise介绍新推出的Promise函数,是一个构造函数,它实际上是对回调函数的一种封装，对异步编程的一种改进，使用链式调用。Promise对象有以下两个特点：1：Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可

10、以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。2：一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。有了Promise对象，就可以将异步操作以同步操

11、作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。基本用法：Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。resolve函数的作用是，将Promise对象的状态从“未完成”

12、变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。其中，第二个函数是可选

13、的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。Promise新建后就会立即执行。上面代码中，Promise新建后立即执行，所以首先输出的是“Promise”。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以“Resolved”最后输出。catch方法：catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。一般来说，不要在then方法里面定义Reject状态的回调函数（即then

14、的第二个参数），总是使用catch方法。如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。上面代码中，someAsyncThing函数产生的Promise对象会报错，但是由于没有指定catch方法，这个错误不会被捕获，也不会传递到外层代码，导致运行后没有任何输出。下面我们看看它能解决哪些以前难以解决的问题:问题: 当有两个或以上的ajax请求需要按顺序执行,该如何编写?而使用promise的写法如下:也就是代码被改进成了new Promise(ajax1).then(ajax2).catch() 使用了链式调用代替了嵌套结构。r

15、esolve() 和 reject() 则意味着成功回调和失败回调的执行。如果有三个或更多的ajax请求呢?代码结构大概是这样的: new Promise(ajax1).then(return new Promise(ajax2).then(ajax3); 如果有第四个请求要顺序执行,则:new Promise(ajax1).then(return new Promise(ajax2).then(return new Promise(ajax3).then(ajax4);从这里仔细观察,可以看出,只有被Promise封装过了,回调才能保证顺序。 也就是Promise(意为承诺)设计的初衷。但前一个方法必须在它最后执行resolve()后一个方法才可以开始。 如果执行了reject(),则进入catch()方法。其实这里不能单纯的理解为 resolve就是success,reject就是error 现就职于阿里的大名鼎鼎的阮一峰老师,喜欢管它叫状态机,这是非常恰当的叫法。Promise.all()：Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。上面代码中，Promise.all方法接