XMLHttpRequest对象介绍
大家伙儿如果想在原生JavaScript中玩转AJAX，就必须要借助那个叫做XMLHttpRequest的工具，也就是我们常说的”XHR”。这个小工具儿可以帮你和服务器进行沟通交流，还能给你反馈回应。想要实现异步数据传输，这个神器必不可少，支持各种各样的HTTP方法，如GET，POST，PUT啥的都不在话下。有了它，你就再也不需要每次都刷新整页，只需更新需要的部分，让用户使用起来倍感舒适
其实理解XMLHttpRequest挺简单的。首先你得搞个XMLHttpRequest实例出来，其次要用它的那个open()方法指定一些信息，比如说想要请求哪些内容，链接是什么之类的；还要操心到底是不是要等待同步呢；接下来，给它安排一个回调函数，用来处理服务器发回来的回复信息；最后，就可以发送请求了！只要服务器给了回复，你就能拿到数据，然后更新页面或者干点儿其他的事儿。这种异步通信方式能让网页变得飞快，用户体验也会更好
var xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
Promise对象简介
搞定异步任务可得学会那叫Promises的东西。这可是ES6提供的新工具，可以帮你把烦人的回调地狱给弄走，而且代码看得也更清楚明白。
Promise就像是我们的贴心小助手，帮我们搞定承诺过的事儿和搞砸的事儿。只要创建一个Promise对象，传入一个函数，这个函数有两个参数，分别是resolve和reject。如果事情顺利完成，就用resolve告诉它成功了；如果出问题了，就用reject告诉它失败了。然后，你就可以用.then()方法来应对这两种情况。这样一来，代码就清晰易懂，以后修改或增加功能也会很方便！
嵌套式AJAX请求示例
const promise = new Promise((resolve, reject) => {
// 异步操作
if (异步操作成功)
resolve('Success');
else
reject('Failure');
});
promise.then((value) => {
console.log(value);
}).catch((error) => {
console.error(error);
});
除了XMLHttpRequest和Promise外，还有另一招哦——就是让他们搭配起来，做成嵌套式AJAX请求。能这样一个个先发出请求来，然后得等到前面的成功了再放行后面的，这样就能应对各种复杂的异步操作。
我们还是以一个叫ajax的函数为例，它用Promise实现了怎么用XMLHttpRequest发送异步请求。接下来步骤就简单了，挨个访问一堆URL地址，把前一个请求得到的结果当做下一个请求的参数传过去，这样就能轻松串起很多不需要马上处理的异步请求，一块儿开始执行了！
优势与应用场景
嵌套式AJAX请求不仅可以同步获取数据，还能更轻松应对异步操作！而且还能帮你摆脱烦人的回调地狱。用JavaScript和它自带的XMLHttpRequest及Promise机制就能搞定嵌套式请求了，再也不用依赖像jQuery那样的第三方库，既方便又快捷~
你知道网上有很多地方都能用这个方法？比如说表格填写，获取动态数据，还有让网页在不刷新情况下翻页啥的。尤其是用手机上网时，遇到麻烦或内存不足的情况，嵌入AJAX就能解决问题，让体验更棒。
总结与展望
function ajax(url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status == 200) {
resolve(xhr.responseText);
}
};
xhr.send();
});
}
ajax('url1').then(function(result1) {
return ajax('url2' + result1);
}).then(function(result2) {
return ajax('url3' + result2);
}).then(function(result3) {
console.log(result3);
}).catch(function(error) {
console.error(error);
});
聊聊我们学过的那堆原生JavaScript里的XMLHttpRequest和Promise！XMLHttpRequest就是个网络大侠，帮你搞定HTTP请求和返回信息，网页编程里可离不开它哦；至于Promise，它能帮你搞定那些棘手的异步难题，让代码更简洁清晰。
你听说了？现在网络技术越来越厉害，用JavaScript做Ajax简直就是小菜一碟，还可以应付各种复杂需求喔。所以我们得多找些有共同兴趣的朋友，一起来探索新的方法，开发出既实用又新颖的东西！
评论0