|
7 | 7 | `XMLHttpRequest`对象进行`HTTP`请求前必须通过open初始化,`open`接受五个参数,分别为请求方法、请求链接、异步标识、账号和密码用以服务端验证。 |
8 | 8 |
|
9 | 9 | ```javascript |
10 | | -open(Method, URL, Asynchronous, UserName, Password) |
| 10 | +open(Method, URL, Asynchronous, UserName, Password); |
11 | 11 | ``` |
12 | 12 | 在成功初始化请求之后,`XMLHttpRequest`对象的`setRequestHeader`方法可以用来设置请求头。 |
13 | 13 |
|
14 | 14 | ```javascript |
15 | | -setRequestHeader(key,value) |
| 15 | +setRequestHeader(key,value); |
16 | 16 | ``` |
17 | 17 |
|
18 | | -调用`open()`方法后,就可以通过调用`send()`方法按照`open`方法设定的参数将请求进行发送。 |
| 18 | +调用`open()`方法后,就可以通过调用`send()`方法按照`open`方法设定的参数将请求进行发送。 |
| 19 | + |
19 | 20 | ```javascript |
20 | | -send(Data) |
| 21 | +send(data); |
21 | 22 | ``` |
| 23 | + |
22 | 24 | 当`open`方法设定发送的方式为异步请求时,`onreadystatechange`事件监听器将自动在`XMLHttpRequest`对象的`readyState`属性改变时被触发。 |
23 | 25 |
|
24 | 26 | ```javascript |
25 | 27 | 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` |
30 | 32 | } |
31 | 33 | ``` |
32 | 34 | 如果`XMLHttpRequest`对象的`readyState`属性还没有变成`4`,`abort`可以终止请求。这个方法可以确保异步请求中的回调不被执行。 |
33 | 35 |
|
34 | 36 | ```javascript |
35 | | -abort() |
| 37 | +abort(); |
36 | 38 | ``` |
37 | 39 |
|
38 | | -##### ajax的简单实现 |
| 40 | +## 实现 |
39 | 41 | 由于浏览器的同源策略(协议、域名、端口号任一不同都算为跨域请求),于是此代码需要打开百度的首页,在开发者工具的`Console`直接执行,在`Network`查看效果。 |
40 | 42 |
|
41 | 43 | ```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 | +} |
56 | 59 |
|
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"); |
59 | 62 | ``` |
60 | 63 |
|
61 | 64 | ## 每日一题 |
|
0 commit comments