原生JS发送Ajax

1.原生JS发送 GET 请求:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box"></div>

</body>
<script>

    // 原生js利用XMLHttpRequest对象
    // 发送get请求
    const xhr = new XMLHttpRequest
    xhr.onloadend = function () {
        // 接收请求后端返回的数据
        let result = xhr.responseText
        // console.log(result);
        // 由于大部分接口返回的数据都是JSON格式，所以需要转化
        const data = JSON.parse(result)
        console.log(data); // 可查看转化后的数据
        const box = document.querySelector(".box")
        // 将数据渲染到页面
        box.innerHTML = data.result.text
    }
    // 设置发送方式以及api，参数等，该接口仅作演示，这里参数为sid
    xhr.open("get", 'https://api.apiopen.top/getSingleJoke?sid=28654780')
    xhr.send(null)

</script>

</html>

2.原生JS发送 POST 请求:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box"></div>

</body>
<script>

    // 发送post请求
    const xhr = new XMLHttpRequest
    xhr.onloadend = function () {
        // 接收请求后端返回的数据
        let result = xhr.responseText
        // console.log(result);
        // 由于大部分接口返回的数据都是JSON格式，所以需要转化
        const data = JSON.parse(result)
        console.log(data); // 可查看转化后的数据
        const box = document.querySelector(".box")
        // 将数据渲染到页面
        box.innerHTML = data.result.text
    }
    // 设置发送方式以及api
    xhr.open("post", 'https://api.apiopen.top/getSingleJoke')
    // post方式要设置请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // 参数设置在send里面，参数+值
    xhr.send("sid=" + encodeURIComponent(28654780))

</script>

</html>

原生js发送请求会存在跨域问题，除非接口支持跨域，才能请求到数据，该接口支持跨域，可以正常使用

更多推荐

前端发送Ajax请求数据的几种常见方法(一) 原生JS发送