原生ajax的js实现（有实现代码）

最新推荐文章于 2022-07-21 09:20:57 发布

GodGump

最新推荐文章于 2022-07-21 09:20:57 发布

阅读量161

点赞数

分类专栏： html复习

本文链接：https://blog.csdn.net/GodGump/article/details/114339561

版权

html复习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
为了解决这个问题，提出了ajax。学过计算机操作系统的可以这样理解，传统是同步，ajax实现了异步。
五步使用法:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互
4.注册事件
5.更新界面
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script type="text/javascript" src="../static/js/jquery-3.5.1.js">
</script>
<script>
    function ajax_method(url,data,method,success) {
        // 创建ajax对象
        var ajax = new XMLHttpRequest();
        // get 跟post  需要分别写不同的代码
        if (method=='get') {
            // get请求
            if (data) {
                // 如果有值
                url+='?';
                url+=data;
            }else{
            }
            // 设置 方法 以及 url
            ajax.open(method,url);
            // send即可
            ajax.send();
        }else{
            // post请求 url 是不需要改变
            ajax.open(method,url);
            // 需要设置请求报文
            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            // 判断data send发送数据
            if (data) {
                // 如果有值 从send发送
                ajax.send(data);
            }else{
                // 没有值 直接发送即可
                ajax.send();
            }
        }
        // 注册事件
        ajax.onreadystatechange = function () {
            // 在事件中 获取数据 并修改界面显示
            if( ajax.readyState==4 && ajax.status==200 ) {
                // 如果说 外面可以传入一个 function 作为参数 success
                success(ajax.responseText);
            }
        }

    }
</script>
</html>