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>
本文版权归本人和饥人谷所有，转载请注明来源。
网友评论