关于原生js中ajax部分的学习笔记

天啦噜，啃了两天，终于把ajax部分啃下来了，刚开始学的时候感觉脑袋里都是浆糊，但是现在感觉豁然开朗，也没什么难的~这种感觉真是！太！爽！啦！

一些知识点

ajax 是什么？有什么作用？

• Ajax是Asynchronous JavaScript and XML（异步Javascript和XML）的缩写。Ajax在浏览器和Web服务器之间使用异步数据传输（HTTP请求）从服务器获取数据。
• 这一技术能够向服务器请求额外的数据而无需重新加载整个页面，会带来良好的用户体验。

前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)

• 前后端开发联调需要注意以下事情：
  
  • 约定数据：约定好页面需要的数据和数据类型
  • 约定接口：约定接口的名称、请求的参数、相应的格式（成功或失败分别返回什么）
  • 将约定好的内容整理成接口文档和规范
• 后端接口完成前如何 mock 数据？
  
  • 可以使用server-mock或mock.js搭建模拟服务器，进行模拟测试
  • mock.js的github仓库
  • server-mock的github仓库
  • 使用XAMPP等工具，编写PHP文件来进行测试

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

• 使用disabled属性，配合setTimeOut()定时器函数，使按钮在得到数据前被禁用

el.addEventListener("click",function(){  
this.disabled=true; 
ajax(); 
setTimeout(this.disabled=false,0);
});

一些小例子

将ajax封装成一个ajax函数。

js代码
php代码
本地测试：

实现一个加载更多的功能的demo。

js代码
php代码
本地测试：

实现注册表单验证功能。

js代码
php代码
本地测试：

此文章著作权由ReedSun和饥人谷所有。转载须说明来源。