AJAX

ajax 是什么？有什么作用？

Ajax（Asynchronus JavaScript And XML）是一种利用XMLHttpRequest对象，实现当对服务器请求额外的数据而无需卸载页面的技术，可以带来更好的用户体验。能够以异步的方式从服务器端取得更多信息。

前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

约定数据格式
约定接口（类型、名字、参数）
通过server mock实现，如下

app.get('/getFriends', function (req, res) {
    var username = req.query.username
    var ret = ["nobody"]
    if (username == "bb") {
        ret = ["小明","小刚"]
    }
    res.send(ret)
});
app.psot('/getFriends', function (req, res) {
    var username = req.body.username
    var ret = ["nobody"]
    if (username == "bb") {
        ret = ["小明","小刚"]
    }
    res.send(ret)
});
//在当前网页文件夹下创建router.js,并如上通过get或post方法从URL中获取请求，再通过send方法返回响应

git 指令

点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

设置状态锁

 var btn = document.querySelector('.loadingMore a')
    var ctn = document.querySelector('#ct')
    var target = 0
    var dataArrive = true  //设置状态锁
    btn.addEventListener('click',function(){
        if(!dataArrive){
            return;
        }  //当判断是否有状态锁
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200||xhr.status === 304){
                    var newLi = JSON.parse(xhr.responseText)
                    console.log(newLi)
                    var fragment = document.createDocumentFragment()
                    for(var i=0; i < newLi.length; i++){
                        var node = document.createElement('li')
                        node.innerText = newLi[i]
                        fragment.appendChild(node)
                    }
                    ctn.appendChild(fragment)
                    dataArrive = ture  //得到响应，解锁
                }else{
                    console.log("it's wrong")
                }
            }

        }
        xhr.open('get','/loadingMore?index='+target+'&length=5',true)
        xhr.send()
        target += 5
        dataArrive = false  //已发送请求，加状态锁
    })

实现加载更多的功能，后端在本地使用server-mock来模拟数据

• 源代码

    
    
    


 


 
 

     加载更多
 

• 后端server mock 模拟数据

app.get('/loadingMore',function(req,res){
    var tgIndex = req.query.index
    var tgLength = req.query.length
    var data = []
        for(var i = 0; i < tgLength; i++){
            data.push('新闻'+(parseInt(tgIndex)+ i+1))
        }
        res.send(data)
})

效果图