一、ajax请求
什么是ajax:Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,
用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
ajax优点:1.可以局部刷新页面
2.异步请求,不会影响其他操作的进行
3.前后端负载均衡
4.界面与应用分离
ajax缺点:1.安全问题,容易遭受攻击
2.因为ajax不支持后退(back)和历史(history),所以没办法实现回到上一次操作。
3.前后端负载均衡
4.界面与应用分离
ajax工作原理:1.页面发生事件,比如点击事件
2.由JavaScript创建XMLHttpRequest对象
3.由XMLHttpRequest对象创建浏览器与服务器的连接
4.向服务器端发送请求
5.服务器端响应请求
6.通过监听请求状态并获取数据
7.JavaScript解析得到的数据并展示
ajax核心:XMLHttpRequest
什么是XMLHttpRequest:XMLHttpRequest是用来创建浏览器和服务器之间的连接并进行数据交换的。就是可更新局部的页面而不是整个页面。
XMLHttpRequest工作原理:1.先用variable = new XMLHttpRequest();创建一个自己
2.创建一个open方法连接浏览器和服务器
3.使用sent方法向服务器发送请求
4.使用onreadystatechange监听事件
5.使用responseText/responseXML方法获取返回的数据(responseText返回字符串形式的/返回responseXML数据格式)
6.JavaScript解析并显示
ajax延伸:ajax是同源限制的,就是正常情况下不允许跨域,所以需要进行跨域操作的话,就要用到jsonp,跨域问题看前一篇跨域篇哈。
二、Promise异步
什么是Promise:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作。
学习Promise之前简单的需要了解一下同步和异步。
什么是同步:就是单线程,JavaScript就是单线程的,就是程序每次只能执行一个任务,其他任务必须等到当前正在执行的程序结束后才能继续进行。
什么是异步:与同步相反,可同时执行多个进程,就是不需要等待其他程序执行完成。
Promise的三个状态:1.pending:初始值,不是fulfilled,也不是rejected
2.fulfilled:代表操作成功
3.rejected:代表操作失败
Promise的两个参数:1.resolve 相当于成功执行的函数
2.reject 相当于失败执行的函数
Promise的api:.then:用于指定执行函数;我觉得可以理解为就是像打游戏,选中哪个就玩哪个,选中哪个就执行哪个。
.catch:用于指定发生错误时的回调函数;就是捕获错误的,类似于error。
catch和reject的区别:catch和reject的话尽量用catch捕获错误,因为catch能捕获所有的错误,而reject捕获有局限性
下面简单的创建一个promise的例子:
1 //构建Promise
2 var promise = new Promise(function (resolve, reject) {
3 if (/* 异步操作成功 */) {
4 resolve(data);
5 } else {
6 /* 异步操作失败 */
7 reject(error);
8 }
9});
下面简单的创建一个promise.then和.catch的例子:
1 promise.then(function(data) {
2 console.log(‘success‘);
3 }).catch(function(error) {
4 console.log(‘error‘, error);
5 });