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)
})数据交换格式
概念：
数据交换格式，就是服务器端与客户端之间数据传输的格式。
主要有两种数据交换格式：
- XML
- JSON ⭐
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 object
- undefined ，函数 不能作为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)
// 拿到请求响应做处理
}
})
腾讯云开发者
