1
// 1. 创建一个 XMLHttpRequest 对象
2
var xhr = new XMLHttpRequest();
3

4
// 4.1. 监听请求状态的变化(推荐)
5
xhr.addEventListener('readystatechange', () => {
6
    // 5.1. 判断请求是否完成，网络层面，xhr.readyState === 4请求已经结束，可以拿到完整数据
7
    if (xhr.readyState !== 4) return;
8
    // 6.1. 判断请求是否成功，服务器层面
9
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
10
    }
11
})
12
// 4. 监听请求状态的变化,旧写法，兼容更好
13
xhr.onreadystatechange = () => {
14
    // 5. 判断请求是否完成，网络层面，xhr.readyState === 4请求已经结束，可以拿到完整数据
15
    if (xhr.readyState !== 4) return;
16
    // 6. 判断请求是否成功，服务器层面
17
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
18
    }
19
}
20

21
// 2. 配置请求信息,准备发送请求（HTTP方法、URL,是否异步发送请求）
22
xhr.open('GET', 'https://api.apihubs.cn/holiday/get', true);
23

24
// 3. 发送请求
25
xhr.send();

1
const url = 'http://localhost:3000/get';
2
const xhr = new XMLHttpRequest();
3
xhr.addEventListener('readystatechange', () => {
4
  if (xhr.readyState !== 4) return;
5
  if (xhr.readyState === 4) {
6
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
7
      console.log(xhr.responseText); //数据作为字符串形式
8
      console.log(typeof xhr.responseText); //string
9
    }
10
  }
11
});
12
//get通过请求头携带
13
//encodeURIComponent编码
14
xhr.open(
15
  'GET',
16
  `${url}?username=${encodeURIComponent('林')}&age=18`,
17
  true,
18
);
19
xhr.send();

1
//写法 1：直接写
2
xhr.open(
3
  'GET',
4
  `${url}?username=${encodeURIComponent('林')}&age=18`,
5
  true
6
);
7
//写法 2：先编码，再拼接
8
const username = encodeURIComponent('林');
9
xhr.open(
10
  'GET',
11
  `${url}?username=${username}&age=18`,
12
  true
13
//写法 3：多个参数自己拼
14
const params = {
15
  username: '林',
16
  age: 18
17
};
18

19
const query = Object.entries(params)
20
  .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
21
  .join('&');
22

23
xhr.open('GET', `${url}?${query}`, true);
24
//写法 4：封装一个函数
25
function stringify(params) {
26
  return Object.entries(params)
27
    .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
28
    .join('&');
29
}
30

31
xhr.open(
32
  'GET',
33
  `${url}?${stringify({
34
    username: '林',
35
    age: 18
36
  })}`,
37
  true
38
);

1
const url = 'https://www.imooc.com/api/http/search/suggest';
2
const params = new URLSearchParams({
3
    words: '前端&后端',
4
});
5
const xhr = new XMLHttpRequest();
6
xhr.addEventListener('readystatechange', () => {
7
    if (xhr.readyState !== 4) return;
8
    if (xhr.readyState === 4) {
9
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
10
            console.log(xhr.responseText); //数据作为字符串形式
11
            console.log(typeof xhr.responseText); //string
12
        }
13
    }
14
});
15
//get通过请求头携带
16
xhr.open('GET', `${url}?${params}`, true);
17
xhr.send();

1
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
2
const xhr = new XMLHttpRequest();
3
xhr.addEventListener('readystatechange', () => {
4
    if (xhr.readyState !== 4) return;
5
    if (xhr.readyState === 4) {
6
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
7
            console.log(xhr.responseText); //数据作为字符串形式
8
            console.log(typeof xhr.responseText); //string
9
        }
10
    }
11
});
12
xhr.open('POST', url, true);
13
// 数据编码
14
const data = new URLSearchParams({
15
    words: '前端&后端',
16
});
17
//常用1： 类型fromdata
18
xhr.send(data);
19
//常用2：不能直接传对象，需要传字符串类型,json解决，这时候就不用编码了
20
// const data1 = {
21
//   username: 'alex',
22
//   age: 18
23
// };
24
// 对象 → JSON 字符串 → 发送
25
// xhr.send(JSON.stringify(data1));

1
//第二个参数：过滤字段
2
const obj = {
3
  name: 'Tom',
4
  age: 18,
5
  password: '123456'
6
};
7
const json = JSON.stringify(obj, ['name', 'age']);
8
console.log(json);//{"name":"Tom","age":18}
9

10
//格式化输出（第三个参数）
11
JSON.stringify(obj, null, 2);
12
console.log(json);
13
//{
14
//  "name": "Tom",
15
//  "age": 18
16
//}

1
const storage = window.localStorage;
2
//设置
3
const set = (k, v) => {
4
  storage.setItem(k, JSON.stringify(v));
5
};
6
//获取
7
const get = (k) => {
8
  return JSON.parse(storage.getItem(k));
9
};
10
//删除
11
const remove = (k) => {
12
  storage.removeItem(k);
13
};
14
//清空
15
const clear = () => {
16
  storage.clear();
17
};
18
export { set, get, remove, clear };

1
import { set, get, remove, clear } from './storage.js';
2
const url = 'http://localhost:3000/post';
3
const xhr = new XMLHttpRequest();
4
xhr.addEventListener('readystatechange', () => {
5
  if (xhr.readyState !== 4) return;
6
  if (xhr.readyState === 4) {
7
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
8
      //console.log(xhr.responseText); //数据作为字符串形式
9
      //console.log(typeof xhr.responseText); //string
10
      const data = JSON.parse(xhr.responseText);//转对象
11
      console.log(data.user);//对象取user
12
      set('user', data.user);//存对象，k值为user
13
      console.log(get('user'));//取值
14
    }
15
  }
16
});
17
xhr.open('POST', url, true);
18
//常用1：表单提交就是这种
19
//xhr.send('username=alex&age=18');
20
//常用2：不能直接传对象，需要传字符串类型,json解决
21
xhr.send(
22
  JSON.stringify({
23
    username: 'alex',
24
    age: 18,
25
  }),
26
);

1
<form id="loginForm">
2
  <input type="text" name="username" placeholder="用户名">
3
  <input type="password" name="password" placeholder="密码">
4
  <button type="submit">登录</button>
5
</form>
6
<script>
7
const form = document.getElementById('loginForm');
8
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
9
const { username, password } = form;
10
form.addEventListener('submit', function (e) {
11
  // 阻止浏览器默认提交
12
  e.preventDefault();
13
  //const formData = new FormData(form);
14
  const xhr = new XMLHttpRequest();
15
  xhr.onload = function () {
16
    if (
17
      (xhr.readyState === 4 && xhr.status === 200) ||
18
      xhr.status === 304
19
    ) {
20
      console.log(xhr.responseText);
21
    }
22
  };
23
  xhr.open('POST', url, true);
24
  //组装数据
25
  const data = `username=${username.value}&password=${password.value}`;
26
  //设置请求头
27
  xhr.setRequestHeader(
28
    'Content-Type',
29
    'application/x-www-form-urlencoded',
30
  );
31
  xhr.send(data);
32
});
33
</script>

1
const form = document.getElementById('loginForm');
2
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
3
form.addEventListener('submit', function (e) {
4
  // 阻止浏览器默认提交
5
  e.preventDefault();
6
  const xhr = new XMLHttpRequest();
7
  xhr.onload = function () {
8
    if (
9
      (xhr.readyState === 4 && xhr.status === 200) ||
10
      xhr.status === 304
11
    ) {
12
      console.log(xhr.responseText);
13
    }
14
  };
15
  xhr.open('POST', url, true);
16
  //组装数据
17
  const data = new FormData(form);
18
  for (const item of data) {
19
    console.log(item);
20
  }
21

22
  xhr.send(data);

1
const form = document.getElementById("loginForm");
2
const formData = new FormData(form);
3
xhr.send(formData);
4
//添加数据：append()
5
const formData = new FormData();
6
formData.append('username', '张三');
7
formData.append('age', 18);
8
//添加文件
9
const file = document.getElementById('file').files[0];
10
formData.append('avatar', file);
11
//添加多个同名字段
12
formData.append('hobby', '篮球');
13
formData.append('hobby', '足球');
14
formData.append('hobby', '游戏');
15
//修改数据：set()
16
formData.append('name', '张三');
17
formData.set('name', '李四');//name=李四
18
//获取数据
19
formData.get('username');