Ajax的封装

AA-S

已于 2022-04-06 13:50:25 修改

阅读量1.4k

点赞数 2

文章标签： vue.js

于 2022-03-21 13:43:54 首次发布

本文链接：https://blog.csdn.net/m0_63500235/article/details/123633648

版权

Ajax的初识理解

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML）是浏览器提供的一套方法，实现页面无刷新即可更新数据，提高用户浏览网站应用的体验

Ajax技术需要运行在网站环境中才能生效。

Ajax应用场景:

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表 ......

Ajax运行原理:

Ajax相对于浏览器发送请求和接收响应的代理人，实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

01-Ajax原生使用

具体模板可以看这里[1]

Ajax的实现步骤(简述)：

创建Ajax对象：

var xhr = new XMLHttpRequest();

确定Ajax的请求方式和请求地址：

xhr.open('get/post', 'url');

设置请求头

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // get方法请求头默认为此，可以不写

发送请求：

xhr.send(); // post方法数据需要放于此，get方法则不用，两者具体区别记载于后文

获取服务器端给与客户端的响应数据：

xhr.onload = function() {
 console.log(xhr.responseText);
}

Ajax的返回状态：

XMLHttpRequest.readyState有五种状态，代表着不同的含义：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，并且头部和状态已经可获得
3	LOADING	下载中；responseText属性已经包含部分数据
4	DONE	下载操作已完成

Ajax的参数传递：

1.get方式请求参数

语法：

xhr.open('get', `${url}?${data}`);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 可写可不写，默认为此
xhr.send();

2.post方式请求参数

语法：

xhr.open('post', `${url}`);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 必须写
xhr.send(`${data}`);

Ajax常用请求头：

字符串形式请求头：

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

参数形式：

data="username=cxy&age=18";

JSON形式请求头：

xhr.setRequestHeader("Content-type": "application/json");

参数形式：

data={
 username: cxy,
 age: 18
};

Ajax的数据格式：

格式转换：

/* 将JSON字符串转换成JSON对象 */
JSON.parse();
/* 将JSON对象转换成JSON字符串 */
JSON.stringify();

在真实项目中，服务器端大多数情况下以JSON 对象作为响应数据的格式；
当客户端拿到响应数据时，要将JSON 数据和 HTML 字符串进行拼接，然后将拼接结果展示在页面中；
在http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转化为对象字符串进行传输。

原生Ajax的综合示例：

<body>
 <form>
  <input id="name" type="text">
  <input id="age" type="text">
  <button class="submit" type="button" onclick="send()">点击注册</button>
 </form>
 <script>
  /* 1.设置全局地址 */
  var url = "http://qlapi.sylu.edu.cn/mock/67";
  /* 2.添加事件 */
  function send() {
   /* 3.创建Ajax对象 */
   var xhr = null;
   try {
   xhr = new XMLHttpRequest();
   } catch (error) {
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   /* 4.获取、拼接请求参数(字符串形式) */
   var name = document.getElementById("name").value;
   var age = document.getElementById("age").value;
   var data = 'name=' + name + '$age=' + age;
   /* 5.调用open */
   xhr.open('get', `${url}/test?${data}`); // 用post方法时：xhr.open('post', `${url}/test`);
   /* 6.在send方法之前设置请求头 */
   xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
   /* 8.调用send */
   xhr.send(); // 用post方法时：xhr.send(`{data}`);
   /* 9.等待数据响应 */
   xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
     if (xhr.status == 200) { // 判断状态码是否为200
      const res = JSON.parse(xhr.responseText); // 将返回数据赋给res
      console.log(res); // 打印出数据
     } else {
      alert("Error:" + xhr.status);
     }
    }
   };
  }
 </script>
</body>

02-Ajax函数封装

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

具体模板可以看这里[2]

封装函数：

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；
传递成功执行函数：在控制台打印返回参数，并弹出“登录成功”提示框；
传递失败则执行函数：在控制台打印出返回参数。

AA-S

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax的封装

Ajax的初识理解Asynchronous JavaScript and XML(异步的 JavaScript 和 XML）是浏览器提供的一套方法，实现页面无刷新即可更新数据，提高用户浏览网站应用的体验 Ajax技术需要运行在网站环境中才能生效。 Ajax应用场景: 页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字下拉列表 ...... Ajax运行原理: Ajax相对于浏览器发送请求和接收响应的代理人，实现
复制链接

扫一扫