Skip to content

Commit 2375d4f

Browse files
committed
24/04/01
1 parent 628b23d commit 2375d4f

1 file changed

Lines changed: 29 additions & 26 deletions

File tree

‎JavaScript/手动实现AJAX.md‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,55 +7,58 @@
77
`XMLHttpRequest`对象进行`HTTP`请求前必须通过open初始化,`open`接受五个参数,分别为请求方法、请求链接、异步标识、账号和密码用以服务端验证。
88

99
```javascript
10-
open(Method, URL, Asynchronous, UserName, Password)
10+
open(Method, URL, Asynchronous, UserName, Password);
1111
```
1212
在成功初始化请求之后,`XMLHttpRequest`对象的`setRequestHeader`方法可以用来设置请求头。
1313

1414
```javascript
15-
setRequestHeader(key,value)
15+
setRequestHeader(key,value);
1616
```
1717

18-
调用`open()`方法后,就可以通过调用`send()`方法按照`open`方法设定的参数将请求进行发送。
18+
调用`open()`方法后,就可以通过调用`send()`方法按照`open`方法设定的参数将请求进行发送。
19+
1920
```javascript
20-
send(Data)
21+
send(data);
2122
```
23+
2224
当`open`方法设定发送的方式为异步请求时,`onreadystatechange`事件监听器将自动在`XMLHttpRequest`对象的`readyState`属性改变时被触发。
2325

2426
```javascript
2527
switch(readyState){
26-
case 1: break; //当open方法被成功调用,readyState为1
27-
case 2: break; //当send方法被调用,readyState属性被置为2
28-
case 3: break; //HTTP响应内容开始加载,readyState属性被置为3
29-
case 4: break; //HTTP响应内容结束加载,readyState属性被置为4
28+
case 1: break; // 当`open`方法被成功调用 `readyState`为`1`
29+
case 2: break; // 当`send`方法被调用 `readyState`属性被置为`2`
30+
case 3: break; // `HTTP`响应内容开始加载 `readyState`属性被置为`3`
31+
case 4: break; // `HTTP`响应内容结束加载 `readyState`属性被置为`4`
3032
}
3133
```
3234
如果`XMLHttpRequest`对象的`readyState`属性还没有变成`4`,`abort`可以终止请求。这个方法可以确保异步请求中的回调不被执行。
3335

3436
```javascript
35-
abort()
37+
abort();
3638
```
3739

38-
##### ajax的简单实现
40+
## 实现
3941
由于浏览器的同源策略(协议、域名、端口号任一不同都算为跨域请求),于是此代码需要打开百度的首页,在开发者工具的`Console`直接执行,在`Network`查看效果。
4042

4143
```javascript
42-
function ajax(url,method="GET",data=null,async=true) {
43-
// 声明XMLHttpRequest //在IE5和IE6中需要使用ActiveX对象
44-
var XHR = XMLHttpRequest;
45-
// 创建XMLHttqRequest
46-
XHR = new XMLHttpRequest()
47-
// 设置请求状态改变时执行的函数
48-
XHR.onreadystatechange = function() {
49-
if (XHR.readyState === 4 ) console.log(`响应状态:${XHR.status}`,"FINISH") //XHR.responseText为响应体
50-
}
51-
// 初始化请求参数
52-
XHR.open(method,url,async)
53-
// 发起请求
54-
XHR.send(data)
55-
}
44+
function ajax(url,method="GET", data=null, async=true) {
45+
// 声明`XMLHttpRequest` // 在`IE5`和`IE6`中需要使用`ActiveX`对象
46+
let XHR = XMLHttpRequest;
47+
// 创建`XMLHttqRequest`对象
48+
XHR = new XMLHttpRequest();
49+
// 设置请求状态改变时执行的函数
50+
XHR.onreadystatechange = function() {
51+
// `XHR.responseText`为响应体
52+
if (XHR.readyState === 4) console.log(`响应状态:${XHR.status}`, "FINISH");
53+
}
54+
// 初始化请求参数
55+
XHR.open(method,url, async);
56+
// 发起请求
57+
XHR.send(data);
58+
}
5659

57-
ajax("https://www.baidu.com");
58-
ajax("https://www.baidu.com","POST","A=1&B=2");
60+
ajax("https://www.baidu.com");
61+
ajax("https://www.baidu.com", "POST", "A=1&B=2");
5962
```
6063

6164
## 每日一题

0 commit comments

Comments
 (0)