Ajax的get请求的简易封装和使用

最新推荐文章于 2021-08-05 12:39:28 发布

七彩猫猫虫

最新推荐文章于 2021-08-05 12:39:28 发布

阅读量466

点赞数

分类专栏：学习中的小问题文章标签： ajax

本文链接：https://blog.csdn.net/SDAW_1/article/details/104162035

版权

学习中的小问题专栏收录该内容

26 篇文章 0 订阅

订阅专栏

封装的简易Ajax-get,js文件

function ajax(url,success,error) {
         //1、创建一个异步对象
        var xmlhttp = new XMLHttpRequest();
        //2、设置请求方式和请求地址
        xmlhttp.open("GET", url, true);
        //3、发送请求
        xmlhttp.send();
        //4、监听异步对象状态的变化
        xmlhttp.onreadystatechange = function () {

            if (xmlhttp.readyState === 4) {
                if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
                    //5、处理返回的结果

                    //成功时传出异步对象执行回调函数
                    success(xmlhttp);
                } else {
                    //失败时传出异步对象执行回调函数
                    error(xmlhttp);
                }
            }
        }
    }

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="myAjax.js"></script>
    <script>
        window.onload=function () {
            var oBtn=document.querySelector("button");
            oBtn.onclick=function () {
            //调用封装的get文件中的ajax方法
                ajax(要传入的url网址,
                //成功时候的回调函数
                //这里的xhr是ajax方法中传出的异步对象xmlhttp
                function (xhr) {
                    alert(xhr.responseText);
                },
                //失败时候的回调函数
                function (xhr) {
                    alert("请求失败");
                })
                }

            }
    </script>
</head>
<body>
<button> 发送请求</button>
</body>
</html>

七彩猫猫虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的get请求的简易封装和使用

封装的简易Ajax-get,js文件function ajax(url,success,error) { //1、创建一个异步对象 var xmlhttp = new XMLHttpRequest(); //2、设置请求方式和请求地址 xmlhttp.open("GET", url, true); //3、发送请求...
复制链接

扫一扫

专栏目录