Ajax，Dom概念的理解；promise，Generator，async/await的使用

1.Ajax是什么?

一种局部刷新页面的技术。全称是AsynchronousJavascript+XML。
异步传输+js+xml
2.Dom
文档对象类型，把HTML文档中的节点全部视为一个个的对象，然后这些对象依照层级关系形成一棵树，这棵树就命名为DOM树
3.promise使用
简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果
Promise有三种状态.
pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
缺点：
一旦新建它就会立即执行，无法中途取消
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）.then做下一个请求。then方法将两个匿名函数作为参数，接收resolve和reject这两个函数的值。
4.Generator使用
Yeild 可暂停
在内部执行的过程中交出程序的控制权，然后外部又将控制权再移交回来
generator函数暂停了之后需要手动调用next方法才能继续往后执行

5.async/await使用

async 和 await 关键字搭配使用，async 函数永远返回一个 promise 对象，如果函数里有返回值的话，在这个 async 执行之后的.then方法里能拿到
await 是等待的意思，后面一般跟一个promise对象，await会让后面的promise对象自动执行，执行完成后才会继续执行下一句代码
async函数在等待了之后会自动的继续往后执行
发起一个ajax请求，向后端请求用户信息，（发送的参数和请求类型自己判断哦），解决回调地狱的这三个函数，正好你们仨一人选一个，处理返回值（返回啥也你们自己决定，主要考察函数的掌握情况）还要告诉我ajax里哪些参数是回调函数
// 服务器端接口
app.get(’/data1’, (req, res) => {
res.send(‘hi’)
})
app.get(’/data2’, (req, res) => {
res.send(‘hello’)
})
app.get(’/data3’, (req, res) => {
res.send(‘nihao’)
})

// 启动监听
app.listen(3000, () => {
console.log(‘running…’)
})

ajax请求
function queryData(path, callback) {
var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象
xhr.open(‘get’,‘http://localhost:3000/’ + path);//配置请求信息
xhr.send(null);//发送post请求下，要传递的参数
xhr.onreadystatechange = function() {//回调函数
if(xhr.readyState == 4 && xhr.status == 200) {
// 获取后台数据
var ret = xhr.responseText;//返回一串数据
callback(ret);
}
}
}

queryData(‘data1’,function(ret) {
console.log(ret) // 结果为：hi

})
按顺序获取造成回调地狱
queryData(‘data1’, function(ret) {
console.log(ret)　　　// 按顺序第一个输出为：hi
queryData(‘data2’, function(ret) {
console.log(ret)　　//按顺序第二个输出为：hello
queryData(‘data3’, function(ret) {
console.log(ret)　　// 按顺序第三个输出为：nihao
});
});
});
promise方法
function queryData(path) {
return new Promise(function(resolve, reject) {
// 需要在这里处理异步任务
var xhr = new XMLHttpRequest();
xhr.open(‘get’,‘http://localhost:3000/’ + path);
xhr.send(null);
xhr.onreadystatechange = function() {
// 该函数何时触发？xhr.readyState状态发生变化时
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
// 获取后台数据，xhr.readyState=4说明响应就绪
var ret = xhr.responseText;
// 成功的情况；responsetext是返回一串数据
resolve(ret);
} else {
// 失败的情况
reject(‘服务器错误’);
}
}
})
}

queryData(‘data1’)
.then(ret=>{
console.log(ret) // 按顺序第一个输出为：hi
// 这里返回的是Promise实例对象，下一个then由该对象调用
return queryData(‘data2’);
})
.then(ret=>{
console.log(ret);　　// 按顺序第二个输出为：hello
return queryData(‘data3’);
})
.then(ret=>{
console.log(ret)　　// 按顺序第三个输出为：nihao
})