JS案例：ajax获取图片列表

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地址，希望对各位有所帮助