前端学习(二十八）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
