Ajax函数的封装

最新推荐文章于 2022-04-17 22:43:25 发布
最新推荐文章于 2022-04-17 22:43:25 发布
阅读量206 收藏
点赞数
文章标签： ajax java python javascript js
本文链接：https://blog.csdn.net/Lv__Hang/article/details/119558058
版权

Ajax函数的封装

看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>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            // 1 创建Ajax对象
            let xhr = new XMLHttpRequest();
            // 告诉Ajax请求地址及其方式
            xhr.open('GET', 'https://v1.alapi.cn/api/music/search?keyword=东京塔子');
            // 3 发送请求 post请求要把请求参数放在请求体里面偶!
            xhr.send();
            // 获取服务器端响应给客户端的数据、
            xhr.onload = function() {
                console.log(xhr.responseText)
            }
        }
    </script>
</body>

</html>

你看，我们才写一个请求就有那么多的代码了！要是有十几二十几个请求，那不是会把人写疯掉？！就像回调地狱的问题一样！

目录

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>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            function ajax(options) {
                // 1 创建Ajax对象
                let xhr = new XMLHttpRequest();
                // 告诉Ajax请求地址及其方式
                xhr.open(options.type, options.url);
                // 3 发送请求 post请求要把请求参数放在请求体里面偶!
                xhr.send();
                // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！]
                xhr.onload = function() {
                    console.log(xhr.responseText);
                    options.success(xhr.responseText);
                }
            }
            ajax({
                type: 'get',
                url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
                success: function(data) {
                    console.log("这是封装的响应结果" + data)
                }
            })
        }
    </script>
</body>

</html>

最终效果：

第二版封装【对Ajax封装进一步的扩展】

我想在发送请求的时候向服务器传递一些参数，怎么实现？!现在只考虑get请求的情况！

请求参数要考虑的问题
      1.请求参数位置的问题
            将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置
                  get放在请求地址的后面
                  post放在send方法中
      2.请求参数格式的问题
            application/ X-WWw - form-urlencoded
                  参数名称=参数值&参数名称=参数值
                  name=lvhang&age=23
            application/json
                  { name :'zhangsan'，age: 20}

      1.传递对象数据类型对于函数的调用者更加友好
      2.在函数内部对象数据类型转换为字符串数据类型更加方便

get请求：
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>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            function ajax(options) {
                // 1 创建Ajax对象
                let xhr = new XMLHttpRequest();
                // 拼接请求参数变量
                let params = '';
                for (let attr in options.data) {
                    params += attr + '=' + options.data[attr] + '&';
                }

                // 对字符串进行截取
                // 将参数最后面的 & 截取掉
                // 将截取的结果重新赋值给params变量
                params = params.substr(0, params.length - 1);
                // console.log(params)


                /**
                 * {
                 *      name: 'lvhang',
                 *      age: 23
                 * }
                 */
                // 判断请求方式
                if (options.type == 'get') {
                    options.url = options.url + '?' + params;
                }

                // 告诉Ajax请求地址及其方式
                xhr.open(options.type, options.url);

                // 如果请求方式为post
                if (options.type == 'post') {
                    // 设置请求参数格式的类型
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    xhr.send(params);
                } else {
                    // 3 发送请求 post请求要把请求参数放在请求体里面偶!
                    xhr.send();
                }


                // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！]
                xhr.onload = function() {
                    console.log(xhr.responseText);
                    options.success(xhr.responseText);
                }
            }
            ajax({
                type: 'get',
                data: {
                    name: 'lvhang',
                    age: 23
                },
                url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
                success: function(data) {
                    console.log("这是封装的响应结果" + data)
                }
            })
        }
    </script>
</body>

</html>

post请求
html文件改动点：

最终效果：

第三版封装

【其实代码还是有问题的，就是设置参数的请求格式我们是把它写成了固定的，那如果客户端的人想要传递json数据格式该怎么办呢？! 这个应该由调用函数的人传递进来，然后我们在函数内部进行处理】

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>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            function ajax(options) {
                // 1 创建Ajax对象
                let xhr = new XMLHttpRequest();
                // 拼接请求参数变量
                let params = '';
                for (let attr in options.data) {
                    params += attr + '=' + options.data[attr] + '&';
                }

                // 对字符串进行截取
                // 将参数最后面的 & 截取掉
                // 将截取的结果重新赋值给params变量
                params = params.substr(0, params.length - 1);
                // console.log(params)


                /**
                 * {
                 *      name: 'lvhang',
                 *      age: 23
                 * }
                 */
                // 判断请求方式
                if (options.type == 'get') {
                    options.url = options.url + '?' + params;
                }

                // 告诉Ajax请求地址及其方式
                xhr.open(options.type, options.url);

                // 如果请求方式为post
                if (options.type == 'post') {
                    // 用户希望的向服务器端传递的请求参数的类型
                    let contentType = options.header['Content-Type'];
                    // 设置请求参数格式的类型
                    xhr.setRequestHeader('Content-Type', contentType);
                    // 判断用户希望的请求参数格式的类型
                    // 如果类型为json
                    if (contentType == 'application/json') {
                        // 向服务器端传递json数据格式的参数
                        xhr.send(JSON.stringify(options.data));
                    } else {
                        // 向服务器端传递普通类型的请求参数
                        xhr.send(params);
                    }

                    xhr.send(params);
                } else {
                    // 3 发送请求 post请求要把请求参数放在请求体里面偶!
                    xhr.send();
                }


                // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！]
                xhr.onload = function() {
                    console.log(xhr.responseText);
                    options.success(xhr.responseText);
                }
            }
            ajax({
                type: 'post',
                data: {
                    name: 'lvhang',
                    age: 23
                },
                header: {
                    'Content-Type': 'application/json'
                },
                url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
                success: function(data) {
                    console.log("这是封装的响应结果" + data)
                }
            })
        }
    </script>
</body>

</html>

最终效果：

第四版封装

【请求成功之后的代码：请求成功之后返回的状态码有可能是非200的状态码呢!所以要判断成功还有失败的情况！】

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>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            function ajax(options) {
                // 1 创建Ajax对象
                let xhr = new XMLHttpRequest();
                // 拼接请求参数变量
                let params = '';
                for (let attr in options.data) {
                    params += attr + '=' + options.data[attr] + '&';
                }

                // 对字符串进行截取
                // 将参数最后面的 & 截取掉
                // 将截取的结果重新赋值给params变量
                params = params.substr(0, params.length - 1);
                // console.log(params)


                /**
                 * {
                 *      name: 'lvhang',
                 *      age: 23
                 * }
                 */
                // 判断请求方式
                if (options.type == 'get') {
                    options.url = options.url + '?' + params;
                }

                // 告诉Ajax请求地址及其方式
                xhr.open(options.type, options.url);

                // 如果请求方式为post
                if (options.type == 'post') {
                    // 用户希望的向服务器端传递的请求参数的类型
                    let contentType = options.header['Content-Type'];
                    // 设置请求参数格式的类型
                    xhr.setRequestHeader('Content-Type', contentType);
                    // 判断用户希望的请求参数格式的类型
                    // 如果类型为json
                    if (contentType == 'application/json') {
                        // 向服务器端传递json数据格式的参数
                        xhr.send(JSON.stringify(options.data));
                    } else {
                        // 向服务器端传递普通类型的请求参数
                        xhr.send(params);
                    }
                } else {
                    // 3 发送请求 post请求要把请求参数放在请求体里面偶!
                    xhr.send();
                }


                // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！]
                xhr.onload = function() {
                    if (xhr.status == 200) {
                        // 请求成功调用处理成功情况的函数

                        options.success(xhr.responseText);
                    } else {
                        // 请求失败调用处理失败情况的函数

                        options.error(xhr.responseText, xhr);
                    }
                }
            }
            ajax({
                type: 'post',
                data: {
                    name: 'lvhang',
                    age: 23
                },
                header: {
                    'Content-Type': 'application/json'
                },
                url: 'https://v1.alapi.cn/api/mus2ic/search?keyword=东京塔子',
                success: function(data) {
                    console.log("这是封装的响应结果" + data)
                },
                error: function(data, xhr) {
                    console.log('恭喜您收到了一个非200的状态码' + data);
                    console.log(xhr);
                }
            })
        }
    </script>
</body>

</html>

第五版封装

【接下来我们把注意力放在服务端返回的结果上！，我们客户端需要的信息是对象，但是服务器返回的是json字符串，你可能会说用JSON.parse()啊！对，你说的没错！但是你怎么知道返回的就是json字符串呢？!】

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>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            function ajax(options) {
                // 1 创建Ajax对象
                let xhr = new XMLHttpRequest();
                // 拼接请求参数变量
                let params = '';
                for (let attr in options.data) {
                    params += attr + '=' + options.data[attr] + '&';
                }

                // 对字符串进行截取
                // 将参数最后面的 & 截取掉
                // 将截取的结果重新赋值给params变量
                params = params.substr(0, params.length - 1);
                // console.log(params)


                /**
                 * {
                 *      name: 'lvhang',
                 *      age: 23
                 * }
                 */
                // 判断请求方式
                if (options.type == 'get') {
                    options.url = options.url + '?' + params;
                }

                // 告诉Ajax请求地址及其方式
                xhr.open(options.type, options.url);

                // 如果请求方式为post
                if (options.type == 'post') {
                    // 用户希望的向服务器端传递的请求参数的类型
                    let contentType = options.header['Content-Type'];
                    // 设置请求参数格式的类型
                    xhr.setRequestHeader('Content-Type', contentType);
                    // 判断用户希望的请求参数格式的类型
                    // 如果类型为json
                    if (contentType == 'application/json') {
                        // 向服务器端传递json数据格式的参数
                        xhr.send(JSON.stringify(options.data));
                    } else {
                        // 向服务器端传递普通类型的请求参数
                        xhr.send(params);
                    }
                } else {
                    // 3 发送请求 post请求要把请求参数放在请求体里面偶!
                    xhr.send();
                }

                // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！]
                xhr.onload = function() {

                    // xhr.getResponseHeader()
                    // 获取响应头中的数据!
                    // 根据你请求方式不同而返回不一样的结果！
                    let contentType = xhr.getResponseHeader('Content-Type');
                    // 服务器端返回的数据
                    let responseText = xhr.responseText;

                    // 如果响应类型中包含json
                    if (contentType.includes('application/json')) {
                        // console.log('包含');
                        // console.log(JSON.parse(responseText));
                        //将json字符串转换为json对象
                        responseText = JSON.parse(responseText);
                    } else {

                    }


                    if (xhr.status == 200) {
                        // 请求成功调用处理成功情况的函数

                        options.success(responseText);
                    } else {
                        // 请求失败调用处理失败情况的函数

                        options.error(responseText, xhr);
                    }
                }
            }
            ajax({
                type: 'post',
                data: {
                    name: 'lvhang',
                    age: 23
                },
                header: {
                    'Content-Type': 'application/json'
                },
                url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
                success: function(data) {
                    console.log("这是封装的响应结果" + data);
                    console.log(data);
                },
                error: function(data, xhr) {
                    console.log('恭喜您收到了一个非200的状态码' + data);
                    console.log(xhr);
                }
            })
        }
    </script>
</body>

</html>

封装最终版

【其实我们已经封装得差不多了！但是还有一个问题，我们在调用Ajax函数的时候传递了非常多的参数， 如果每次调用AJax函数都需要调用这么多参数的话也是很不方便的!】[目标：只需要传递一些必要的参数进去就行了例如：请求地址、请求中的回调函数等！没有传递请求的话就使用默认值！就像请求参数的类型：没有传递就使用传统的字符串拼接的方式，如果传递的是json字符串的形式，那么请求参数类型就设置为application/json]

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>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            function ajax(options) {
                // 1 创建Ajax对象
                let xhr = new XMLHttpRequest();
                // 拼接请求参数变量
                let params = '';
                for (let attr in options.data) {
                    params += attr + '=' + options.data[attr] + '&';
                }

                // 对字符串进行截取
                // 将参数最后面的 & 截取掉
                // 将截取的结果重新赋值给params变量
                params = params.substr(0, params.length - 1);
                // console.log(params)


                /**
                 * {
                 *      name: 'lvhang',
                 *      age: 23
                 * }
                 */
                // 判断请求方式
                if (options.type == 'get') {
                    options.url = options.url + '?' + params;
                }

                // 告诉Ajax请求地址及其方式
                xhr.open(options.type, options.url);

                // 如果请求方式为post
                if (options.type == 'post') {
                    // 用户希望的向服务器端传递的请求参数的类型
                    let contentType = options.header['Content-Type'];
                    // 设置请求参数格式的类型
                    xhr.setRequestHeader('Content-Type', contentType);
                    // 判断用户希望的请求参数格式的类型
                    // 如果类型为json
                    if (contentType == 'application/json') {
                        // 向服务器端传递json数据格式的参数
                        xhr.send(JSON.stringify(options.data));
                    } else {
                        // 向服务器端传递普通类型的请求参数
                        xhr.send(params);
                    }
                } else {
                    // 3 发送请求 post请求要把请求参数放在请求体里面偶!
                    xhr.send();
                }

                // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！]
                xhr.onload = function() {

                    // xhr.getResponseHeader()
                    // 获取响应头中的数据!
                    // 根据你请求方式不同而返回不一样的结果！
                    let contentType = xhr.getResponseHeader('Content-Type');
                    // 服务器端返回的数据
                    let responseText = xhr.responseText;

                    // 如果响应类型中包含json
                    if (contentType.includes('application/json')) {
                        // console.log('包含');
                        // console.log(JSON.parse(responseText));
                        //将json字符串转换为json对象
                        responseText = JSON.parse(responseText);
                    } else {

                    }


                    if (xhr.status == 200) {
                        // 请求成功调用处理成功情况的函数

                        options.success(responseText);
                    } else {
                        // 请求失败调用处理失败情况的函数

                        options.error(responseText, xhr);
                    }
                }
            }
            ajax({
                type: 'post',
                data: {
                    name: 'lvhang',
                    age: 23
                },
                header: {
                    'Content-Type': 'application/json'
                },
                url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
                success: function(data) {
                    console.log("这是封装的响应结果" + data);
                    console.log(data);
                },
                error: function(data, xhr) {
                    console.log('恭喜您收到了一个非200的状态码' + data);
                    console.log(xhr);
                }
            })
        }
    </script>
</body>

</html>

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>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            function ajax(options) {

                let defaults = {
                    type: 'get',
                    url: '',
                    data: {},
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    success: function() {},
                    error: function() {}
                }

                // 使用options对象中的属性覆盖defaults对象中的属性
                Object.assign(defaults, options);



                // 1 创建Ajax对象
                let xhr = new XMLHttpRequest();
                // 拼接请求参数变量
                let params = '';
                for (let attr in defaults.data) {
                    params += attr + '=' + defaults.data[attr] + '&';
                }

                // 对字符串进行截取
                // 将参数最后面的 & 截取掉
                // 将截取的结果重新赋值给params变量
                params = params.substr(0, params.length - 1);
                // console.log(params)


                /**
                 * {
                 *      name: 'lvhang',
                 *      age: 23
                 * }
                 */
                // 判断请求方式
                if (defaults.type == 'get') {
                    defaults.url = defaults.url + '?' + params;
                }

                // 告诉Ajax请求地址及其方式
                xhr.open(defaults.type, defaults.url);

                // 如果请求方式为post
                if (defaults.type == 'post') {
                    // 用户希望的向服务器端传递的请求参数的类型
                    let contentType = defaults.header['Content-Type'];
                    // 设置请求参数格式的类型
                    xhr.setRequestHeader('Content-Type', contentType);
                    // 判断用户希望的请求参数格式的类型
                    // 如果类型为json
                    if (contentType == 'application/json') {
                        // 向服务器端传递json数据格式的参数
                        xhr.send(JSON.stringify(defaults.data));
                    } else {
                        // 向服务器端传递普通类型的请求参数
                        xhr.send(params);
                    }
                } else {
                    // 3 发送请求 post请求要把请求参数放在请求体里面偶!
                    xhr.send();
                }

                // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！]
                xhr.onload = function() {

                    // xhr.getResponseHeader()
                    // 获取响应头中的数据!
                    // 根据你请求方式不同而返回不一样的结果！
                    let contentType = xhr.getResponseHeader('Content-Type');
                    // 服务器端返回的数据
                    let responseText = xhr.responseText;

                    // 如果响应类型中包含json
                    if (contentType.includes('application/json')) {
                        // console.log('包含');
                        // console.log(JSON.parse(responseText));
                        //将json字符串转换为json对象
                        responseText = JSON.parse(responseText);
                    } else {

                    }


                    if (xhr.status == 200) {
                        // 请求成功调用处理成功情况的函数

                        defaults.success(responseText);
                    } else {
                        // 请求失败调用处理失败情况的函数

                        defaults.error(responseText, xhr);
                    }
                }
            }
            ajax({
                url: 'https://v1.alapi.cn/api/music/search?keyword=东京塔子',
                success: function(data) {
                    console.log("这是封装的响应结果" + data);
                    console.log(data);
                }
            })
        }
    </script>
</body>

</html>

看请求同样能够发送出去！

lvhanghmm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ajax封装函数
08-01
对ajax基础的封装
原生Javascript封装的一个AJAX函数分享
10-25
主要介绍了原生Javascript封装的一个AJAX函数分享,本文是实际项目中提取出来的,简单易用,需要的朋友可以参考下
封装自己的Ajax函数
m0_57101855的博客
04-17 574
aja() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性： method 请求的类型 url 请求的 URL 地址 data 请求携带的数据 success 请求成功之后的回调函数 封装分为三步： 1.把外界传递过来的参数转化为查询字符串格式 // 处理data函数 // 功能：把数据对象转化为查询字符串格式发送到服务器 function resolveData(data) { var arr = []; // for…...
Ajax 封装
weixin_47505105的博客
03-09 4916
介绍了原生ajax存在的问题，以及一步步完善对ajax进行封装
简单封装$.ajax() 方法
LWT_博客
07-26 1万+
注意:用此方法必须基于JQuery.min.js 　上实现。 话不多说贴上一个Ｄｅｍｏ：     &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="GBK" /&gt; &lt;title&gt;简单封装$.ajax()方法&lt;/title&gt;
params传递任意参数
a554671102的博客
12-14 551
namespace 传递任意参数{ class Program { static void Main(string[] args) { //可传递任意数量参数 Test(1, 2, "sasda"); } static void Test(params object[] a...
ajax封装实例代码
11-04
6. **封装Ajax函数** 将以上步骤整合到一个函数中，可以方便地复用： ```javascript function ajax(options) { var xhr = new XMLHttpRequest(); xhr.open(options.method, options.url, true); xhr....
vue-ajax小封装实例
08-29
在本文中，我们将深入探讨如何在Vue.js应用中进行AJAX的小封装实例。Vue.js是一个流行的前端JavaScript框架，它提供了一种简洁的方式来构建用户界面。然而，为了与服务器进行通信，我们通常需要使用Ajax技术来实现...
substring 与 substr 详解
aphy358的博客
11-24 527
substring 与 substr 详解： 1、当给这两个函数只传一个参数时，其用法和C#意思一样。 2、当给这两个函数传两个参数时： a、substring (param1,param2) param1：表示截取的起始位置 param2：表示截取的终止位置 a、substr (param1,param2) param1：表示截取的起始位置 param2：表示截取的长度 3
Ajax中send方法参数的使用
10-09 4962
        一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。       例如 ：                    var url = "login.jsp?user=XXX&pwd=XXX";                    xmlHttpRequest.open(
如何封装一个Ajax函数
云加速
05-20 414
这篇文章主要介绍了如何封装一个Ajax函数，帮助大家更好的理解和学习网络编程，感兴趣的朋友可以了解下 如何封装Ajax函数 一个Ajax函数： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 一个Ajax函数 var xhr = null; if(window.XMLHttpRequest){ xhr = new X...
封装Ajax函数
热门推荐
往事不回头,余生不将就
05-19 1万+
Ajax 说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有：（地图）实时更新，表单验证等等.... 所以要再次结合promise对Ajax进行封装以便于项目开发 ajax请求函数模块 返回值: promise对象(异步返回的数据是: response.data) */ import axios from 'axios' export default function ajax(url, data = {}, type = 'GET') { r.
ajax函数封装
qq_37855074的博客
08-10 270
ajax函数封装 function ajax(options){ //存储的是默认值 var defaults = { type:'get', url:'', data:{}, header:{ ...
ajax请求封装函数
weixin_30822451的博客
11-12 132
写封装函数的套路 1.先写出这个函数原来的基本用法 2.写一个没有形参空函数，将上一步的代码直接作为函数体， 3.根据使用过程中，抽象出来需要变的东西作为形参 function ajax (method, url, params, fun) { method = method.toUpperCase() //在传入metho...
function中ajax,Ajax function
weixin_39827506的博客
08-06 668
function json2str(data) {// 0.添加随机因子data.t = Math.random();// 1.定义一个数组var arr = [];// 2.遍历传入的json对象for(var key in data){// 3.将json转化为数组arr.push(key+"="+encodeURI(data[key]));}// 4.将数组转化为固定格式的字符串// con...
封装一个简单的同步Ajax函数
heiyeluren的blog（黑夜路人的开源世界）
03-27 2021
/**函数：初始化一个Ajax的对象*/function psGetAjaxObj(){ var ajax=false;  try {   ajax = new ActiveXObject("Msxml2.XMLHTTP");  } catch (e) {   try {    ajax = new ActiveXObject("Microsoft.XMLHTTP");   } catch (E)
JavaScript之封装Ajax函数
TSORA-C的博客
05-21 225
JavaScript之封装Ajax函数 /** * 封装Ajax函数 * @param {string} opt.url 发送请求的url * @param {string} opt.method http连接的方式，包括POST和GET两种方式 * @param {boolean} opt.async 是否为异步，true为异步，false为同步 * @param {object} o...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lvhanghmm

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值