forked from JavaDevTeam/notes
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript-obj-XMLHttpRequest.js
More file actions
161 lines (141 loc) · 4.22 KB
/
javascript-obj-XMLHttpRequest.js
File metadata and controls
161 lines (141 loc) · 4.22 KB
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
---------------------------
XMLHttpRequest |
---------------------------
# 创建
function createXMLHttpRequest(){
try{
//大多数浏览器
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");//IE6.0
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5以及更早版本
}catch(e){
alert("为了更好的体验,请立即更换浏览器访问本站");
throw e;
}
}
}
}
# 实例方法
open(method,url,async)
* 打开一个连接,
* 第一个参数,以字符串的形式指定请求方式
* 第二个参数,是字符串,URL,
* 第三个参数boolean,是否为异步(默认true)
setRequestHeader(header,value)
* 设置请求头,第一个参数是 请求头的key,第二个参数是请求头的value
send()
* 设置请求体,如果是GET请求,则该方法应该设置为null(解决浏览器兼容问题)
* 参数可以是URL编码后的字符串,也可以是 FormData 对象
getResponseHeader(name)
* 获取指定名称的响应头
getAllResponseHeaders()
* 获取所有的响应头
# 实例属性
readyState
* 对象状态码
> 0状态:刚创建,还没有调用oppen();方法
> 1状态:请求开始,调用了oppen();方法,但还没调用send方法
> 2状态:请求发送完成,调用完了send方法
> 3状态:服务器已经开始响应,但不表示响应结束了
> 4状态:服务器响应结束(通常我们只关心这个状态...)
status
* HTTP响应码
timeout
* 超时时间,单位(ms)
* 默认 120 s
responseTyper
* 声明服务端响应的数据类型
* 可选值
arraybuffer,
blog,
responseXML
* 返回服务器响应的XML数据
responseText
* 返回服务器响应的TEXT数据
withCredentials
* 在跨域请求的时候,是否把Cookie值也发送到跨域服务器
* 该属性应该在 open() 方法执行之前设置
upload
* 当提交的表单是文件表单的时候,该属性会存在
* 该属性可以监听一个上传事件:progress
if(xhr.upload){
//监听上传属性的上传事件,每次上传事件都会执行 progressHandlingFunction
xhr.upload.addEventListener('progress',progressHandlingFunction, false);
//xhr.upload.onprogress = function(){} 也可以
}
* Event属性
total; //获取上传文件的总(所有)大小
loaded; //获取已经上传的文件大小
function progressHandlingFunction(event) {
event.total; //获取上传文件的总大小
event.loaded; //获取已经上传的文件大小
//获取进度的百分比值
var percent = (event.loaded / event.total) * 100;
//四舍五入保留两位小数
percent = percent.toFixed(2);
}
statusText
* http状态的描述文字
onload
* 就是readyState = 4 时会执行的回调,它可以代替这种判断
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){}
* 使用 onload
let xhr = new XMLHttpRequest();
xhr.onload = function () {
// 得到客户端的响应
let json = JSON.parse(xhr.responseText);
};
xhr.open('GET', '/foo', true);
xhr.send(null);
# 事件
onreadyStatechange
* 当异步对象的状态发生改变的时候调用
* 当使用 async=false 时，不用编写 onreadystatechange 函数,把代码放到 send() 语句后面即可
---------------------------
XMLHttpRequest-GET |
---------------------------
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/test", true);
xmlHttp.send(null);//GET请求没有请求体,但是也要给出null,不然FireFox可能无法发送
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务端的响应
var text = xmlHttp.responseText;
}
}
---------------------------
XMLHttpRequest-POST |
---------------------------
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "/test", true);
//当请求为POST的时候,需要手动添加请头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//请求体
xmlHttp.send("userName=kevin&passWord=123456");
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务端的响应
var text = xmlHttp.responseText;
}
}
---------------------------
XMLHttpRequest-二进制 |
---------------------------
var oReq = new XMLHttpRequest();
oReq.open("GET", "/common/get/captcha", true);
//响应体为二进制的blob
oReq.responseType = "blob";
oReq.onreadystatechange = function () {
if (oReq.readyState == oReq.DONE) {
//获取二进制数据
var blob = oReq.response;
var obj = {};
obj.imgSrc = URL.createObjectURL(blob);
console.log(obj.imgSrc);
}
}
oReq.send();