Ajax(三)

XMLHttpRequest 概念

是浏览器内置的一个构造函数。

作用

基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。

其中，axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的。

我们可以直接基于 XMLHttpRequest 发起Ajax请求。

一、使用 XMLHttpRequest 发起请求

主要的 4 个实现步骤：
① 创建 xhr 对象
② 调用 xhr.open() 函数
③ 调用 xhr.send() 函数
④ 注册load 事件

例如：

// 原生ajax发送get请求
    // 1. 声明一个实例对象  
    const xhr = new XMLHttpRequest()
    // 2. 初始化一个请求以准备发送
    xhr.open('GET','http://www.liulongbin.top:3009/api/get')
    // 3. 发送请求
    xhr.send()
    // 4. 监听load事件，然后拿到请求的响应
    xhr.addEventListener('load',function () {
      console.log(xhr.response)
    })

发起 GET 请求时携带查询参数

在请求的 URL 地址后面通过 ? 的形式携带查询参数。

// 如果需要传递查询参数 则需要手动拼接   
    xhr.open('GET','接口/api/get**?username=Tt&age=17**')

发起 POST 请求，并携带请求体数据

当需要携带请求体数据时，需要进行额外的两步 *** 作：
① 在 xhr.open() 之后，调用 xhr.setRequestHeader() 函数，指定请求头的编码格式
② 在 xhr.send() 中，指定要提交的请求体数据

一、请求体数据为普通数据

//  使用xhr发起一个post请求
    // 1. 生成一个实例
    const xhr = new XMLHttpRequest()
    // 2. 初始化一个请求准备发送
    xhr.open('POST','接口/api/post')
    // 3. 设置请求编码方式
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    // 4. 发送请求  （请求体）
    xhr.send('username=Tt&age=17')
    // 5. 监听load事件，获取到请求响应
    xhr.addEventListener('load',function () {
      console.log(xhr.response)
    })

二、请求体数据为FormData格式的数据

	const fd = new FormData()
    const xhr = new XMLHttpRequest()
    xhr.open('POST','接口/api/post')
    // 注意：对于multipart/form-data编码格式的数据，不需要设置请求头的编码格式
    // xhr.setRequestHeader('Content-Type','multipart/form-data')
    xhr.send(fd)
    xhr.addEventListener('load' , function () {
      console.log(xhr.response)
    })

三、请求体数据为JSON数据格式

const jsonStr = '{"username":"Tt" , "age":18}'  // 属性值一定要用**双引号**包裹
    const xhr = new XMLHttpRequest()
    xhr.open('POST','接口/api/post')
    xhr.setRequestHeader('Content-Type','application/json')
    xhr.send(jsonStr)
    xhr.addEventListener('load' , function() {
      console.log(xhr.response)
    })

数据交换格式 概念：

数据交换格式，就是服务器端与客户端之间数据传输的格式。

主要有两种数据交换格式：

XMLJSON ⭐

JSON 概念

JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据。

const json = '{"username": "Tt" , "age": 17}'

JSON 数据

用字符串的方式来表示的对象或数组类型的数据，叫做 JSON 数据。

JSON数据格式有两种

对象格式数组格式 对象格式的JSON数据

最外层使用 {} 进行包裹，内部的数据为key:value键值对的结构。

key 必须使用英文的双引号进行包裹value的值只能是字符串(必须用双引号包裹)、数组、 布尔、 null、 数组、对象类型

// 1）  json字符串表示的对象转化为js对象
    const jsonStr = '{"username": "Tt" , "age": 17}'

数组格式的 JSON 数据

数组格式的 JSON 数据，最外层使用 [ ] 进行包裹，内部的每一项数据之间使用英文的 , 分隔。其中：
每一项的值类型只能是字符串、数字、布尔值、null、数组、对象这 6 种类型之一。

// 2)   json数组转化为js数组
    const jsonArr = '["小红","小明","大黑"]'

1. 把 JSON 数据转换为 JS 数据

调用浏览器内置的 JSON.parse() 函数，可以把 JSON 格式的字符串转换为 JS 数据

例如：

// 1）  json字符串表示的对象转化为js对象
    const jsonStr = '{"username": "Tt" , "age": 17}'
    const  res1 = JSON.parse(jsonStr)
    console.log(res1)
    // 2)   json数组转化为js数组
    const jsonArr = '["小红","小明","大黑"]'
    const res2 = JSON.parse(jsonArr)
    console.log(res2)

2. 把 JS 数据转换为 JSON 数据

调用浏览器内置的 JSON.stringify() 函数，可以把 JS 数据转换为 JSON 格式的字符串

例如:

// 1）  js对象转化为json字符串
        const obj = {
            name: 'Tt',
            age: 18
        }
        const res1 = JSON.stringify(obj)
        console.log(res1)
        // 2)   js数组转化为json数组
        const arr = ['小敏', '小花', '大明']
        const res2 = JSON.stringify(arr)
        console.log(res2)

序列化和反序列化

① 把真实数据转换为字符串的过程，叫做序列化
② 把字符串转换为真实数据的过程，叫做反序列化

JSON文件 概念：

以.json结尾的文件，里面存放一些配置信息 package.json

格式要求： 最外层要是 {} 或 []属性名必须要使用“”包裹，值的话如果是字符串，也必须要用“”包裹json文件中不允许写注释值的类型可以是：string number Boolean null array objectundefined ，函数 不能作为json文件的值 封装自己的axios

// 函数声明
function myAxios(options) {
    console.log('options',options)
    // 1. 声明一个xhr实例
    const xhr = new XMLHttpRequest()
    // 2. 准备一个请求以备发送  （参数：请求方式   请求地址）
    xhr.open(options.method,options.url)
    // 3. 发送一个请求
    xhr.send()
    // 4. 监听load事件，获取到请求的响应
    xhr.addEventListener('load',function() {
        console.log(xhr.response)
        options.success(xhr.response)
    })
}

//  函数调用
    myAxios({
        method: 'GET',
        url: '接口/api/get',
        success: function(result) {  // 相应的数据给到result
          console.log(result)
          // 拿到请求响应做处理
        }
      })