Ajax 学习笔记（二）

作者：lxmoe

2022-11-20
辽宁
本文字数：1253 字
阅读完需：约 4 分钟

Ajax 函数封装

在post方法和get方法中有很多重复的部分，保留重复的部分，不同的用 if 判断就可以实现合并成一个函数，进而进行调用，称这个合并过程为函数封装

封装函数：

var url = "http://qlapi.sylu.edu.cn/mock/67";var firstStatus = [0];function $Ajax({ method, url, header, data, success, error }) {    var xhr = null;    try {        xhr = new XMLHttpRequest();    } catch (error) {        xhr = new ActiveXObject("Microsoft.XMLHTTP");    }    if (typeof data == "object") {        data = JSON.stringify(data);    }    if (method == 'get' && data) {        url += `?${data}`;    }    xhr.open(method, `${baseUrl}${url}`, true);    if (method == "get") {        xhr.send();    } else {        if (header) {            for (const item in header) {                xhr.setRequestHeader(item, header[item]);            }        } else {            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");        }        xhr.send(`${data}`);    }    xhr.onload = function () {        if (xhr.readyState == 4) {            if (xhr.status == 200 && success) {                success(JSON.parse(xhr.responseText));            } else if (error) {                error("Error" + xhr.status);            }        }    };}

复制代码

调用该函数需要输入的信息：

method 为请求方式（getorpost）；
url 为请求发送地址；
header 为请求头格式；
data 为需要传递的参数；
success 为传递成功后执行的函数；
error 为传递失败后执行的函数。

调用函数：

function send() {    var username = document.getElementById("username").value,        password = document.getElementById("password").value;    _value = {        username: username,        password: password    };    $Ajax({        method: "post",        url: "/login",        header: {            "Content-type": "application/json"        },        data: _value,        success: function (res) {            console.log(res);            alert("登录成功");        },        error: function (err) {            console.log(err)        }    })}

复制代码

该函数传递的信息：

使用post方式发送请求；
发送地址为http://qlapi.sylu.edu.cn/mock/67/login；
使用 JSON 对象格式的请求头；
传递 JSON 对象格式的参数username和password；
传递成功执行函数：在控制台打印返回参数，并弹出“登录成功”提示框；
传递失败则执行函数：在控制台打印出返回参数。

后记：

本章介绍了 Ajax 的定义与作用、运行原理和在前端开发中的使用场景；并且简单描述了原生 Ajax 的使用方法和简单封装 Ajax，也加速了理解 JQuery 库的进程；若后续对 Ajax 的实际应用有更多的了解，或认识到新的请求头、参数形式，可以更新于此。

发布于: 刚刚阅读数: 9

原文链接:【http://xie.infoq.cn/article/286df90f1b0ad041ec9eece03】。文章转载请联系作者。

lxmoe

关注

还未添加个人签名 2022-08-06 加入

还未添加个人简介

发布

暂无评论

创作场景

Ajax 学习笔记（二）

Ajax 函数封装

封装函数：

调用函数：

后记：

lxmoe

评论