是浏览器内置的一个构造函数。
基于 new 出来的 XMLHttpRequest 实例对象,可以发起 Ajax 的请求。
其中,axios 中的 axios.get()、axios.post()、axios() 方法,都是基于 XMLHttpRequest(简称:XHR) 封装出来的。
我们可以直接基于 XMLHttpRequest 发起Ajax请求。
主要的 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)
})
在请求的 URL 地址后面通过 ?
的形式携带查询参数。
// 如果需要传递查询参数 则需要手动拼接
xhr.open('GET','接口/api/get**?username=Tt&age=17**')
当需要携带请求体数据时,需要进行额外的两步操作:
① 在 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)
})
数据交换格式,就是服务器端与客户端之间数据传输的格式。
主要有两种数据交换格式:
JSON(全称:JavaScript Object Notation)是一种数据交换格式,它本质上是用字符串的方式来表示对象或数组类型的数据。
const json = '{"username": "Tt" , "age": 17}'
用字符串的方式来表示的对象或数组类型的数据,叫做 JSON 数据。
JSON数据格式有两种
最外层使用 {} 进行包裹,内部的数据为key:value
键值对的结构。
// 1) json字符串表示的对象转化为js对象
const jsonStr = '{"username": "Tt" , "age": 17}'
数组格式的 JSON 数据,最外层使用 [ ] 进行包裹,内部的每一项数据之间使用英文的 , 分隔。其中: 每一项的值类型只能是字符串、数字、布尔值、null、数组、对象这 6 种类型之一。
// 2) json数组转化为js数组
const jsonArr = '["小红","小明","大黑"]'
调用浏览器内置的 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)
调用浏览器内置的 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结尾的文件,里面存放一些配置信息 package.json
// 函数声明
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)
// 拿到请求响应做处理
}
})