进阶12-ajax

题目1： ajax 是什么？有什么作用？

  • Asynchronous JavaScript And XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法, 包括: [HTML]or [XHTML], [Cascading Style Sheets], [JavaScript], [The Document Object Model], [XML], [XSLT], 以及最重要的 [XMLHttpRequest object].
  • 作用：结合了这些技术的AJAX模型以后， 网页程序能够逐步快速地将更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。尽管X在Ajax中代表XML, 但由于自身的许多优势，比如更加轻量以及作为Javascript的一部分，目前[JSON]的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

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

  • 前后端开发联调需要约定接口：
    1.请求形式（get/post）.
    2.约定的接口(URL)。
    3.需要传入的参数和返回的参数，包括参数的名称、数据格式等。
  • mock 数据：
    1.使用 nodejs 搭建本地服务器，模拟后台数据。
    2.使用server-mock或mock.js搭建模拟服务器，进行模拟测试；

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

  • 在用户点击之后到数据到来之前，禁用点击按钮或者让用户点击无效，达到防止重复点击。具体使用在下面代码会提到。

题目4：实现加载更多的功能，效果范例，后端在本地使用server-mock来模拟数据

  • html代码
<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
<style type="text/css">
li {
    list-style: none;
    height:40px;
    line-height:40px;
    font-size: 18px;
    border:1px solid pink;
    border-radius: 3px;
    margin:5px;
}
a { 
    width:100px;
    height:40px;
    line-height:40px;
    font-size: 16px;
    border:1px solid pink;
    border-radius: 3px;
    margin:0 auto;
    display: block;
    text-align: center;
    text-decoration: none;
    color:pink;
}
</style>
</head>
<body>
<ul  id="ct">
</ul>
 <a href="#" class="btn" id="loadmore" >加载更多</a>
<script>
    var btn = document.querySelector(".btn");
    var loadmore = document.querySelector("#loadmore")
    var ct = document.querySelector("#ct")
    var index = 0;
    var judgeData = true; //点击之后数据到来之前设置judgeDate为false，防止重复点击
    btn.addEventListener("click",function(e){
        if(!judgeData){
            return;
        }
        judgeData = false;
        e.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 ){
                if(xhr.status ===200||xhr.status ===304){
                    var results = JSON.parse(xhr.responseText)
                    var fragments = document.createDocumentFragment()
                    for(let i = 0;i < 5; i++){
                        var node = document.createElement("li")
                        node.innerText = results[i]
                        fragments.appendChild(node);
                    }
                ct.appendChild(fragments)
                index += 5;
                }else{
                    console.log("出错了")
                }
                judgeData = true;
            }
        }
        xhr.open("get","/loadMore?index=" + index + "&length=5" ,true)
        xhr.send();
    })
</script>
</body>
</html>
  • 后台代码
function setRouter(app){ 
 var router = app; 

//服务端router.js
app.get('/loadMore', function(req,res){
    var curIdx = req.query.index
    var len = req.query.length
    var data = []

    for(var i = 0;i<len ;i++){
        data.push("新闻" + (parseInt(curIdx) + i))
    }
    res.send(data)
});}
 module.exports.setRouter = setRouter
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容