Skip to content

Commit ae36dc3

Browse files
zhouxiaotianzhouxiaotian
committed
AJAX&NODE
1 parent 5cad757 commit ae36dc3

4 files changed

Lines changed: 158 additions & 2 deletions

File tree

‎10期JS正式课/正式课第七周/第二天/AJAX.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script type="text/javascript">
9+
var xhr = new XMLHttpRequest;
10+
xhr.open('head', 'note.txt');
11+
xhr.onreadystatechange = function () {
12+
if (xhr.readyState === 2) {
13+
//->获取响应头
14+
//xhr.getResponseHeader([key])
15+
var serverTime = xhr.getResponseHeader('Date');
16+
//console.log(serverTime);//->格林尼治时间
17+
console.log(new Date(serverTime));//->北京时间了
18+
}
19+
20+
if (xhr.readyState === 4) {
21+
//->获取响应主体内容
22+
//xhr.responseText
23+
//xhr.responseXML
24+
//console.log(xhr.responseText);
25+
}
26+
};
27+
xhr.send(null);
28+
</script>
29+
</body>
30+
</html>

‎10期JS正式课/正式课第七周/第二天/AJAX.txt‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
客户端向服务器端发送的所有请求,以及服务器端返回的内容等信息,都可以在谷歌浏览器的Network选项中看到
2+
在客户端和服务器端交互的时候,客户端在发送请求的时候可以把内容传递给服务器,服务器也会把一些需要的内容返回给客户端
3+
4+
1、HTTP报文:我们把客户端传递给服务器的东西和服务器传递给客户端的内容统称为HTTP报文
5+
起始行:请求起始行、响应起始行
6+
首部(头):请求头、响应头、通用头(General)、自定义头
7+
主体:请求主体、响应主体
8+
9+
客户端如何把报文信息传递给服务器?
10+
->在请求的URL末尾通过问号传参的方式传递给服务器,服务器端可以解析URL地址从而获取到传递过来的信息
11+
12+
->客户端可以把信息放在请求头/自定义请求头中传递给服务器,服务器端通过获取请求头信息得到传递过来的内容(客户端设置，服务器端获取)
13+
14+
->客户端可以把信息放到请求主体中传递给服务器(客户端设置，服务器端获取)
15+
16+
服务器如何的把报文信息返回给客户端?
17+
->服务器把内容放到响应头/自定义响应头中返回给客户端,客户端从响应头中获取内容(服务器端设置，客户端获取)
18+
19+
->服务器把内容放到响应主体中传递给客户端
20+
21+
响应头中重要的内容:
22+
Date:Wed, 26 Oct 2016 07:20:28 GMT 获取到的是服务器的时间(服务器即将把内容返回给客户端的时候，那会的时间) ->它是格林尼治时间GMT+0000,北京时间是GMT+0800
23+
在真实项目中,如果我们想要获取服务器的时间,我们可以从响应头中获取到,但是获取的时间和真实的时间肯定存在延迟(服务器发数据的时候记录时间是10:00,响应头中的时间是10:00,我们需要一分钟才能获取到响应头,也就是在真实时间10:01的时候,我们获取到的服务器时间10:00,这样就有一分钟的时差...)
24+
25+
XMLHttpRequest ->XHR
26+
27+
2、HTTP事物=REQUEST+RESPONSE
28+
29+
3、URI/RUL/URN
30+
URI=URL+URN:统一资源标识符
31+
URL:统一资源定位符
32+
URN:统一资源标识
33+
34+
------------------------------------------
35+
1、AJAX
36+
->什么是AJAX?
37+
Async(Asynchronous) JavaScript And XML 异步的JS和XML,这里的异步是指当客户端和服务器端完成交互后,需要改变页面中某一个区域的状态,当前的页面不会整体的刷新,而是需要改变的这个区域做局部的刷新...
38+
39+
->AJAX有什么作用?
40+
AJAX也是实现前后端交互的,和之前讲的资源文件的请求交互不一样,AJAX主要用于从服务器端获取页面中需要展示的数据的
41+
资源文件的请求,都是浏览器自己去向服务器发送的请求,也是自己主动接受返回的内容然后进行渲染的(LINK/SCRIPT/IMG...);但是数据的请求发送就需要使用JS中的AJAX技术来完成了;
42+
43+
->HTML/XHTML 超文本标记语言(所使用的标签都是W3C规定好的)
44+
->XML:可扩展的标记语言(所使用的标签都是自己定义的)
45+
一般项目中都会使用XML用来临时存储一些数据,在XML文档中我们可以自定义一些具有意思的标签,按照严谨的结构来存储数据,这样看起来比会比JSON格式的数据差
46+
47+
//->创建一个AJAX对象
48+
var xhr=new XMLHttpRequest(); //=>new XMLHttpRequest创建AJAX对象在IE6及更低版本浏览器中不兼容(http://www.zhufengpeixun.cn/course/22/learn#lesson/823)
49+
50+
//->打开请求的URL,配置一些基本的参数信息
51+
xhr.open('get','',false);
52+
=>[HTTP METHOD]
53+
=>[Request URL]
54+
=>[async/sync]默认是异步的,也就是第三个参数为TRUE；写成FALSE是同步；
55+
=>[USER NAME]
56+
=>[USER PASS]
57+
58+
//->监听AJAX状态的改变,在不同的状态中做不同的事情
59+
xhr.onreadystatechange=function(){
60+
if(xhr.readyState===4 && /^2\d{2}$/.test(xhr.status)){
61+
var data=xhr.responseText;
62+
}
63+
};
64+
65+
//->向服务器发送请求
66+
xhr.send(null);
67+
68+
69+
2、HTTP METHOD 请求方式
70+
不管使用什么样的请求方式,客户端都可以传递给服务器内容,服务器也可以给客户端返回内容
71+
GET:获取,一般应用于给服务器的少,从服务器拿的多
72+
DELETE:删除,一般应用于从服务器的某个位置上删除文件或者内容
73+
HEAD:头,一般应用于只获取服务器上响应头部分的数据,响应主体的内容不获取
74+
75+
POST:推送,一般应用于给服务器的多,服务器拿的少
76+
PUT:放,一般应用于把客户端的某一个内容或者文件放到服务器上
77+
...
78+
79+
GET系列的请求方式 PK POST系列的请求方式
80+
GET系列传递给服务器内容,一般都是把内容放在URL的末尾通过问号传参的方式传递给服务器
81+
xhr.open('get','/temp?name=zf&age=8');
82+
xhr.send(null);
83+
84+
POST系列传递给服务器的内容,一般都是把内容放到请求主体中传递给服务器的
85+
xhr.open('get','/temp');
86+
xhr.send('{"name":"zf","age":8}');//->SEND中放的东西就是请求主体的内容,一般在POST请求中,如果需要传递给服务器数据,我们都放在SEND中(一般我们放的都是JSON格式的字符串)
87+
88+
1、传递给服务器的内容大小不同
89+
一般GET给的少,POST给的多;
90+
如果使用GET请求,传递给服务器的也很多的话,这样请求的URL地址就会很长,浏览器对于URL地址的长度都会有限制(谷歌8KB 火狐7KB IE2KB),超过URL长度的部分,浏览器会自己截取;
91+
POST请求理论上传递的内容是没有大小限制的,但是真实的项目中,我们一般都会限制一下,防止由于传输的内容过大导致花费的时间过长或者浏览器卡死
92+
93+
2、缓存问题
94+
GET请求容易产生缓存;而POST请求不会出现缓存; (这里的缓存是浏览器和服务器默认的缓存,我们不能控制,所以一般项目中我们需要把GET请求的缓存去掉；如果非要使用缓存的话，需要我们使用其它的技术单独的来处理才可以)
95+
不让下一次的GET请求走缓存:在URL的末尾加随机数
96+
xhr.open('get','/temp?name=zf&age=8&_='+Math.random());
97+
98+
3、安全问题
99+
GET请求传递给服务器的内容都在URL上,如果URL被劫持了,传递给服务器的内容就泄露了,所以GET请求不是很安全;POST请求相对于GET来说安全一些;
100+
101+
3、xhr.readyState AJAX的状态
102+
0 UNSEND 未发送 var xhr=new XMLHttpRequest;此时的状态就为0
103+
1 OPENED 已打开 xhr.open();此时状态为1
104+
2 HEADERS_RECEIVED 响应头信息已经接收
105+
3 LOADING 响应主体内容正在返回
106+
4 DONE 响应主体内容接收完成
107+
108+
4、xhr.status 服务器响应状态,HTTP网络状态码
109+
200 成功
110+
301 永久重定向 www.360buy.com => www.jd.com
111+
302 临时重定向(服务器的负载均衡)
112+
304 读取的是缓存数据 对于不经常更新的CSS/JS/IMG，我们都可以做304，减轻服务器的压力
113+
400 请求的参数有误
114+
401 无权限访问
115+
404 请求的地址不存在
116+
500 未知服务器错误
117+
503 服务器超负载
118+
...

‎10期JS正式课/正式课第七周/第二天/note.txt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,3 @@
3434

3535

3636

37-
38-

‎10期JS正式课/正式课第七周/第二天/temp.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<root>
2+
<student>
3+
<name>高占新</name>
4+
<age>81</age>
5+
</student>
6+
<student>
7+
<name>赵文斌</name>
8+
<age>82</age>
9+
</student>
10+
</root>

0 commit comments

Comments
 (0)