XMLHttpRequest的基本使用

1.1、什么是XMLHttpRequest

XMLHttpRequest(简称 xhr)是浏览器提供的Javascript对象，通过它，可以请求服务器上的数据资源。之前所学的jQuery 中的Ajax函数，就是基于 xhr 对象封装出来的

                                          

 

 1.2、使用xhr发起GET请求

  // 1.创建 XHR对象
  var xhr = new XMLHttpRequest()
  // 2．调用open函数，指定请求方式与URL地址
  xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
  // 3.使用send 函数，发起Ajax请求
  xhr.send()
  // 4．监听onreadystatechange事件
  xhr.onreadystatechange = function () {
     // 4.1 监听xhr 对象的请求状态readystate; 与服务器响应的状态status
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 获取服务器响应速度
      console.log(xhr.responseText);
    }
  }

 1.3、了解 xhr 对象的 readyState属性

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

1.4、使用 xhr 发起带参数的 GET 请求

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

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

这种在URL地址后面拼接的 ? 等于的参数，叫做查询字符串

1.5、查询字符串

1.5.1 什么是查询字符串

定义:查询字符串(URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串(变量)

格式:将英文的 ? 放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中

//不带参数的URL地址
http://www.liulongbintop:3006/api/getbooks
//带一个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1
//带多个参数
http://www.liulongbin.top:3006/api/getbooks?id=1&booknane=西游记

 1.5.2 GET请求携带参数本质

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

$.get( "url", (name: 'zs' , age: 201, function () { 〕)//等价于
$.get( "ur1?name=za&age=20",function () { })
$.ajax({ method:'GET',url: 'url'，data:{name: 'zs '，age: 20}, success: function () { } )/等价于
$.ajax(i method: 'GET，url:'url?name=zs&age=20'，success: function(){ })

1.6、URL编码与解码

1.6.1、 什么是URL编码

URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符

如果URL中需要包含中文这样的字符，则必须对中文字符进行编码(转义)

URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符

URL编码原则的通俗理解:使用英文字符去表示非英文字符

http://www.liulongbin.top:3006/api/getbooks?id=l&bookname=西游记
//经过UR编码之后，URL地址变成了如下格式:
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%B8 %E6%B8%B8 %E8%AE%B0

1.6.2、如何对URL进行编码与解码

浏览器提供了URL编码与解码的API，分别是:

encodeURI( ) 编码的函数

decodeURI( ) 解码的函数

 // 编码
  var str = '小猪佩奇'
  var str2 = encodeURI(str)
  console.log(str2);

  // 解码
  var str3 = '%E5%B0%8F%E5%B0%8F'
  var str4 = decodeURI(str3)
  console.log(str4);

1.7、使用xhr发起POST请求

<script>
  // 1.创建 xhr 对象
  var xhr = new XMLHttpRequest()
  // 2.调用 open 函数
  xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
  // 3.设置 content - type属性
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  // 4.调用函数
  xhr.send('bookname=水浒传&author=施耐庵&publisher=上海出版社')
  // 5.监听
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
</script>