进阶12 ajax实践

使用server-mock

1.安装nodejs
2.打开gitbash,执行npm install -g server-mock
使用：搭建web服务器

• 在终端cd到你的文件所在的文件夹
• 执行mock start可将当前文件夹路径作为根目录启动一个web服务器
• 在浏览器中输入http://localhost:8080/xx.html

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

Ajax(Asynchronous JavaScript + XML)是一种创建交互式网页应用的开发技术，利用Ajax可以向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。
Ajax特点：

• Ajax通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。
• Ajax的核心是XMLHttpRequest对象

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

前后端开发联调需要注意事项：

1. 约定接口数据：包括接口名称,前端需要传的查询数据格式，后台返回的数据格式，请求方式(get/post/...)
2. 根据约定生成接口文档

mock数据方式：
使用nodejs搭建服务器，如安装server-mock，在项目所在的根目录创建router.js文件，修改router.js代码，添加方法模拟接收前端请求，并返回数据。

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

添加一个判断数据是否到来的isDataArrive变量，4中有实现。

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

参考代码

//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))
    }
    setTimeout(function(){
        res.send(data);
    },3000);
    
});

  
    
    
    
  
  
    

    
    
      加载更多