把知识记在小本本上

将零散的知识点放在一个集中的地方,不断递归重构,形成一套为己所用的知识系统。

博客首页 | 小本本首页

fetch

fetch 是原生的用来替代 ajax 进行数据交互的。

解析text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oBtn=document.getElementById('btn1');
oBtn.onclick=async function (){
//1.请求数据
let res=await fetch('data/1.txt');
//2.解析
let str=await res.text();

alert(str);
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1">
</body>
</html>

解析JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oBtn=document.getElementById('btn1');
oBtn.onclick=async function (){
//1.请求
let res=await fetch('data/1.json');
//2.解析
let json=await res.json();

console.log(json);
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1">
</body>
</html>

解析二进制数据blob

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oImg=document.getElementById('img1');
let oBtn=document.getElementById('btn1');
oBtn.onclick=async function (){
//1.请求
let res=await fetch('data/1.png');
//2.解析
let data=await res.blob();
let url=URL.createObjectURL(data); // 其实这个 url 是把这个图片的二进制数据写到Chrome的临时文件去(小的内存里,大的放文件,后面删)

oImg.src=url;
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1">
<img id="img1" />
</body>
</html>

ajax 2.0

主要是 FormData 对象。(其实就是一个表单数据)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form1" action="http://localhost:8080/" method="post">
用户:<input type="text" name="user" /><br>
密码:<input type="password" name="pass" /><br>
文件:<input type="file" name="f1" /><br>
<input type="submit" value="提交">
</form>
</body>
<script>
let oForm=document.querySelector('#form1');

oForm.onsubmit=function (){
let formdata=new FormData(oForm);

let xhr=new XMLHttpRequest();

xhr.open(oForm.method, oForm.action, true);
xhr.send(formdata);

xhr.onreadystatechange=function (){
if(xhr.readyState==4){
if(xhr.status==200){
alert('成功');
}else{
alert('失败');
}
}
};

return false; // 阻止表单自己的提交事件
};
</script>
</html>

使用 jQuery 来处理 FormData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form1" action="http://localhost:8080/" method="post">
用户:<input type="text" name="user" /><br>
密码:<input type="password" name="pass" /><br>
文件:<input type="file" name="f1" /><br>
<input type="submit" value="提交">
</form>
</body>
<script src="jquery.js" charset="utf-8"></script>
<script>
$('#form1').on('submit', function (){
let formdata=new FormData(this);

$.ajax({
url: this.action,
type: this.method,
data: formdata,
processData: false, // 告诉 jQuery 不要瞎处理我的数据
contentType: false // 不要随便改 contentType,我传什么是什么
}).then(res=>{
alert('成功');
}, res=>{
alert('失败');
});

return false; // 阻止表单自己的提交事件
});
</script>
</html>

webSocket

性能高、双向。

包:socket.io,简单、方便、兼容 IE5、自动解析数据。

服务器端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const http=require('http');
const io=require('socket.io');

//1.建立普通http
let server=http.createServer((req, res)=>{});
server.listen(8080);

//2.建立ws
let wsServer=io.listen(server);
wsServer.on('connection', sock=>{
//sock.emit('name', 数据)
//sock.on('name', function (数据){});

// 接收前端发过来的数据
sock.on('aaa', function (a, b){
console.log(a, b, a+b);
});

// 向前端发数据
setInterval(function (){
sock.emit('timer', new Date().getTime());
}, 1000);
});

前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://localhost:8080/socket.io/socket.io.js" charset="utf-8"></script>
<script>
let sock=io.connect('ws://localhost:8080/');

sock.emit('aaa', 12, 5); // 向服务器发数据

let on = sock.on('timer', time=>{ // 接收服务器发的数据
console.log(time);
});

</script>
</head>
<body>

</body>
</html>