不管是工作多长的前端老鸟、还是初入前端的小白，对于前后端交互都是有些怵的！因为前后端交互是前端与后端两方最需要配合的地方！稍有不慎，前端拿不到数据，双方开始扯皮。
所以对于一个合格的程序员来说，掌握AJAX这一技术是刻不容缓的，当然不是为了甩锅，而是为了让自己的技术栈更加的扎实！
闲话少叙！直入主题！
AJAX的全拼是AsynchronousJavaScriptAndXML，翻译过来就是异步的javascript和XML，它实际上是把几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术，并且AJAX不像Form表单那样会在提交的时候重新刷新页面，他是一种实现页面局部刷新的技术！
举个例子！
主人公老丁是一个快递小哥,他去富贵村收快递，他把小车车放到了村东头小广场，在老张头家里收了一个邮件，把邮件放到小车车上，又折返去老王家去取快递，再次返回把邮件放到小车车上....这样的交互方式类似于Form表单的提交方式！
主人公四火是新来的快递员小哥，非常的爱偷懒，他每次收快递都是骑着小三轮收邮件，到一家就把哪一家的邮件放到自己的小车车上，直到收完了，才返回村头营业部统一派发邮件...这样的交互方式类似于AJAX交互方式，只在局部刷新页面来满足请求与响应！
俗话说，不码代码光讲故事的厨子不是好段子手！
下面开始正题！304全体起立！四火携三员大将给各位读者老爷问好了。
AJAX的核心对象是XMLHttpRequest：实现一个完整的AJAX需要下面几步：
1.创建AJAX核心对象 var xhr = new XMLHttpRequest();2.配置AJAX请求的方式，请求地址，是否异步(默认异步) xhr.open(method,url,type);3.发送数据(需要区分get和post请求) xhr.send(null); //get 该请求方式不需要发送任何数据，因为get方式是将数据拼接到了url上 xhr.send(urlencodedObject); //post 将参数以urlencoded格式发送接口 如:name=四火&age=184.通过onreadystatechange 监听xhr的状态码的改变(0-4),当xhr.readyState变到4的时候请求完成 xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ //这里仅仅代表请求完成，请求成没成功，还需要另外一个参数xhr.status(http状态值) //只要在xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)这样成才代表请求成功 } }
好了，该上案例了：
<body> <button id="testAjaxGet">点击发送get请求button> <button id="testAjaxPost">点击发送post请求button>body>html><script src="./utils/utils.js">script><script> function _(el) { el = document.querySelectorAll(el); if (el.length > 1) { return [].slice.call(el); } else if (el.length === 1) { return el[0]; } else { return null; } } //get请求 _('#testAjaxGet').onclick = function () { ajax({ url: 'http://localhost:1017/demo/demoRouter', data: { name: '杨四火' } }) .then(res => { console.log(res); }) .catch(rej => { console.log(rej); }) } //post请求 _('#testAjaxPost').onclick = function () { ajax({ url: 'http://localhost:1017/demo/demoRouterPost', data: { name: '杨四火' }, method:'post' }) .then(res => { console.log(res); }) .catch(rej => { console.log(rej); }) }script>
下面是AJAX封装的代码，诸君细品：
function ajax(options) { if (!isObject(options)) return false; return new Promise(function (resolve, reject) { var _default = { method: "get", //默认请求方式 url: "", data: {}, type: "json", //请求到文本的解析方式 complete: function () { //完成的的会调 console.log("请求完成"); }, success: function (res) { //请求成功的会调 console.log(res); }, error: function (res) { //请求成功的会调 console.log(res); }, bindThis: { name: "yy" }, status: { 200: function (res) { console.log(res, "请求成功"); }, 404: function (res) { console.log(res, "请求失败") } } } options = extend(_default, options); //修改3个会调函数的this指向 if (options.bindThis) { var fn_list = ["complete", "success", "error"]; fn_list.forEach((item) => { options[item] = options[item].bind(options.bindThis); }) } options.method = options.method.toLowerCase(); //兼容请求体型 var xhr = null; if (typeof XMLHttpRequest === "function") { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } options.method === "get" ? xhr.open(options.method, toUrlData(options.url, options.data, options .method)) : xhr.open(options.method, options.url); if (options.method === "post") { xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); xhr.send(toUrlData(options.url, options.data, options.method)); } else { xhr.send(null); } xhr.onreadystatechange = function () { if (xhr.readyState === 4) { options.complete(); if (/2\d{2}/.test(xhr.status)) { try { var data = options.type === "json" ? JSON.parse(xhr.responseText) : xhr .responseText; // options.success && options.success(data); resolve(data); } catch (e) { // options.error(e); reject(e); } } else { // options.error("请求失败"); reject("请求失败"); } if (isObject(options.status)) { typeof options.status[xhr.status] === "function" ? options.status[xhr.status](xhr .status) : ""; } } } })}function extend() { var target = arguments[0]; for (var i = 1; i < arguments.length; i++) { for (var attr in arguments[i]) { target[attr] = arguments[i][attr]; } } return target;}
感谢诸位读者老爷的观看，后台回复ajax，获取项目源码和函数库！