AJAX的使用

阿宇爱学习
55 阅读1分钟

当使用get方式请求时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>catch</button>
<button>delete</button>
</body>
<script>
    // 获取所有的button按钮
    const btns = document.querySelectorAll("button");
    // 给第一个按钮get请求方式添加AJAX事件
    btns[0].addEventListener("click", () => {
        // 实例化XMLHttpRequest 
        const xhr = new XMLHttpRequest();
        // 配置请求方式和地址
        xhr.open("get", "http://ayu.com:3000/scoreList");
        xhr.send();
        xhr.onload = function () {
            console.log(xhr.response)
        }
    })
</script>
</html>

当使用post请求时

post方式 x-www-form-urlencoded

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>catch</button>
<button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button")
    // post方式 x-www-form-urlencoded
    btns[1].addEventListener("click", () => {
        const xhr = new XMLHttpRequest();
        xhr.open("post", "http://ayu.com:3000/scoreList");
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("username=ayu&age=21");
        xhr.onload = function () {
            console.log(xhr.response)
        }
    }）
</script>
</html>

post方式 application/json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>catch</button>
<button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
btns[1].addEventListener("click", () => {
    const xhr = new XMLHttpRequest();
    xhr.open("post", "http://ayu.com:3000/scoreList");
    xhr.setRequestHeader("Content-type","application/json");
    xhr.send(JSON.stringify({
        username: "张三",
        age: "23"
    }));
    xhr.onload = function () {
        console.log(xhr.response)
    }
})
</script>
</html>

当使用put请求时

post方式 application/x-www-form-urlencoded

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>catch</button>
<button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    btns[2].addEventListener("click", () => {
        const xhr = new XMLHttpRequest();
        xhr.open("put", "http://ayu.com:3000/scoreList/2");
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send("username=汪淼&age=25");
        xhr.onload = function () {
            console.log(xhr.response)
        }
    })
</script>
</html>

put方式 application/json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>catch</button>
<button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    btns[2].addEventListener("click", () => {
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("put", "http://ayu.com:3000/scoreList/1");
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.send(JSON.stringify({
            username: "高启强",
            age: "23"
        }));
        xhr.onload = function () {
            console.log(xhr.response)
        }
    })
</script>
</html>

当使用patch请求时

patch方式 x-www-form-urlencoded

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>patch</button>
<button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    btns[3].addEventListener("click", () => {
        const xhr = new XMLHttpRequest();
        xhr.open("PATCH", "http://ayu.com:3000/scoreList/1");
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("username=周杰伦&age=18");
        xhr.onload = () => {
            console.log(xhr.response)
        }
    })
</script>
</html>

patch方式 application/json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>patch</button>
<button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    btns[3].addEventListener("click", () => {
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("PATCH", "http://ayu.com:3000/scoreList/2");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify({
            username: "蔡健雅",
            age: 18
        }));
        xhr.onload = () => {
            console.log(xhr.response)
        }
    })
</script>
</html>

当使用delete请求时

delete方式 application/json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>patch</button>
<button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    btns[4].addEventListener("click", () => {
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("delete", "http://ayu.com:3000/scoreList/2");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send();
        xhr.onload = () => {
            console.log(xhr.response)
        }
    })
</script>
</html>

delete方式 x-www-form-urlencoded

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get</button>
<button>post</button>
<button>put</button>
<button>patch</button>
<button>delete</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    btns[4].addEventListener("click", () => {
        const xhr = new XMLHttpRequest();
        xhr.open("delete", "http://ayu.com:3000/scoreList/1");
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send();
        xhr.onload = () => {
            console.log(xhr.response)
        }
    })
</script>
</html>
avatar
文章
阅读
粉丝