首先我们先看一下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);

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐