原生js封装Ajax的GET请求_js 封装 get请求返回状态-优快云博客

本文链接：https://blog.youkuaiyun.com/tongkongyu/article/details/117202628

这篇博客展示了如何使用JavaScript封装一个Ajax GET请求函数，并与PHP进行交互。通过示例代码，解释了参数编码、超时处理及响应状态的检查。在HTML中，当点击按钮时，会触发Ajax请求，传递用户名和密码到PHP页面，然后显示响应信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax封装代码部分：

function obj2str(obj){
    // 防止URL不变导致IE调用缓存
    obj.t = new Date().getTime();
    let res = [];
    for (let key in obj){
        // URL中不能有中文，需要转码，即调用encodeURLComponent()
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));
    }
    return res.join('&');
}
function ajax(url,obj,timeout,success,error){
    let str = obj2str(obj);
    let xhr,timer;
    if (XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
    else
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open("GET",url+"?"+str,true);
    xhr.send();
    xhr.onreadystatechange = function (){
        if (xhr.readyState === 4){
            clearInterval(timer);
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 340){
                success(xhr);
            } else{
                error(xhr);
            }
        }
    }
    // 判断外界是否传入超时时间
    if (timeout){
        timer = setInterval(function (){
            console.log("中断请求")
            xhr.abort();
            clearInterval(timer);
        },timeout)
    }
}

php处理部分：

<?php
//sleep(5);
echo "ajax get pages";
echo $_GET["userName"];
echo "<br>";
echo $_GET["userPwd"];

html中调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>click</button>
<script src="3.Ajax-Get-package.js"></script>
<script>
    window.onload = function (){
        let oBtn = document.querySelector("button");
        oBtn.onclick = function (){
            ajax(
                "3.Ajax-Get-package.php",{
                  "userName":"eyes++",
                  "userPwd":"123456"
                },
                3000,
                function (xhr){
                    alert(xhr.responseText);
                },
                function (xhr){
                    alert("请求失败！");
                });
        }
    }
</script>
</body>
</html>