1. ajax 的五个步骤
1.建立xmlHttpRequest对象
if ( window.XMLHttpRequest ) {
xmlHttp = new XMLHttpRequest();
if( xmlHttp.overrideMimeType ) {
xmlHttp.overrideMimeType("text/xml");
}
} else if ( window.ActiveXobject ) {
var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0; i < activeName.length; i++) {
try {
xmlHttp = new ActiveXobject(activeName[i]);
break;
} catch(e) {}
}
}
if (!xmlHttp) {
alert("创建xmlhttprequest对象失败");
} else {}
2.设置回调函数
xmlHttp.onreadystatechange = callback;
function callback(){}
3.使用OPEN方法与服务器建立连接 xmlHttp.open("get","ajax?name="+ name,true)
此步注意设置http的请求方式(post/get),如果是POST方式,注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
4.向服务器端发送数据
xmlHttp.send(null);
如果是POST方式就不为空
5.在回调函数中针对不同的响应状态进行处理
if (xmlHttp.readyState == 4){ //判断交互是否成功
if (xmlHttp.status == 200){ //获取服务器返回的数据 //获取纯文本数据
var responseText =xmlHttp.responseText;
document.getElementById("info").innerHTML = responseText;
}
}
2. 点击a标签后的步骤
- 检查a标签里的URL是否为空。
- 浏览器检查缓存,如果请求对象存在缓存并且能够被使用,直接跳到第9步。
- 浏览器询问操作系统提供服务器的IP地址。
- 操作系统进行DNS查看并将IP地址回复给到浏览器。
- 浏览器打开到服务器的TCP连接(对于HTTPS这个步骤要复杂得多)。
- 浏览器通过TCP连接发送HTTP请求。
- 浏览器接收到HTTP响应,且可以关闭TCP连接,或者将其重新用于其他请求
- 浏览器检查响应是否是重定向(3xx结果状态代码)、授权请求(401)、错误(4xx和5xx)等;这些处理方式与正常响应(2xx)不同。
- 如果可缓存,则响应存储在缓存中
- 浏览器解码响应(例如,如果它是gzipped)
- 浏览器决定如何处理响应(例如,它是一个HTML页面,一个图像,还是一个声音剪辑?)
- 浏览器呈现响应,或为无法识别的类型提供下载对话框
3. 扩展运算符(spread)是三个点(...)
console.log(...[1,2,3])
// 1 2 3
Math.max(...[14, 3, 77])
//获得元素最大值,简化代码
4. Array.from把类似数组的对象的值转化数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
5.数组实例的 flat(),flatMap()
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
6.数组去重用Set
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]