【Ajax】封装方法

最新推荐文章于 2023-08-12 16:05:07 发布

麻真

最新推荐文章于 2023-08-12 16:05:07 发布

阅读量329

点赞数

本文链接：https://blog.csdn.net/Ma_Zhen_/article/details/127671562

版权

1、描述

2、原因分析

3、解决方案

描述：

代码优化：Ajax方法封装与使用

原因分析：

为了提高开发效率和代码可读性、可复用性和可维护性
试想如果不封装，那每次发出ajax请求都要写很多相同的代码，一个页面一般都有好几个请求，那相同的代码在一个页面要写好几次，不仅影响开发效率，还影响代码可维护性和可读性。而要是封装起来，把ajax请求中会变化的部分比如请求方式、url以及参数等等抽离出来，把需要重复写的代码封装起来，需要用的时候再调用并传入相应参数，代码可读性、可维护性等等和开发效率就会更高一点

解决方案：

js

function $FAjax(AOption){
    var xhr = new XMLHttpRequest();
    xhr.open(AOption.method, AOption.url, AOption.async);
    xhr.send();
    xhr.onreadystatechange = function (){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                AOption.success(xhr.responseText);
            }
        }
    };
    xhr.onerror = function (err){
        AOption.error(err);
    };
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载更多</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="newsbox">
        <input type="text" placeholder="请输入需要添加的内容" name="" id="myinput">
        <a id="more" class="more" href="javascript:;">点击添加</a>
    </div>
    <script src="./js/FQuery.js"></script>
</body>
</html>
<script>
    var myinput = document.querySelector('#myinput')
    $(".more").onclick = function (){
        var thevalue = myinput.value
        $FAjax({
            method: "GET", 
            url: 'http://localhost/php/index1.php?data='+thevalue, 
            async: true,
            success: function (res){
                console.log(res);
            },
            error: function (err){
                console.log(err);
            }
        });
    };
</script>