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

原创 2017年01月03日 02:22:01

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

一些知识点

ajax 是什么?有什么作用?

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

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

  • 前后端开发联调需要注意以下事情:
    • 约定数据:约定好页面需要的数据和数据类型
    • 约定接口:约定接口的名称、请求的参数、相应的格式(成功或失败分别返回什么)
    • 将约定好的内容整理成接口文档和规范
  • 后端接口完成前如何 mock 数据?

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

  • 使用disabled属性,配合setTimeOut()定时器函数,使按钮在得到数据前被禁用
el.addEventListener("click",function(){  
this.disabled=true; 
ajax(); 
setTimeout(this.disabled=false,0);
});

一些小例子

将ajax封装成一个ajax函数。

js代码
php代码
本地测试:
0_1483380786291_demo1成功截图.JPG

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

js代码
php代码
本地测试:
0_1483380807109_demo2成功截图.JPG

实现注册表单验证功能。

js代码
php代码
本地测试:
0_1483380828219_demo3成功截图.JPG

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AJAX学习笔记之XML对象原生JS使用方法

首先在src文件下写好servlet,命名为AJAXMLServe: import javax.servlet.http.HttpServlet; import javax.servlet.http...

AJAX学习笔记之原生JS使用方法

首先在src文件下写好servlet,命名为ajax_Serve: import javax.servlet.http.HttpServlet; import javax.servlet.http....

原生JS学习笔记1——基本数据类型和运算符

原生JS学习笔记1——基本数据类型和运算符

原生JS学习笔记3——数组

原生JS学习笔记3——数组

HTML5独家分享:原生JS学习笔记2——程序流程控制

当当当当 。。。。。楼主又来了!新一期的JS学习笔记2——程序流程控制更新了! 想一键获取全部JS学习笔记的可以给楼主留言哦! js中的程序控制语句   常见的程序有三种执行结构:  ...

原生JS学习笔记4——DOM操作

原生JS学习笔记4——DOM操作

HTML5独家分享:原生JS学习笔记1——基本数据类型和运算符

JS介绍   js的历史   在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。   由于网景公司希望能在静态HTML页面上添加...

JS-学习笔记:原生JS实现轮播图

用原生js实现轮播图效果
  • wcslb
  • wcslb
  • 2016-10-22 18:18
  • 1385

ajax学习 js原生

php工程师肯定对ajax技术不会陌生。简单的说,ajax可以网页在不全部刷新的情况下,从服务器拿到数据,并且借助js可以直接改变网页,是一种很实用的技术。我一般常用的是jQuery封装好的ajax。...

js中的ajax和jquery中的ajax学习笔记

一、JS中的Ajaxajax:异步访问/局部刷新1.同步和异步2.Ajax的运行原理页面请求---->Ajax引擎----->提交给服务器端这段时间可以做任何事情服务器端响应------>Ajax引擎...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)