一、XMLHttpRequest的基本使用

1.1什么是XMLHttpRequest

XMLHttpRequest（简称xhr)是浏览器提供的Javascript对象，通过它可以请求==服务器上的数据资源。==之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来的。
在这里插入图片描述

1.2使用xhr发起GET请求

步骤：
（1）创建xhr对象
（2）调用xhr.open()对象
（3）调用xhr.send()对象
（4）监听xhr.onreadystatechange事件

<script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET','http://127.0.0.1:4523/mock2/813627/15864648')
    xhr.send()
    xhr.onreadystatechange = function (){
        if(xhr.readyState === 4 && xhr.status === 200){
            console.log(xhr.responseText)
        }
    }
</script>

1.3 了解xhr对象的readyState属性

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

在这里插入图片描述

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

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

xhr.open('GET','http://127.0.0.1:4523/mock2/813627/15864648?id=8677077509400698')

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

1.5查询字符串

1.什么是查询字符串
定义：查询字符串是指在URL的末尾加上用于服务器发送信息的字符串（变量）
格式：将英文的？放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用&符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中。
在这里插入图片描述
2 GET请求携带参数的本质
无论使用$.ajax()还是使用$.get()又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的。
在这里插入图片描述

1.6 URL编码与解码

1.什么是URL编码
URL地址中，只允许出现英文相关的字母，标点符号，数字，因此在地址中不允许出现中文字符。如果出现中文字符必须进行编码。
URL编码原则使用安全的字符，去表示不安全的字符
通俗就是用英文字符去表示非英文字符
在这里插入图片描述
2.如何对URL进行编码和解码❤️

浏览器提供了URL编码与解码的API，分别是
encodeURI()编码的函数
decodeURI()解码的函数
在这里插入图片描述

<script>
  var str = '我爱你'
  var str2 = encodeURI(str);
  console.log(str2)
  console.log('----------------')
  var str3 = decodeURI('%E6%88%91%E7%88%B1%E4%BD%A0')
  console.log(str3)
</script>

在这里插入图片描述
3.URL编码的注意事项
由于浏览器会自动URL地址进行编码操作，因此，大多数情况下
，程序员不需要关心URL地址的编码与解码操作。

1.7 使用xhr发起POST请求

（1）创建xhr对象
（2）调用chr.open()函数
（3）设置Content-Type属性（固定写法）
（4）调用xhr.send()函数，同时指定要发送的数据
（5）监听xhr.onreadystatechange事件
在这里插入图片描述

 //1.创建xhr对象
  var xhr = new XMLHttpRequest()
  // 2.调用 open 函数
  xhr.open('POST','http://127.0.0.1:4523/mock/813627/pet')
  // 3.设置属性
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
  // 4.调用send
  xhr.send('name = dog & status = sold')
  // 5.监听事件
  xhr.onreadystatechange = function (){
    if(xhr.readyState === 4 && xhr.status === 200 ){
      console.log(xhr.responseText)
    }
  }
</script>

二、数据交换格式

2.1什么是数据交换格式

数据交换格式就是服务器与客户端之间进行数据传输与交换的格式
前端经常用的两种数据交换格式是XML和JSON需要终点学习JSON
在这里插入图片描述

2.2 XML

1.什么是XML
XML的英文就是可扩展标记语言因此与HTML类似
也是一种标记语言
在这里插入图片描述
2.XML与HTML的区别
HTML被用来描述网页上的内容，是网页内容的载体
XML被设计用来传输和存储数据，是数据的载体

3.XML的缺点
（1）格式臃肿，和数据无关的代码较多
（2）JS解析麻烦

2.3JSON

1.什么是JSON
即JS对象表示法，就是JS对象和数组的字符串表示法它使用文本表示一个JS对象或数组的信息，因此，JSON的本质是字符串
作用：一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是比XML更好
2.JSON的两种结构
对象结构：对象结构在JSON中表示为{}括起来的内容，数据结构为{key:value,key:value,…}的键值对结构。其中，key必须是使用英文的双引号包裹的字符串，value的数据类型可是数字，字符串、布尔值、null，数组，对象

在这里插入图片描述
数组结构使用[]括起来的内容，数据结构为[“java”,true,30…]
数组中可以为数字，字符串，布尔值，null,对象

3.JSON使用注意事项

作用：在计算机与网络之间传输数据

4.JSON和JS对象的关系
JSON是JS对象的字符串表示法
在这里插入图片描述
5.JSON和JS对象的互转
要实现JSON字符串转换为JS对象，使用JSON.parse()方法：

<script>
  var jsonstr = '{"a": "hello","b":"world"}'
  var obj = JSON.parse(jsonstr)
  console.log(obj)
</script>

JS对象转换为JSON字符串，使用JSON.stringify()
在这里插入图片描述
6.序列化和反序列化
把数据对象转换为字符串叫做序列化，例如调用JSON.stringify()叫做JSON序列化
把字符串转换为数据对象叫做反序列化

三、封装自己的Ajax函数

3.1定义options参数选项

在这里插入图片描述

3.2 处理data参数

把data对象，转换成查询字符串的格式，从而提交给服务器
在这里插入图片描述