AJAX是个啥？有什么作用？如何实现AJAX？如何使用AJAX？这几个问题我在前端JS的面试题中，遇见了不少，对于前后端分离，单页面渲染流行的今日，ajax似乎变得很重要。
那么什么是Ajax？
Ajax（Asynchronous JavaScript and XML），又被称为异步 JavaScript 和 XML，它不是一门语言，而是web应用的一门技术。要知道，如果在2009年你了解前端的dom操作，ajax技术和一点点JS语法，你就已经可以找到一份不错的web前端的工作了。也正是Ajax技术将前后端分离和单页面渲染流行度提升了很大的空间
Ajax有什么作用？
ajax的作用用官话来讲就是：在不需要刷新页面的情况下，就可以产生局部刷新的效果，也就是在页面不刷新的情况下实现局部渲染，使前后端数据传输得到提升。ajax实现了在浏览器与服务器之间进行http传输（只需要获得少量数据，而不用渲染整个页面），使web程序更快，更小。
如何实现AJAX？
在W3School上有详细文档
有几点需要注意：
IE低版本浏览器与其他浏览器兼容性问题
GET与POST请求方式的写法问题（GET需要将参数拼接在URL中并且不需要传data，而POST需要传data不需要拼接URL）
同步与异步方式中的请求超时timeout（异步可以填写timeout，而同步会报错）
这里我也简单实现一下：
首先，我们写个将对象属性拼接到url中的函数，方便get方式请求时调用
/* * 将对象属性拼接到url中 * @param url：接口地址 * @param obj：需要操作的对象 * @return string:拼接结果 */ function urlJoin (url, obj) { let list = [] for(let key in obj) { if(obj.hasOwnProperty(key)) { list.push(`${key}=${obj[key]}`) } } return `${url}?${list.join('&')}` }
然后就是ajax的基本写法（这里对ajax响应做了一个Promise操作，当然也可以改为回调或者事件监听）
/* * ajax请求方法 * @param config method：请求类型 url：接口地址 data：输入参数 timeout：超时时间 * @return Promise:Promise异步处理 */ function myAjax (config) { let xhr; if(window.ActiveXObject) { //ie浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { //其他浏览器 xhr = new XMLHttpRequest(); } config.method === 'get' ? (function () {//判断get与post等请求方式 config.url = urlJoin(config.url, config.data); config.data = null }()) : ""; //open(请求方式|string，请求路径|string，是否异步|bool)异步一般选择true，false代表同步，选false则会使请求不堵塞,不会等待请求结果,此时的timeout也无意义 xhr.open(config.method, config.url, config.async || true); xhr.send(config.data ? config.data : {}) config.async ? xhr.timeout = config.timeout || 10 * 1000 : ''//ajax请求超时，默认10秒 return new Promise((resolve, reject) => { xhr.addEventListener('timeout', function () {//超时抛错 reject(this) throw Error('request timeout') }) xhr.addEventListener('load', function () { if(xhr.readyState === 4 && xhr.status === 200) {//请求成功 resolve(JSON.parse(this.response)) } else { reject(this) } }) }) }
实现完成后得点个题啊，文章的目的是获取图片列表，接着上篇文章的nodejs搭建静态目录服务继续往下整
在上篇文章的其他接口中，新增一个获取图片列表的接口getList
这里我优化了一下，处理跨域，摒弃了node旧模块而使用了URL类，于是得到以下代码
let server = http.createServer((req, res) => { res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头解决跨域 let url = new URL(req.url, `http://${req.headers.host}`)//解析请求的地址 let data = urlSplit(url.href)//获取参数 if(req.url.indexOf('/static/') !== - 1) { console.log('获取静态文件') readFile('.' + req.url).then((data) => { res.write(data, "binary"); res.end(); }) } else { switch(url.pathname) { case '/getList': console.log('获取列表') res.write(JSON.stringify(['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'])); res.end(); break; default: res.writeHead(404, {'Content-Type': 'text/plain'}) res.write("not find"); res.end(); break; } } })
通过访问http://127.0.0.1:1024/getList就可以获取到列表
于是我们就可以开始实现view的渲染，新建一个loadPic类，功能是获取静态资源路径并渲染图片（其中utils类是工具类，包括ajax在内，后续在完整项目中可以看到）
import Utils from './utils.js'; let utils = new Utils() export default class LoadPic { //静态资源路径 set baseUrl (val) { this._baseUrl = val } get baseUrl () { return this._baseUrl } //根据数据渲染图片 create (ele, data) { for(let i = 0; i < data.length; i ++) { let liBox = utils.createEle('li', {listStyle: 'none'}, {}, ele) utils.createEle('img', null, { src: `${this.baseUrl}${data[i]}` }, liBox) } } }
然后我们在JS中使用ajax来获取数据并加载图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> lazyLoad</title> <style> li, li > img { float: left; height: 200px; } </style> </head> <body> <ul id="loadBox"></ul> <script type="module"> import Utils from "./js/utils.js" import LoadPic from './js/loadPic.js' let baseUrl = 'http://127.0.0.1:1024' let picPath = '/static/' let utils = new Utils() let loadBox = document.querySelector('#loadBox') let loadPic = new LoadPic() loadPic.baseUrl = baseUrl + picPath utils.myAjax({ url: baseUrl + '/getList', method: 'get', data: {len: 100}, timeout: 3 * 1000 }).then((data) => { loadPic.create(loadBox, data) console.log(data) }).catch((err) => { console.log(err) }) </script> </body> </html>
列表效果与之前一样，图片也加载出来了
最后附上源码：gitee地址，希望对各位有所帮助
