AJAX

一种无需重新加载整个网页的情况之下能够更新部分网页的技术。
使用AJAX的网页通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新。

同步

2018-10-09-09-22-56

异步

2018-10-09-09-24-37

XMLHttpRequest对象

var xhr = new XMLHttpRequest()

HTTP

通信协议，无状态协议。
HTTP请求过程，7步骤

  1. 建立TCP连接
  2. web浏览器向Web服务器发送请求命令。
  3. web浏览器发送请求头信息
  4. WEB服务器应答
  5. web服务器发送头信息
  6. web服务器向浏览器发送数据
  7. web服务器关闭TCP连接

HTTP请求四个部分：

  1. http请求的方法或动作，比如是GET还是POST.
  2. 正在请求的URL
  3. 请求头，客户端信息，验证信息
  4. 请求体，客户端的查询字符串，表单信息

GET: 【幂等：查询多少次都是一样的】
一般用于信息获取
使用URL传递参数
对所发送信息的数量也有限制，一般在2000个字符

POST：数据在请求体中
一般用于修改服务器上的资源
对所发送信息的数量是没有限制的

HTTP响应

  1. 数字和文字组成的状态码
  2. 响应头，对应于请求头，有服务器类型，日期时间。
  3. 响应体，响应正文，HTML代码，字符串等

HTTP状态码：【首位数组定义了状态的类型】
1xx：信息类，收到web浏览器请求，正在处理中。
2xx：成功，服务器成功处理请求
3xx：重定向，请求没成功，客户端采取进一步动作。
4xx：客户端错误，客户端提交的请求有错误
5xx：服务器错误，服务器不能处理请求

XHR发送请求

  1. open(method,url,async=true)
  2. send(string),GET为null，POST需要数据
  3. setRequestHeader(“key”,”value”) 【表单enctype有三种：application/x-www-form-urlencoded默认,multipart/form-data,text/plain】，必须写在send之前，open之后
  4. request.onreadystatechange事件

XHR取得响应

  1. responseText: 获得字符串形式的响应数据
  2. responseXML：获得XML形式的响应数据
  3. status和statusText：以数字和文本形式返回HTTP状态码
  4. getAllResponseHeader():获取所有的响应报头
  5. getResponseHeader(key):查询响应中的某个字段的值

readyState属性：这个属性的变化代表服务器响应的变化

  1. 0：请求未初始化，open还没有调用
  2. 1：服务器连接已建立，open已经调用
  3. 2：请求已经接收，接收到请求头信息了
  4. 3：请求处理中，接收到了响应主体了
  5. 4：请求完成，响应已就绪，响应完成了

使用onreadystatechange进行监听readystate属性的变化，当readystate变化就会触发这个事件。（部分浏览器的readystate属性变化触发不到），我们只需要当readystate=4以及status=200就可以判断是响应成功了。