XMLHttpRequest的基本使用

1.使用xhr发起GET请求（步骤）

1．创建XHR对象

var xhr = new XMLHttpRequest ()

2．调用open函数，指定请求方式与URL地址

xhr.open ( 'GET'，'地址' )

使用xhr对象发起带参数的GET请求时，只需在调用xhr.open期间，为URL地址指定参数即可:

xhr.open ( 'GET'，'http://....?id=2')

这种在 URL地址后面拼接的参数，叫做查询字符串。
无论使用$.ajax()，还是使用$.get()，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式。追加到URL地址的后面，发送到服务器的。
3．调用send函数，发起Ajax请求

xhr.send ()

4．监听onreadystatechange事件

xhr.onreadystatechange = function() {
     //4.1监听xhr 对象的请求状态readystate ;与服务器响应的状态status
     if(xhr.readystate === 4 && xhr.status === 200) {
     //4.2打印服务器响应回来的数据
     console.log (xhr.responseText)
     }
}

2.使用xhr发起POST请求

1．创建xhr对象

var xhr = new XMLHttpRequest（）

2．调用open（）

xhr.open ('POST', '地址' )

3．设置Content-Type属性(固定写法)

xhr.setRequestHeader ( 'Content-Type'，'application/x-www-form-urlencoded' )

4．调用send()，同时将数据以查询字符串的形式，提交给服务器

xhr.send ('bookname=水浒传&author=施耐庵')

5．监听onreadystatechange事件

xhr.onreadystatechange = function() {
    if (xhr.readystate === 4 && xhr.status === 200) {
    console.log (xhr.responseText)
)

3.xhr对象的readyState属性

XMLHttpRequest对象的readyState属性，用来表示当前Ajax 请求所处的状态。每个 Ajax请求必然处于以下状态中的一个:

值/状态	描述
0/UNSENT	XMLHttpRequest对象已被创建，但尚未调用open方法。
1/OPENED	open0方法已经被调用。
2/HEADERS_RECEIVED	send0方法已经被调用，响应头也已经被接收。
3/LOADING	数据接收中，此时response 属性中已经包含部分数据。
4/DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败。

4.URL编码

URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符。如果URL中需要包含中文这样的字符，则必须对中文字符进行编码(转义)。
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。URL编码原则的通俗理解:使用英文字符去表示非英文字符。
API:

• encodeURI() 编码的函数
• decodeURI() 解码的函数
  实例：

<script>
    var str = '编码'
    var str2 = encodeURI(str)
    console.log(str2)
    console.log('----------')
    var str3 = decodeURI('%E8%A5%BF%E6%B8%B8%E8%AE%B0')
    console.log(str3)
  </script>