关于原生js中ajax部分的学习笔记
2017-01-03 02:22
525 查看
天啦噜,啃了两天,终于把ajax部分啃下来了,刚开始学的时候感觉脑袋里都是浆糊,但是现在感觉豁然开朗,也没什么难的~这种感觉真是!太!爽!啦!
这一技术能够向服务器请求额外的数据而无需重新加载整个页面,会带来良好的用户体验。
约定数据:约定好页面需要的数据和数据类型
约定接口:约定接口的名称、请求的参数、相应的格式(成功或失败分别返回什么)
将约定好的内容整理成接口文档和规范
后端接口完成前如何 mock 数据?
可以使用server-mock或mock.js搭建模拟服务器,进行模拟测试
mock.js的github仓库
server-mock的github仓库
使用XAMPP等工具,编写PHP文件来进行测试
php代码
本地测试:
php代码
本地测试:
php代码
本地测试:
此文章著作权由ReedSun和饥人谷所有。转载须说明来源。
一些知识点
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和饥人谷所有。转载须说明来源。
相关文章推荐
- AJAX学习笔记之XML对象原生JS使用方法
- 原生js学习笔记——Ajax基础
- Jquery学习笔记(10)--ajax删除用户,使用了js原生ajax
- JS学习笔记 —— 原生Ajax总结
- 【JavaEE】javaEE学习笔记之Js原生Ajax和jQuery 的Ajax
- AJAX学习笔记之原生JS使用方法
- Node.js学习笔记(4)——除了HTTP(服务器和客户端)部分
- AJAXPro用法,关于JS同步和异步调用后台代码的学习
- Node.js学习笔记(5)——关于child_process模块
- JS学习笔记(三):HTML通过ajax请求获取并显示php中的内容
- JS学习笔记(五):关于$(function(){});里面的函数不执行问题
- 学习笔记(3)关于Js的enevt.cancelBubble的作用
- 关于js中的正则贪婪特性实践学习笔记
- 【前端学习笔记】原生Javascript中的ajax
- JS原生ajax与Jquery插件ajax深入学习
- JS学习笔记(一):关于{}和[]的使用
- MicrosoftAjax.js学习笔记
- Asp.Net Ajax 学习笔记9 JavaScript的原生类型以及Microsoft AJAX Library的相关扩展(上)
- 学习笔记:关于Firefox中jQuery.ajax()返回Xml Document
- js之ajax学习笔记