Ajax的封装。

最新推荐文章于 2023-09-20 10:27:08 发布

转载最新推荐文章于 2023-09-20 10:27:08 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nujufoul/p/7050382.html

本文介绍了一个封装的Ajax函数，用于简化Ajax请求的过程。该函数最初仅支持接收服务端数据，后来扩展为同时支持发送数据到服务端。文中还提供了具体的实现代码及如何在网页中调用该函数的示例。

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

封装 Ajax

因为Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用GET 还是POST；到

底是使用同步还是异步等等，我们需要封装一个Ajax 函数，来方便我们调用。

封装支持接收来自服务端的数据，不可以发送数据到服务端

/**

* 此封装只支持接收来自服务端的数据，不可以发送数据到服务端

 */

function ajax(obj) {

    var xhr = new XMLHttpRequest();

    obj.url = obj.url + '?rand=' + Math.random();

    xhr.open(obj.method, obj.url, obj.async);

    xhr.send(null);

    if (obj.async === false) {

        callback();

    }

    if (obj.async === true) {

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                callback();

            }

        };

    }

    function callback () {

        if (xhr.status == 200) {

            obj.success(xhr.responseText); //回调

        } else {

            alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);

        }

    }

}

把上面的代码封装在ajax2.js中，在页面上引入该文件。

<!DOCTYPE html>

<html>

<head>

    <title>Ajax的封装</title>

    <meta charset="utf-8">

    <script src="ajax2.js"></script>

</head>

<body>

<button id="btn">调用Ajax</button>

<script>

    document.getElementById("btn").onclick=function(){

        ajax({

            method : 'get',

            url : 'http://localhost:3000/api/2',

            success : function (text) {

                alert(text);

            },

            async :false

        });

    };

</script>

</body>

</html>

7.2  封装支持接收来自服务端的数据，又可以发送数据到服务端

function ajax(obj) {

    var xhr = new XMLHttpRequest();

    obj.url = obj.url + '?rand=' + Math.random();

    obj.data = params(obj.data);

    if (obj.method === 'get') {

        obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;

    }

 

    if (obj.async === true) {

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                callback();

            }

        };

    }

    xhr.open(obj.method, obj.url, obj.async);

    if (obj.method === 'post') {

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.send(obj.data);

    } else {

        xhr.send(null);

    }

    if (obj.async === false) {

        callback();

    }

    function callback () {

        if (xhr.status == 200) {

            obj.success(xhr.responseText); //回调

        } else {

            alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);

        }

    }

}

 

//名值对编码

function params(data) {

    var arr = [];

    for (var i in data) {

        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));

    }

    return arr.join('&');

}

　希望能够帮到你！

转载于:https://www.cnblogs.com/nujufoul/p/7050382.html