## 课堂笔记
## Ajax
- 什么是Ajax？
- async javascript and xml
- 就是前后端交互的一种手段(异步请求)
## 同步和异步
- js是一门单线语言，在同一时间内不能同时执行多个任务
- 同步：按顺序执行
- 异步：不按顺序执行，先等所有的同步代码执行完毕后，才执行；比如：定时器
## ajax的特点
- ajax是纯面向对象的方式书写
+ js内置了创建ajax对象的构造函数
- 不需要插件支持，原生的js就能写
- 页面局部刷新，用户体验比较好，使用比较灵活
+ 异步请求，不会阻塞主进程
- ajax请求的响应，不会直接响应在网页中，而是响应在ajax对象身上
## 如何使用ajax
1. 创建ajax对象
+ `const xhr = new XMLHttpRequest()`
2. 配置请求的方式和请求的地址等信息
+ 使用open方法 `xhr.open(请求方式,请求地址)`
+ 第三个参数可以不写，默认是 true 表示请求是异步的
+ 如果写false，则表示请求是同步的
3. 发送请求
+ `xhr.send()`
4. 接收响应
### 如何接受到响应？
- ajax对象上有一个 `responseText` 属性，存储的是ajax请求的响应数据
- 何时能够获取到ajax请求的响应数据？
- http状态码为200的时候
- 当ajax对象可以拿到响应体的时候
- ajax对象上有一个 `status` 属性，存储了http的状态码
- ajax对象上有一个 `readyState` 属性，存储了ajax的状态码
+ ajax状态码表示ajax请求接收到响应的各个阶段
+ `readyState === 0` 实例化完成(ajax对象已经创建),未初始化
+ `readyState === 1` 已经配置好了请求方式和地址等(open())，已经初始化
+ `readyState === 2` 请求已经发送(send())
+ `readyState === 3` 已经接收到响应体数据，还在解析中
+ `readyState === 4` 响应数据解析完成，可以使用响应数据
- 什么时候可以获取到响应数据？
+ **http状态为200&&ajax状态码为4**
- ajax对象有一个事件 readystatechange
+ 当ajax状态码发生变化的时候就会触发这个事件
+ 0-1
+ 1-2
+ 2-3
+ 3-4
- 在主流浏览器中，ajax对象有一个load 事件
+ 当ajax状态码为4并且http状态码为200的时候，会触发这个事件
+ 低版本的IE不支持这个事件
## 发起get方式的ajax请求，携带参数
- 携带的参数拼接在请求地址后面 ?
- 参数的形式：键值对的形式 key1=value1&key2=value2
```javascript
const xhr = new XMLHttpRequest();
// 请求携带参数，拼接在地址后 name=leon&age=18
xhr.open('get','./01-ajax.php?name=leon&age=18');
xhr.send();
xhr.onload = function(){
console.log(xhr.responseText);
}
```
## 发起post方式的ajax请求，携带参数
- 如果是post请求，并携带参数
- 则需要在发送请求之前，设置一下请求头
+ `Content-Type application/x-www-form-urlencoded`
+ aja对象有一个setRequestHeader方法可以设置请求头
- 请求传参
+ 参数的形式： 键值对象的字符串 name=leon&age=18
+ 对象.send('name=leon&age=18');
```javascript
const xhr = new XMLHttpRequest();
xhr.open('post','./post.php');
// 设置请求头
xhr.setRequestHeader('Content-type:application/x-www-form-urlencoded');
xhr.send('name=leon&age18');
xhr.onload = function(){
console.log(xhr.responseText);
}
```
