xhr的基本使用

首先我们先看一下xhr的基本使用吧

（1）xhr是XMLHttpRqquest的简写

（2）我们主要来认识一下xhr的get请求和post请求

（3）xhr中的get请求方式

     // 先创建咱们的XMLHttpRequest
    let xhr=new XMLHttpRequest()

    // 在利用open方法将咱们的API接口引用过来
    xhr.open('GET','http://maowei.api.tp6:8000/user?page=1&page_size=3')

    // 在利用send发起AJax请求
    xhr.send()

    // 在利用onreadystatechange函数来进行监听
    xhr.onreadystatechange=function(){
      // 在监听xhr的请求状态 readyState为4代表请求成功，status为200代表响应成功
      if (xhr.readyState===4 || xhr.status===200) {
        // 打印数据
        console.log(xhr.responseText);
      }
    }

（4）xhr中的get请求方式

post较为特殊一点

步骤：

（1）创建xhr对象

（2）调用xhr.open()函数

（3）设置Content-Type属性

（4）调用xhr.send()函数

（5）监听xhr.onreadStatechange()事件

    let xhr=new XMLHttpRequest()

    xhr.open('POST','http://maowei.api.tp6:8000/user')
    
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

    xhr.send('id=2')

    xhr.onreadystatechange=function(){
      if (xhr.readyState===4 || xhr.status===200) {
        console.log(xhr.responseText);
      }
    }

（5）readyState代表的意思

（6）xhr中的url编码和url解码

（1）encodeURL()编码


（2）decodeURL()解码

    let name = '拉布拉多'
    let namejie = encodeURI(name)
    console.log(namejie);


--------------------------------------------------------


    let name = '%E6%8B%89%E5%B8%83%E6%8B%89%E5%A4%9A'
    let namejie = decodeURI(name)
    console.log(namejie);