前端学习(二十八)es6&ajax(笔记)
ES6
let
块级作用域
const
解构赋值
字符串拼接
扩展运算符
-----------------------------------------------------------
箭头函数
function show(a){
return a;
}
↓
show=a=>a;
function show(a,b){
return a+b;
}
↓
show=(a,b)=>a+b;
function show(a,b){
alert(a+b);
}
↓
show=(a,b)=>{
alert(a+b);
}
function show(){
alert(12);
}
↓
show=()=>{
alert(12);
}
function(){
}
↓
()=>{
}
function(a,b){
}
↓
(a,b)=>{
}
------------------------------------------------------------
Map
var map = new Map() 对象
设置
map.set(key,value);
获取
map.get(key);
删除
map.delete(key);
清空
map.clear()
循环
for...of...
for(let [key,value] of map){
}
----------------------------------------------------
数组扩展方法
Array.from();
把类数组变成真正的数组
var arr = Array.from(类数组);
类数组
长得像数组,一样要用for循环遍历。
但是不能使用数组的方法
获取一组元素
arguments
------------------------------------------------------
交互
$.ajax({
url:'',
data:{
t:Math.random()
}
}).then((res)=>{
//成功
},(err)=>{
//失败
});
----------------------------------------------------
需要后台给你接口
get.php?a=xxx&b=xxx
return
number
post.php?a=xxx&b=xxx
return
number
$.ajax({
url:地址,
type:类型,
data:{}
});
========================================================
ajax原理
1.创建一个ajax对象
var oAjax = new XMLHttpRequest();
不兼容IE6
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
兼容IE6,7,8
兼容写法
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}else{
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
GET
2.打开连接
oAjax.open('GET',url?data,true);
生活 程序
同步 同时做多件事情 一次只能做一件事
异步 一次只能做一件事 同时进行多件事情
3.发送请求
oAjax.send();
POST
2.打开连接
oAjax.open('POST',url,true);
设置请求头部
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
3.发送请求
oAjax.send(data);
4.接收响应
oAjax.onreadystatechange = function(){
//判断ajax状态
if(oAjax.readyState==4){
//判断http状态码
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
成功
响应结果
oAjax.responseText
}else{
失败
}
}
}
ajax状态
0 准备成功未发送
1 发送成功
2 接收原始数据成功
3 解析原始数据成功
4 完成
ajax的核心是什么?
XMLHttpRequest
前端学习(二十八)es6&ajax(笔记)的更多相关文章
- Java开发学习(二十八)----拦截器(Interceptor)详细解析
一.拦截器概念 讲解拦截器的概念之前,我们先看一张图: (1)浏览器发送一个请求会先到Tomcat的web服务器 (2)Tomcat服务器接收到请求以后,会去判断请求的是静态资源还是动态资源 (3)如 ...
- 前端学习(三十八)vue(笔记)
Angular+Vue+React Vue性能最好,Vue最轻=======================================================Angular ...
- 前端学习(三十)es6的一些问题(笔记)
赋值表达式 document.onclick = document.onmouseover = fn; var a = b = c = d = 5; 不推荐 逗号表 ...
- 前端学习(二十九)nodejs(笔记)
后台语言 java php .Net python Node.js------------------------------------------------- ...
- 前端学习(二十六)移动端s(笔记)
===================================================弹性布局rem布局---------------------------------------- ...
- 前端学习(二十二)css3(笔记)
html5 普通: header section footer nav article aside figure 特殊: canvas video audio ...
- 前端学习(二十)jquery属性(笔记)
jq里面操作属性的方法: 设置属性: 设置一个: $(this).attr('src','img/pic2.jpg'); 设置一组: ...
- Python学习二十八周(vue.js)
一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...
- JavaWeb学习 (二十八)————文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
随机推荐
- Windows 搭建MongoDB分片集群(二)
在本篇博客中我们主要讲描述分片集群的搭建过程.配置分片集群主要有两个步骤,第一启动所有需要的mongod和mongos进程.第二步就是启动一个mongos与集群通信.下面我们一步步来描述集群的搭建过程 ...
- [Luogu1938][USACO09NOV]找工就业Job Hunt
原题链接:https://www.luogu.org/problem/show?pid=1938 这一道题有一个比较难的点就是,这一张图上,是点上有权.既然点上有权的话,我们就不好一下子使用最短路了. ...
- js 中HTML的 onkeycode 和onkeydown属性事件
<!DOCTYPE html><html><head><script>function displayResult(){var x=document.g ...
- hdu 1695: GCD 【莫比乌斯反演】
题目链接 这题求[1,n],[1,m]gcd为k的对数.而且没有顺序. 设F(n)为公约数为n的组数个数 f(n)为最大公约数为n的组数个数 然后在纸上手动验一下F(n)和f(n)的关系,直接套公式就 ...
- MAX3232 每次只有在上电后,再连接串口线正常——保护电阻。RS232防雷保护
转载:http://m.newsmth.net/article/Circuit/298517?p=1 转载:http://www.360doc.com/content/18/0719/13/57938 ...
- iview input实现默认获取焦点并选中文字
1. 业务背景 配置页面,可新建和复制任务:当复制任务的时候,要把名字的input框默认获取焦点,并全选任务名.效果如下: 2. 代码实现 <template> <Form :mod ...
- Codeforces 842C--Ilya And The Tree(dfs+树)
原题链接:http://codeforces.com/contest/842/problem/C 题意:一个以1为根节点的树,每个节点有一个值ai,定义美丽度:从根节点到这个节点的路径上所有ai的gc ...
- HDU 6050 Funny Function —— 2017 Multi-University Training 2
Funny Function Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- jquery动态修改带有important的样式方法
$('.el-card').css("background", "#fff !important");(不起作用的) 改为: $('.el-card').css ...
- ubuntu16.04 常用软件
解决安装包依赖问题 更新数据库源 sudo apt-get update sudo apt-get -f -y install guake Terminal 作用:就是一个终端,按F12就出现,再按就 ...