任务24-ajax

1. ajax 是什么?有什么作用?

  • AJAX全称是 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML ),它是一种无须刷新页面就可以为页面中的某一部分加载数据的技术,数据通常以JSON的格式来进行传送,是一种创建快速动态网页的技术。
  • 作用:AJAX通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,会带来更好的用户体验。

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

  • 注意事情:
  • 约定双方需要传输的数据格式和接口参数,在接口文档中确定好参数的名称、格式等。
  • 约定好前后端联调的时间。
  • 约定请求和响应的格式和内容。
  • MOCK数据:
  • 使用server-mock或mock.js搭建模拟服务器,进行模拟测试。
  • 使用XAMPP等工具,编写PHP文件来进行测试。

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

  • 状态锁:当发起一个ajax请求的时候把状态锁关闭,状态锁关闭期间的点击事件都不执行,请求完成的时候再把状态锁给打开。
    <pre>var isLoading = false;//设置状态锁 btn.addEventListener("click",function(){ if (isLoading) { alert('等待中。。。'); return; } else{ isLoading = true;//打开状态锁 //状态锁打开后,执行代码 isLoading = false;//执行完代码后,需要在回调函数的最后将状态锁关闭 } },false);</pre>
  • 定时器:让ajax请求在多少毫秒后发出,中间只要重复点击就清空定时器,以最后一次点击事件为准。
    <pre>var timer = null; btn.addEventListener("click",function(){ if(timer){ clearTimeout(timer); } timer=setTimeout (function(){ //to do... //开启定时器,执行代码 },3000);//3秒内提交一次,重复点击重新计时</pre>
  • 禁用按钮:当请求发起的时候禁用掉按钮,当请求成功的时候按钮才能继续使用。
    <pre>function myFunc(){ var btn=document.getElementById('btn'); //to do... btn.removeAttr("disabled");//执行 指定代码后可选择移除disabled属性,让按钮可以再次被点击 } btn.click(function(){ btn.attr("disabled",true);//让按钮无法再次点击 myFunc();//执行其他代码,比如提交事件等 });</pre>

本文版权归本人和饥人谷所有,转载请注明来源。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.ajax 是什么?有什么作用? AJAX = Asynchronous JavaScript and XML(...
    GarenWang阅读 408评论 0 1
  • 问答 1. ajax 是什么?有什么作用? Ajax是Asynchronous JavaScript and XM...
    Maggie_77阅读 409评论 0 0
  • 问答 1.ajax 是什么?有什么作用? AJAX = Asynchronous JavaScript and X...
    鸿鹄飞天阅读 262评论 0 0
  • 关键词:Ajax 1. Ajax 是什么?有什么作用? Ajax 全称“Asynchronous Javascri...
    NathanYangcn阅读 327评论 0 0
  • ajax 实现的基本原理是 XMLHttpRequest 或 fetch api。简单的 ajax 请求,只需要几...
    他在发呆阅读 1,008评论 2 4