2. 使用 XMLHttpRequest 发起 GET 请求（带参数）

代码示例：

// 创建一个XMLHttpRequest
let xhr = new XMLHttpRequest()
// 设置请求方式和地址和参数
xhr.open('GET', 'http://xxxxx?name=xxx&sex=xx')
// 发送请求
xhr.send()
// 监听load事件
xhr.addEventListener('load', function () {
    console.log(this.response);
3. 使用XMLHttpRequest发送post请求（有请求体）
由于post请求要带请求体，请求体有三种格式，为了方便服务器接收数据，当提交请求时，需要指定一个叫做Content-Type的请求头
请求体格式：
参数=值&参数=值
代码示例：
 const data = {
       name: 'xxx',
       age: xx,
// 创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest()
// 设置请求方式和请求地址
xhr.open('POST', 'http://XXXX')
// 创建一个URLSearchParams对象吧data数据转换成 参数=值&参数=值格式
const usp = new URLSearchParams(data)
const query = usp.toString()
// 设置对应的content-type
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
// 发送请求
xhr.send(query)
// 监听load 响应请求获取响应结果
xhr.addEventListener('load', function () {
    console.log(this.response)
以json格式传参
代码示例：
const data = {
    name: 'xxx',
    age: xx,
// 创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest()
// 设置请求方式和请求地址
xhr.open('POST', 'http://XXXX')
// 利用JSON.stringify()把数据转换成JSON格式的
 const str = JSON.stringify(data)
// 设置对应的content-type
xhr.setRequestHeader('Content-type', 'application/json')
// 发送请求
xhr.send(str)
// 监听load 响应请求获取响应结果
xhr.addEventListener('load', function () {
     console.log(this.response)
new ForData()格式
const data = {
            name: 'xxx',
            age: xx,
// 创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest()
// 设置请求方式和请求地址
xhr.open('POST', 'http://XXXX')
// 创建一个FormData对象，把数据变成FormData 格式
const formdata = new FormData(data)
// 设置对应的content-type (可以不设置)
xhr.setRequestHeader('Content-type', 'application/form-data')
// 发送请求
xhr.send(formdata)
// 监听load 响应请求获取响应结果
xhr.addEventListener('load', function () {
    console.log(this.response)
利用XMLHttpRequest来封装自己的ajax
function ajax ({ url, type, data = '', success }) {
            // 创建一个XMLHttpRequest对象
            const xhr = new XMLHttpRequest()
            // 判断type请求方式
            if (type === 'get') {
                // 判断data的数据类型转换成字符串
                if (typeof data === "object") {
                    data = (new URLSearchParams(data)).toString()
                // 设置请求方式和请求地址
                xhr.open(type, url + '?' + data)
                // 发送请求
                xhr.send()
            } else if (type === 'post') {
                // 设置请求方式和请求地址
                xhr.open(type, url)
                // 判断数据是不是字符串
                if (typeof data === "string") {
                    // 设置对应的content-type
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    xhr.send(data)
                } else if (typeof data === "object") {
                    if (data instanceof FormData) {
                        xhr.send(data)
                    } else {
                        xhr.setRequestHeader('Content-type', 'application/json')
                        const str = JSON.stringify(data);
                        console.log(typeof str)
                        xhr.send(str)
    // 监听load 获取响应结果
            xhr.addEventListener('load', function () {
                // 把json格式的数据转换成对象
                const obj = JSON.parse(this.response)
                // 就是返回结果
                success(obj)
复制代码
  
分类：
 前端
 
标签：
 
JavaScript
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装