封装自定义AJAX请求函数

最新推荐文章于 2023-11-30 17:48:31 发布

是严寒呀

最新推荐文章于 2023-11-30 17:48:31 发布

阅读量527

点赞数 1

分类专栏： Web前端 AJAX 文章标签： AJAX web 前端 Javascript

本文链接：https://blog.csdn.net/qq_37224534/article/details/102696772

版权

本文介绍如何封装一个自定义的AJAX请求函数，以减少前端开发中的重复代码。通过详细讲解源代码、参数说明和函数体工作原理，展示了如何处理XMLHttpRequest对象以实现数据请求。在成功请求后，将数据应用于页面元素，同时提供了运行效果和使用建议。

摘要由CSDN通过智能技术生成

在网页中经常需要利用AJAX向后台请求数据，需要创建XMLHttpRequest对象。在请求个数不多时，可以单独写请求函数。可是如果请求数量多，就会有大量的重复性代码。为了减少冗余，就可以对请求函数进行封装，将一系列的请求操作逻辑封装好，我们只需调用这个函数，传入参数变量即可。

一、源代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script>
        // 封装请求函数
        function ajax(responseType, event, method, url, isAsync = true, sendString = "") {
            var xmlhttp
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest()
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    if (responseType === "xml") {
                        event(xmlhttp.responseXML)
                    } else if (responseType === "text") {
                        event(xmlhttp.responseText)
                    }
                }
            }
            xmlhttp.open(method, url, isAsync)
            xmlhttp.