原生Ajax

目录

XMLHttpRequest

Ajax_原生query传参

Ajax_原生POST

Ajax是一个技术的名称, 而以前我们具体使用的是axios.js插件来发送请求 ，但是其实axios.js也是一个库, 内部是原生JS代码, 实际它是对原生的代码进行了封装。

Ajax如果用原生JS实现, 需要使用window提供的一个构造函数, 叫XMLHttpRequest

XMLHttpRequest

使用格式

<script>
// 1. 创建一个xhr对象
let xhr = new XMLHttpRequest()

// 2. 设置请求方式和请求地址
xhr.open(请求方式, 请求地址)

// 3. 发送请求
xhr.send()

// 4. 监听load（请求成功）事件 ==> 可以获取响应数据
xhr.addEventListener('load', function() {
   console.log(xhr.response)  // 服务器返回的数据
})
</script>

代码运行流程

主要的4个步骤

1.创建一个xhr对象

2.调用xhr.open()函数配置

3.调用xhr.send()函数发出请求

4.监听load事件等待结果

Ajax_原生query传参

原生Ajax传递查询参数 ,在url?后面拼接查询参数

<script>

let xhr = new XMLHttpRequest()

// 复习: 之前说过query查询参数要携带在url?后面
// 格式: 参数名=值&参数名=值
xhr.open(请求方式, 请求地址?传递的参数)


xhr.send()


xhr.addEventListener('load', function() {
   let result = JSON.parse(xhr.response)
    console.log(result); 
})
</script>

Ajax_原生POST

let xhr = new XMLHttpRequest()

xhr.open('post', '请求地址')

//需要携带请求头Content-Type和固定值指定传递的请求体内容类型, 让后端用对应方式解析
// 要注意: 在open后send前之间设置

xhr.setRequestHeader('content-type', 'application/json')

// 请求体要在这里携带
// 请求体支持三种内容类型, 用哪个还是要和后端对上

const d = { bookname: '你是谁', author: '你猜', publisher: '哈哈哈' }
xhr.send(JSON.stringify(d))

xhr.addEventListener('load', function () {
  console.log(xhr.response)  // 服务器返回的数据
})

请求体的三种类型:

 1.application/json

2.multipart/form-data

3.application/x-www.....