onload和onreadstatechange

1. onload事件 ： 接收服务器响应的数（一次请求，只会执行一次）

2. onreadystatechang事件 : 作用与onload事件一致（一次请求，会执行多次）

面试点： XMLHttpRequest对象的状态码 （xhr.readyState）

0: 请求未建立 (open之前)

1: 服务器连接已建立 (open之后)

2. 请求已接收 (send之后,服务器已经接收了请求)

3. 请求处理中

4. 请求已完成，且响应已就绪 (服务器完成响应，onload事件就是在这里执行)
 

//(1).实例化ajax对象
    let xhr = new XMLHttpRequest()
    console.log(xhr.readyState)
//(2).设置请求方法和地址
    xhr.open("post", "http://www.liulongbin.top:3009/api/login")
//(3).设置请求头（post请求才需要设置）
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    console.log(xhr.readyState)
//(4).发送请求 ： 参数格式  'key=value'
    xhr.send("username=admin&password=123456")
//(5).注册回调函数
    //a. onload 是新式浏览器才支持的
    //b. 如果要兼容更早的浏览器，可以使用 onreadystatechange
    //c. onreadystatechange触发时机 ： xhr.readState状态变化
    // xhr.onload = function() {};
 
xhr.onreadystatechange = function () {
      console.log(xhr.readyState)
      //onreadystatechange会触发多次，一般需要判断xhr.readState == 4 才获取响应数据
      if (xhr.readyState == 4) {
        console.log(xhr.responseText)
      }
    }

一、xhr对象的常用属性与方法

       1.1 onreadystatechange
              描述：onreadystatechange属性指向一个回调函数。当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。
​              语法：xhr.onreadystatechange = function(){};

       1.2 readyState
               描述：是一个只读属性，用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态一般会在onreadystatechange事件的回调函数中，通过判断readyState属性的值，进而执行不同状态对应的函数。
​               语法：xhr.onreadystatechange = function(){
​                                  if(xhr.readyState == n){
​                                       // 执行对应的函数
​                                  }
​                           }

​               说明：
​                        值为0,对应常量UNSENT
​                               表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
​        
​                        值为1,对应常量OPENED
​                               表示send()方法还没有被调用，仍然可以使用setRequestHeader() 设定HTTP请求头
​        
​                       值为2,对应常量HEADERS_RECEIVED
​                              表示send()方法已经执行，并且头信息和状态码已经收到。
​        
​                       值为3,对应常量LOADING
​                              表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。

​                       值为4,对应常量DONE，

                              表示服务器数据已经完全接收，或者本次接收已经失败了

       1.3 status
             描述：表示本次请求所得到的HTTP状态码，它是一个整数。
​             语法：if(xhr.readyState == n){
​                             if(xhr.status == 200){
​                                //通信成功
​                              }
​                         }
​            说明：
​                      a.本属性是只读属性。
​                      b.本属性有以下可能值：（一般来说认为200就是通信成功的标志。）
​                                                           200, OK，访问正常    
​                                                           301, Moved Permanently，永久移动
​                                                           302, Move temporarily，暂时移动    
​                                                           304, Not Modified，未修改
​                                                           307, Temporary Redirect，暂时重定向
​                                                           401, Unauthorized，未授权
​                                                           403, Forbidden，禁止访问    
​                                                           404, Not Found，未发现指定网址
​                                                           500, Internal Server Error，服务器发生错误
                                                          

          1.4 statusText
                   描述：表示服务器发送的状态提示，是一个只读字符串。
​                   语法：xhr.statusText
​                   说明：不同于status属性，该属性返回状态码所对应的状态信息。比如OK

          1.5 responseText
                     描述：返回从服务器接收到的字符串内容，该属性为只读。
​                                如果本次请求没有成功或者数据不完整，该属性就会等于null。
​                                如果服务器返回的数据格式是JSON，就可以使用responseText属性来进行数据解析。
​                     语法：xhr.responseText

          1.6 open()

                描述：表示要将请求发往某处，只是设置而不是真的发送。
​                语法：xhr.open(‘请求类型’，’url地址’，是否异步);
​                说明：
​                           第一个参数用来设置get/post请求
​                           第二个参数用来设置请求发送到的url地址
​                          第三个参数是布尔值用来设置是否异步发送，默认false表示同步。
​                补充：
​                            目前因为我们的页面都采用localhost方式在本地主机直接访问，
​                            因此url直接写出php文件的相对路径即可,会做路径拼接。
​                            而如果通过其他方式打开可能会引起js的跨域问题，就会报错。

        1.7 setRequestHeader()
                  描述：用于设置HTTP头信息。
                  语法：xhr.setRequestHeader(‘key’，’value’);
                  说明：
​                             本方法必须在open()之后、send()之前被调用
​                             本方法用来设置在请求发送时，一并被发送出的一些补充信息

       1.8 send()
                描述：用于实际发出HTTP请求。
​                语法：xhr.send(formData);
​                说明：send()方法的参数是表单数据，为post请求准备。 如果是get请求则参数直接写null即可。