ajax 前后端交互的手段,通过js向服务器发送请求
所有服务器返回的响应都不会直接显示在页面上而是返回给js
js和服务端交互=>依赖于浏览器来发送请求
ajax :async javascript and xml
ajax使用:
1.XMLHttpRequest()内置构造函数 =>创建实例化对象发送Ajax请求
2.配置: xhr. open('请求方式(get,post,put),请求地址(后端位置),是否异步(默认异步TRUE)')
3.发送请求:xhr. send()
4.接收结果:xhr.onload=function(){}
XHR里面有responseText 是响应体
(JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。)
ajax异步
open(,,第三个参数)可选参数 TRUE表示异步 flase表示同步
结论:同步 事件必须写在send()之前
*/
const xhr = new XMLHttpRequest();
xhr.open('GET', './10.get.php')
xhr.onload = function () {
console.log(JSON.parse(xhr.responseText));
}
xhr.send();
promise:
1.es6语法,解决回调地狱
持续:pending成功:resolved失败:rejected
2.实例化对象自带两个方法:
2-1 then() -> promise对象.then(function(){}) =>成功:resolve
2-2 catch() -> promise对象.catch(function(){})=>失败:reject
3.promise进阶语法:
当你在一个promise 对象的 then 里面返回一个新的promise对象,你可以在
这个then的后面继续来一个then接收第一个then里的promise对象的结果
4.Promise.all()把多个promise结果封装成一个
注意:Promise.all([1,2,3...]).then(function(){})
then()里全部为 TRUE 才会显示结果
实例1:
const p0 =new Promise(function(resolve,reject){
ajax({
url: "./a.php",
dataType:"json",
success: function(res){
resolve(res);
},
error(err) {
reject(err)
}
})
})
p0.then(function(res) {console.log('成功',res);})
p0.catch(function(err) {console.log('失败'+err)})
async /await es7语法 异步等待
语法:
1.async 写在函数前面,是对函数的修饰关键字
2.await的使用必须是一个Promise 对象,才会有等待的结果,不然无意义
3.await关键字,必须有async 才能在函数内部使用
省略then,直接在定义变量接收.Promise的异步代码结束之前不会向下执行
作用:回调地狱终极解决方案. 使异步代码看着像同步代码
(本质是异步代码,只有内部是同步)错一个就报错
generator 函数迭代器(生成函数)
语法:在定义函数时,在function后面 或者函数前面 + *
函数内部可以使用 yield 关键字(类似return ,可以让generator暂停,从上次yield继续向后执行
+generator返回值是一个迭代器,包含一个 next()方法,每次执行会到下一个yield位置为止
例:
function* fn(){
console.log('1.执行');
yield '1.结束';
console.log('2.执行');
yield '2.结束';
console.log('3.执行');
yield '3.结束';
}
// result 就是给 fn 生成一个迭代器
const result= fn();
const first= result.next();
console.log(first); //fn()到第一个yield
// 只要后面还有yield就会显示done: false
const second= result.next();
console.log(second);
const third= result.next();
console.log(third);
const four= result.next();
console.log(four); //{value: undefined, done: true}无意义
Set 数据结构 es6新增
*语法:new Set()
*可以在实例化的时候传递一个数组 数组里的数据就是set数据类型的每一个数据
*特点:不接受重复数据
*方法:1.add() 语法:set数据类型.add(添加的数据)
* 2.delete() 语法:set数据类型.delete(删除的数据)
* 3.has() 语法:set数据类型.has(判断的数据)
* 4.clear() 语法:set数据类型.clear() 清除所有数据
* 5.forEach() 语法:
set数据类型.forEach(function (item,item,set)){ }遍历(item都是数据没有索引)
* 6.for of 循环遍历 for of (Set没有索引没有key)
* 7.size()属性 表示长度
Map 数据结构
* 语法:new Map()
* 实例化时接收一个二维数组
* 里层数组[0] 作为 key / [1] 作为 value
* 方法 1.set() 语法:Map数据结构.set(key,value) 可以写数组,对象,函数
* 2.get() 语法:Map数据结构.get(要获取的key) 根据key获取value
* 3.delete() 语法:Map数据结构.delete(要删除的key)
* 4.clear() 语法:Map数据结构.clear() 清除所有数据
* 5.forEach() 语法:Map数据结构.forEach(function (value,key,map)){ }
* 6.for of 遍历map数据结构 遍历的是里面每一个内容的key和value
* 7.has()方法 map数据结构.has(判断有无key)返回值是一个布尔值
* 8.size()属性 长度