zoukankan html css js c++ java

Ajax函数封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function ajax(options) {
            // 创建Ajax对象
            var xhr = new XMLHttpRequest()
                // 告诉Ajax对象以什么方式向哪里发送请求
            var params = ''
            for (var attr in options.data) {
                params += attr + '=' + options.data[attr] + '&'
            }
            params = params.substr(0, params.length - 1)

            if (options.type == 'get') {
                options.url = options.url + '?' + params
            }

            xhr.open(options.type, options.url);
            // 发送请求
            if (options.type == 'post') {
                xhr.send(params)
            } else {
                xhr.send()
            }
            // 接收响应数据,监听获取数据后的onload事件
            xhr.onload = function() {
                console.log(xhr.responseText)
            }
        }


        ajax({
            type: 'get',
            url: 'http://localhost:3000/response',
            data: {
                name: 'zhangsan',
                age: 30
            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function ajax(options) {
            // 创建Ajax对象
            var xhr = new XMLHttpRequest()
                // 告诉Ajax对象以什么方式向哪里发送请求
            var params = ''
            for (var attr in options.data) {
                params += attr + '=' + options.data[attr] + '&'
            }
            params = params.substr(0, params.length - 1)

            if (options.type == 'get') {
                options.url = options.url + '?' + params
            }

            xhr.open(options.type, options.url);
            // 发送请求
            if (options.type == 'post') {
                xhr.send(params)
            } else {
                xhr.send()
            }
            // 接收响应数据,监听获取数据后的onload事件
            xhr.onload = function() {
                console.log(xhr.responseText)
            }
        }


        ajax({
            type: 'get',
            url: 'http://localhost:3000/response',
            data: {
                name: 'zhangsan',
                age: 30
            }
        })
    </script>
</body>

</html>

查看全文

相关阅读:
二分多重匹配（HDU5093）
2-sat（and,or,xor）poj3678
某个点到其他点的曼哈顿距离之和最小（HDU4311）
第k最短路A*启发式搜索
 求树的直径和中心（ZOJ3820）
并查集hdu4424
map容器结构体离散化
 二维坐标系极角排序的应用（POJ1696）
【进阶3-3期】深度广度解析 call 和 apply 原理、使用场景及实现（转）
判断js数据类型的四种方法，以及各自的优缺点（转）

原文地址：https://www.cnblogs.com/rainbowupdate/p/12769056.html