ajax

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

ajax(Asynchronous JavaScript and XML 异步的JavaScript与XML技术),他利用HTML.CSS.Javascript.XML以及最最最重要的XMLHttpResponse接口向后端发送http请求实现不刷新页面的情况下更新部分页面内容.
步骤:
1.构建ajax, xhr = new XMLHttpResponse
2.设置发送方式.接口名字,参数. xhr.open('get','/loadMore?index='+pageIndex+'length=5',true)
3.设置header,文件格式等参数
4.发送HTTP请求,xhr.send()
5.接受数据,对数据进行操作
6.更新页面相关内容
作用:不刷新页面的情况下,更新部分页面内容,不耽误用户其他操作,提升用户体验.

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

注意事项:大的方面我需要什么,我给你什么.具体来讲:
1.约定后端发回的数据格式.数组.JSON.文本.二进制文件
2.约定请求方式:post或者get
3.约定接口名字/路径
4.约定发送的参数
mock数据
要完整运行前端代码，通常并不需要完整的后端环境，我们只要在mock server中实现以下几点就行了：

• 能渲染模板
• 实现请求路由映射

• 数据接口代理到生产或者

  
  
  

  image.png
  
  

  测试环境

参考

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

增加一个状态锁.具体在题目4实现
参考

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

    
    

    


    

        
新闻0
    
    
加载更多

// 服务端 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)
  
});