Javascript：Ajax案例实操

最新推荐文章于 2025-06-15 20:27:19 发布

KaiSarH

最新推荐文章于 2025-06-15 20:27:19 发布

阅读量856

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.csdn.net/KaiSarH/article/details/104357313

JS 专栏收录该内容

118 篇文章

订阅专栏

本文深入讲解了AJAX请求的基本原理，包括GET和POST请求的区别，如何使用XMLHttpRequest对象进行网络请求，以及如何处理服务器响应。此外，还介绍了如何封装AJAX请求，优化请求过程，如设置请求超时和URI编码，以及GET和POST请求的完整示例。

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

知识点

在服务器端
① get请求时，用req.query接受传输过来的数据
② post请求时，用req.body接受传输过来的数据
xhr.readyState === 4传输结束
xhr.status = 200 传输成功
xhr.responseText 接受服务器传回的数据

Demo1

服务器

router.get('/api/one', function (req, res, next) {
        res.end('hello, itLike!');
});

客户端

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    window.onload = function () {
      var btn = document.getElementById('send');
      btn.onclick = function () {
        // 使用ajax技术, 发送一个网络请求
        // 1. 创建一个请求对象 (找到一个电话)
        var xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        }else {
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        // 2. 设置请求的目标url (输入电话号码)
        // 参数1: 请求方式
        // 参数2: 请求的url
        // 参数3: 是否是异步
        xhr.open('get', 'http://localhost:3000/api/one', true);

        // 3. 发送请求 (拨出电话)
        xhr.send();

        // 4. 监听服务器响应 (等待电话接通)
        xhr.onreadystatechange = function () {
          // 一旦服务器响应回来之后, 就会执行这个函数;
          // 5. 处理响应数据(对方说话)
          //  console.log(xhr.readyState);
          if (xhr.readyState === 4) {
            // 意味着服务器,已经给了响应
            // 不代表, 服务器响应正确
            console.log(xhr.status);
            // 判断, 服务器给的数据是否正常
            var status = xhr.status;
            if (status === 200) {
              console.log(xhr.response);
            }
          }
        }
      }
    }
  </script>
</head>
<body>
<button id="send">发送一个请求</button>
</body>
</html>

Demo2

服务器

router.get('/api/two', function (req, res, next) {
   console.log(req.query);
   res.end('ccc');
});

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById('send');
            btn.onclick = function () {
                // 使用ajaxj技术, 发送一个网络请求
                // 1. 创建一个请求对象 (找到一个电话)
                var xhr;
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }

                // 拿到本地需要传送的数据
                var account = document.getElementById('account').value;
                var pwd = document.getElementById('pwd').value;

                // 注意: 浏览器缓存
                // IE
                // 认定, 如果你发送的是get请求, 而且, 连续发送多次,都是同一个url地址(包含了参数拼接), IE, 会直接, 使用本地缓存, 给你返回, 不会再次发送一个新的请求
                // 解决方案: 保证, 每次发送的请求url地址都不一样
                // 额外的再加一个参数, 而且, 这个参数的值, 每次都不一样


                // 2. 设置请求的目标url (输入电话号码)
                // 参数1: 请求方式
                // 参数2: 请求的url
                // 参数3: 是否是异步
                xhr.open('get', 'http://localhost:3000/api/two?account=' + account + '&pwd=' + pwd + '&random=' + getRandomStr(), true);

                // 3. 发送请求 (拨出电话)
                xhr.send();

                // 4. 监听服务器响应 (等待电话接通)
                xhr.onreadystatechange = function () {
                    // 一旦服务器响应回来之后, 就会执行这个函数;
                    // 5. 处理响应数据(对方说话)
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(xhr.responseText);
                    }
                }
            }
        }

        function getRandomStr() {
            return Math.random() + (new Date()).getTime();
        }
    </script>
</head>
<body>
    <input id="account" type="text" name="account">
    <input id="pwd" type="text" name="pwd">
    <button id="send">发送一个请求</button>
</body>
</html>

Demo3：封装get请求

(function () {
    function AjaxTool() {}
    AjaxTool.ajaxRequest = function(url, paramObj, successCallback, failedCallback){
        // get请求
        var xhr = new XMLHttpRequest();
        xhr.open('get',url+'?'+getStrWithObject(paramObj),true);
        xhr.send();
        xhr.addEventListener('readystatechange',function (ev) {
            if (xhr.readyState === 4){
                if (xhr.status === 200){
                    // 请求成功
                    successCallback && successCallback(xhr);
                }else{
                    // 请求失败
                    failedCallback && failedCallback(xhr);
                }
            }
        })
    };

    /**
     * 把对象转换为拼接字符串
     * @param {Object}paramObj
     */
    function getStrWithObject(paramObj){
        var resArr = [];
        // 1. 转化对象
        for (var key in paramObj){
            var str = key + '=' + paramObj[key];
            resArr.push(str);
        }
        // 2. 拼接时间戳
        resArr.push('random='+getRandomStr());
        // 3. 数组转成字符串
        return resArr.join('&');
    }

    /**
     * 生成随机时间戳
     * @returns {number}
     */
    function getRandomStr(){
        return Math.random() + (new Date().getTime());
    }
    window.AjaxTool = AjaxTool;
})(window);

Demo4：优化。URI编码和设置请求时长

设置定时器，如果到达一定时间，就取消当前响应。

abort()
取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

(function () {
    function AjaxTool() {}
    AjaxTool.ajaxRequest = function(url, paramObj,timeOut,successCallback, failedCallback){
        // get请求
        var xhr = new XMLHttpRequest();
        xhr.open('get',url+'?'+getStrWithObject(paramObj),true);
        xhr.send();
        xhr.addEventListener('readystatechange',function (ev) {
            if (xhr.readyState === 4){
                if (xhr.status === 200){
                    // 请求成功
                    successCallback && successCallback(xhr);
                    // 清除定时器
                    clearTimeout(timer);
                }else{
                    // 请求失败
                    failedCallback && failedCallback(xhr);
                }
            }
            // 0代表不限制请求时长
            var timer =null;
            if (timeOut > 0){
                timer = setTimeout(function () {
                    // 取消请求
                    xhr.abort();
                },timeOut);
            }
        })
    };

    /**
     * 把对象转换为拼接字符串
     * @param {Object}paramObj
     */
    function getStrWithObject(paramObj){
        var resArr = [];
        // 1. 转化对象
        for (var key in paramObj){
            var str = key + '=' + paramObj[key];
            resArr.push(str);
        }
        // 2. 拼接时间戳
        resArr.push('random='+getRandomStr());
        // 3. 数组转成字符串
        return resArr.join('&');
    }

    /**
     * 生成随机时间戳
     * @returns {number}
     */
    function getRandomStr(){
        return Math.random() + (new Date().getTime());
    }
    window.AjaxTool = AjaxTool;
})(window);

Demo5：简单Post

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<label for="">
    <input type="text" id="account" name="account">
</label>
<label for="">
    <input type="text" id="pwd" name="pwd">
</label>
<button id="send">发起post请求</button>
<script src="/js/AjaxTool.js"></script>

<script>
    window.addEventListener('load',function (ev) {
        var btn = document.getElementById('send');
        btn.addEventListener('click',function (ev1) {
            // 1. 获取用户输入内容
            var account = document.getElementById('account').value;
            var pwd = document.getElementById('pwd').value;

            // 2. 创建网络请求对象
            var xhr = new XMLHttpRequest();
            xhr.open('post','http://localhost:3000/api/five',true);

            // 3.设置请求头
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

            xhr.send('name=zs&age=19');
            xhr.addEventListener('readystatechange',function (ev2) {
                if (xhr.readyState === 4){
                    if (xhr.status === 200){
                        console.log(xhr.responseText);
                    }else {
                        console.log('请求失败')
                    }
                }
            })
        })
        //console.log(getRandomStr());
    });

    function getRandomStr(){
        return Math.random() + (new Date().getTime());
    }
</script>
</body>
</html>

Demo6：封装GET和POST

(function () {
    function AjaxTool() {}
    AjaxTool.ajaxRequest = function(params,successCallback, failedCallback){
        // 1. 获取参数
        var requestType = params['requestType'] || 'get';    //请求方式
        var url = params['url'];    // 请求路径
        var paramObj = params['paramObj'];  // 传递参数
        var timeOut = params['timeOut'] || 0;    // 请求时长
        // 2. 发送请求
        var xhr = new XMLHttpRequest();
        // 判断
        if(requestType.toLowerCase()=== 'get'){
            // get 请求
            // 使用encodeURI 函数可把字符串作为 URI 进行编码。增加健壮性
            var codeUrl = encodeURI(url+'?'+getStrWithObject(paramObj));
            xhr.open('get',codeUrl,true);
            xhr.send();
        }else if(requestType.toLowerCase()=== 'post'){
            // post 请求
            var codeParam = encodeURI(getStrWithObject(paramObj));
            xhr.open('post',url,true);
            // 设置请求头
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xhr.send(codeParam);
        }
        xhr.addEventListener('readystatechange',function (ev) {
            if (xhr.readyState === 4){
                if (xhr.status === 200){
                    // 请求成功
                    successCallback && successCallback(xhr);
                    // 清除定时器
                    clearTimeout(timer);
                }else{
                    // 请求失败
                    failedCallback && failedCallback(xhr);
                }
            }
            // 0代表不限制请求时长
            var timer =null;
            if (timeOut > 0){
                timer = setTimeout(function () {
                    // 取消请求
                    xhr.abort();
                },timeOut);
            }
        })
    };

    /**
     * 把对象转换为拼接字符串
     * @param {Object}paramObj
     */
    function getStrWithObject(paramObj){
        var resArr = [];
        // 1. 转化对象
        for (var key in paramObj){
            var str = key + '=' + paramObj[key];
            resArr.push(str);
        }
        // 2. 拼接时间戳
        resArr.push('random='+getRandomStr());
        // 3. 数组转成字符串
        return resArr.join('&');
    }

    /**
     * 生成随机时间戳
     * @returns {number}
     */
    function getRandomStr(){
        return Math.random() + (new Date().getTime());
    }
    window.AjaxTool = AjaxTool;
})(window);