ajax的使用

  1. ajax是什么以及作用
ajax是异步的javascript和xml
通过在后台和服务器交换少量的数据,ajax可以使得网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页实现异步更新。
  1. 前后端开发联调需要注意的事情,以及后端接口完成前需要mock哪些数据
前后端开发联调需要注意的事情
联调就是后端不好好写单元测试和集成测试,让前端发请求以达到测试的目的;前端不好好写mock和测试,让后端输出数据以达到测试的目的。
前后端开发联调需要注意的问题:
  • 约定数据:有哪些需要传输的数据,数据 类型是什么;
  • 约定接口: 确定接口名称及请求和响应的格式,请求的参数名称、响应的数据格式;
  • 根据这些约定整理成接口文档
后端接口完成前需要mock的数据:
  • 可以根据接口文档使用假数据来验证我们制作的页面的响应和接口是否正常。
  • 可以搭建php本地服务器用,php写脚本提供临时数据;
  • 也可以使用mock.js,它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据,模拟后端环境让你完成对页面和接口的测试。
  1. 点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击
为什么要防止ajax重复提交,有时候我们会遇到以下几种情况:
  • 点击一次按钮就会发送一次ajax请求,用户疯狂的快速点击按钮,密且块的ajax请求就会让我们的服务器压力大。我们必须采取一定的机制防止
  • 用户点击不那么频繁,但是网速太慢,请求的参数不变,就会出现页面上显现多次第一次的情求。
    可以加一个状态锁,在触发ajax前先上锁,之后用户再怎么点击都不会触发ajax,直至代码执行完再开锁。
var lock=false; if(!lock){ lock=true; xhr.onreadystatechange=function(){ if(xhr.readyState===4&&(xhr.status===200||xhr.status==304){ //do sth lock=false; } } xhr.send(); }else{ return }

4.图片预览:

ajax的使用
文章图片
loadmore.jpg
代码链接 【ajax的使用】

    推荐阅读