码农青葱
posts - 1,comments - 1,views - 28385
第03篇 AJAX原生请求方法

第一部分：NodeJS Express服务端

第二部分：AJAX原生客户端

1.1.Express服务端代码

// 导入模块
const express = require("express");
// 创建应用
const app = express();

// AJAX GET请求方式
app.get("/server", (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 发送响应体
    response.send("Hello, AJAX GET!");
});

// AJAX POST请求方式
app.post("/server", (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 发送响应体
    response.send("Hello, AJAX POST!");
});

// AJAX 全部请求方式（GET/POST/OPTIONS/DELETE/PATCH/HEAD）
app.all("/server", (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 设置响应头，允许自定义请求头信息，另外OPTIONS请求校验自定义请求头
    response.setHeader("Access-Control-Allow-Headers", "*");
    // 发送响应体
    response.send("Hello, AJAX ALL!");
});

// AJAX JSON格式数据响应
app.all("/json-server", (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 设置响应头，允许自定义请求头信息，另外OPTIONS请求校验自定义请求头
    response.setHeader("Access-Control-Allow-Headers", "*");
    const data = {username: "admin", password: "admin@123456"};
    let str = JSON.stringify(data);
    // 发送响应体
    response.send(str);
});

// AJAX IE浏览器缓存问题
app.get("/ie-cache", (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 发送响应体
    response.send("Hello, IE - 1!");
});

// AJAX请求超时和异常处理
app.get("/delay-server", (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 发送响应体
    setTimeout(() => {
        response.send("延时响应");
    }, 3000);
});

// AJAX取消请求
app.get("/abort-server", (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 发送响应体
    setTimeout(() => {
        response.send("取消请求");
    }, 3000);
});

// AJAX重复发送
app.get("/repeat-server", (request, response) => {
    // 设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 发送响应体
    setTimeout(() => {
        response.send("重复发送");
    }, 3000);
});


// 监听端口
app.listen(8000, () => {
    // 回调函数
    console.log("服务器已启动，8000端口监听中");
});

2.1.AJAX 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>AJAX GET 请求方式</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 3px blue;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取按钮元素
        const btn = document.getElementsByTagName("button")[0];
        // 定义访问地址
        const url =  "http://127.0.0.1:8000/server?a=100&b=200&c=300";
        // 点击按钮函数
        btn.onclick = function(){
            // 1.创建请求对象
            const xhr = new XMLHttpRequest();
            // 2.初始化，设置请求方法和访问地址
            xhr.open("GET", url);
            // 3.发送请求
            xhr.send();
            // 4.事件绑定，处理服务端返回的结果
            xhr.onreadystatechange = function(){
                // 0 1（open） 2（send） 3（服务端返回部分结果） 4（服务端返回全部结果）
                if(xhr.readyState === 4){
                    // 判断响应状态码：200（成功） 401 403 404（客户端错误） 500 502（服务器错误）
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.status); // 响应状态码
                        console.log(xhr.statusText); // 响应状态描述
                        console.log(xhr.getAllResponseHeaders()) // 所有响应头信息
                        console.log(xhr.responseText); // 响应体内容
                    }
                }
            }
        }
    </script>
</body>
</html>

2.2.AJAX 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>AJAX POST 请求</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 3px blue;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 获取元素对象
        const result = document.getElementById("result");
        // 定义访问地址
        const url = "http://127.0.0.1:8000/server";
        // 绑定监听事件
        result.addEventListener("mouseover", function(){
            // 创建请求对象
            const xhr = new XMLHttpRequest();
            // 初始化，设置请求方法和访问地址
            xhr.open("POST", url);
            // 发送请求，可设置请求体
            xhr.send("a=100&&b=200");
            // xhr.send();
            // 绑定事件
            xhr.onreadystatechange = function(){
                // 判断服务端返回全部结果
                if(xhr.readyState === 4){
                    // 判断服务端返回成功响应吗
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.responseText;
                    }
                }
            }
        })
    </script>
</body>
</html>

2.3.AJAX 自定义请求头

<!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>AJAX 自定义请求头</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 3px blue;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 获取元素对象
        const result = document.getElementById("result");
        // 定义访问地址
        const url = "http://127.0.0.1:8000/server";
        // 绑定监听事件
        result.addEventListener("mouseover", function(){
            // 创建请求对象
            const xhr = new XMLHttpRequest();
            // 初始化，设置请求方法和访问地址
            xhr.open("POST", url);
            // 设置请求头信息，预定义或自定义
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.setRequestHeader("name", "admin");
            // 发送请求，可设置请求体
            xhr.send("a=100&&b=200");
            // xhr.send();
            // 绑定事件
            xhr.onreadystatechange = function(){
                // 判断服务端返回全部结果
                if(xhr.readyState === 4){
                    // 判断服务端返回成功响应吗
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.responseText;
                    }
                }
            }
        })
    </script>
</body>
</html>

2.4.AJAX JSON格式数据

<!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>AJAX JSON格式数据</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 3px blue;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 获取元素对象
        const result = document.getElementById("result");
        // 定义访问地址
        const url = "http://127.0.0.1:8000/json-server";
        // 绑定按键事件
        window.onkeydown = function(){
            // 创建请求对象
            const xhr = new XMLHttpRequest();
            // 设置响应数据类型
            xhr.responseType = "json";
            // 设置请求方式和访问地址
            xhr.open("GET", url);
            // 发送请求
            xhr.send();
            // 绑定事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 响应状态打印
                        // console.log(xhr.status);
                        // 响应内容赋值
                        // result.innerHTML = xhr.responseText;
                        
                        // 方式一：响应对象，JSON反序列化
                        // 解析JSON数据
                        // let data = JSON.parse(xhr.response);
                        // 响应内容赋值
                        // result.innerHTML = data.name;
                        
                        // 方式二：响应对象，设置数据类型
                        // 响应JSON打印
                        console.log(xhr.response);
                        // 响应内容赋值
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

2.5.AJAX IE缓存问题

<!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>AJAX IE缓存问题</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 3px pink;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName("button")[0];
        const result = document.querySelector("#result");
        const url = "http://127.0.0.1:8000/ie-cache";
        btn.addEventListener("click", function(){
            const xhr = new XMLHttpRequest();
            // IE缓存问题，路由添加时间戳Date.now()
            xhr.open("GET", url + "?t=" + Date.now());
            xhr.send();
            xhr.onreadystatechange = function(){
                console.log(url);
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.responseText);
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

2.6.AJAX 超时和异常处理

<!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>AJAX 超时和异常处理</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 3px pink;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName("button")[0];
        const result = document.querySelector("#result");
        const url = "http://127.0.0.1:8000/delay-server";
        btn.addEventListener("click", function(){
            const xhr = new XMLHttpRequest();
            // 超时设置为2秒
            xhr.timeout = 2000;
            // 超时回调函数
            xhr.ontimeout = function(){
                alert("网络异常，请稍后重试");
            };
            // 网络异常回调
            xhr.onerror = function(){
                alert("您的网络似乎出了点问题");
            };
            xhr.open("GET", url);
            xhr.send();
            xhr.onreadystatechange = function(){
                console.log(url);
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.responseText);
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

2.7.AJAX 取消请求

<!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>AJAX 取消请求</title>
</head>
<body>
    <button>发送请求</button>
    <button>取消请求</button>
    <script>
        const btns = document.querySelectorAll("button");
        let xhr = null;
        btns[0].onclick = function(){
            xhr = new XMLHttpRequest();
            xhr.open("GET", "http://127.0.0.1:8000/abort-server");
            xhr.send();
        };
        btns[1].onclick = function(){
            xhr.abort();
        }
    </script>
</body>
</html>

2.8.AJAX 重复请求

<!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>AJAX 重复请求</title>
</head>
<body>
    <button>发送请求</button>
    <script>
        const btns = document.querySelectorAll("button");
        // 添加是否正在发送标识
        let isSending = false;
        let xhr = null;
        btns[0].onclick = function(){
            // 如果正在发送，取消已发送请求
            if(isSending) xhr.abort();
            xhr = new XMLHttpRequest();
            // 判断正在发送，重置标识符
            isSending = true;
            xhr.open("GET", "http://127.0.0.1:8000/repeat-server");
            xhr.send();
            if(xhr.readyState === 4){
                // 判断已发送完毕，重置标识符
                isSending = false
            }
        };
    </script>
</body>
</html>
posted on   码农青葱  阅读(72)  评论(0)    收藏  举报
< 2025年6月 >
日 一 二 三 四 五 六
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 1 2 3 4 5
6 7 8 9 10 11 12

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3 Powered By博客园
点击右上角即可分享
微信分享提示