XMLHttpRequest记录

# XMLHttpRequest记录

# XMLHttpRequest()

# 基本使用

// 1. Create
let xhr = new XMLHttpRequest();

// 2. Init
xhr.open(method, URL, [async, user, password]);
// xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.responseType = 'json';

// 3. Send
xhr.send();
// xhr.getResponseHeader('Content-Type')
// xhr.getAllResponseHeaders()


// 手动终止请求, 并且 xhr.status 变为 0
xhr.abort();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意

setRequestHeader()设置的标头无法撤销。如果重复设置同一标头，则标头值会拼接在一起，而不是覆盖。

快速格式化所有标头：

let headers = xhr
    .getAllResponseHeaders()
    .split('\r\n')
    .reduce((result, current) => {
    let [name, value] = current.split(': ');
    result[name] = value;
    return result;
}, {});

1
2
3
4
5
6
7
8

# 发送POST请求

<form name="person">
    <input name="name" value="John">
    <input name="surname" value="Smith">
</form>

<script>
    let formData = new FormData(document.forms.person);
    formData.append("foo", "bar");
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "/post/user");
    xhr.send(formData);
    xhr.onload = () => alert(xhr.response);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 发送JSON数据

let xhr = new XMLHttpRequest();
let json = JSON.stringify({
    name: "John",
    surname: "Smith"
});
xhr.open("POST", '/submit')
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.send(json);

1
2
3
4
5
6
7
8

# 事件监听

function callback() {}

xhr.onload = callback;
xhr.onerror = callback;
xhr.onprogress  = callback;
xhr.onreadystatechange = callback;      // 当 readyState（请求状态）发生改变时

1
2
3
4
5
6

# 响应属性

function callback() {
    console.log(this.status);
    // this.statusText
    // this.responseText
    // this.readyState  - 0（初始）, 1（已发送）, 2（收到响应头）, 3（收到数据包）, 4（请求完成）
    // this.response.length
}
xhr.onload = callback;


// onprogress
xhr.onprogress = function(event) {
    // event.loaded - 下载了多少字节
    // event.lengthComputable - 如果服务器发送了 Content-Length 标头，则为 true
    // event.total - 总字节数（如果 lengthComputable 为 true 的话）
    console.log(`Received ${event.loaded} of ${event.total}`);
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 跨域请求

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://x.com/');
xhr.withCredentials = true;         // cors
xhr.send();

1
2
3
4

# URL()

# 基本使用

let url = new URL('https://google.com/search');
url.searchParams.set('q', 'test me!');
xhr.open('GET', url);       // https://google.com/search?q=test+me%21

1
2
3

编辑

← 个人模拟考试