原生JS使用ajax实例

最新推荐文章于 2024-06-19 11:25:09 发布

VincerCC

最新推荐文章于 2024-06-19 11:25:09 发布

阅读量486

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_16636629/article/details/100430495

版权

ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<body>
    <button class="btn">获取数据</button>
    <script>

        let btn=document.getElementsByClassName("btn")
        btn[0].onclick=function(){
            ajax("http://www.liulongbin.top:3005/api/getnewslist")
        }
        function ajax(url){
            var xmlHttp=window.XMLHttpRequest?new XMLHttpRequest():ActiveXObject("Microsoft.XMLHTTP")
            //ActiveXObject("microsoft.XMLHttp")为了兼容IE5和IE6
            xmlHttp.onreadystatechange = () =>{//每当readyState的属性改变时，就会调用该函数
                if(xmlHttp.readyState === 4){
                    // readyState存有的XMLHttpRequest的状态从0到4发生变化。 
                    // 0：请求未初始化 
                    // 1：服务器连接已建立 
                    // 2：请求已接收 
                    // 3：请求处理中 
                    // 4：请求已完成，且响应已就绪 
                    if(xmlHttp.status === 200){//status将状态返回为数字（例如，“Not Found”为404，“OK”为200）
                        // xmlHttp.responseText是以字符串形式返回获取到的内容
                        //console.log(xmlHttp.responseText);//这个是js字符串类型，需要转换为json对象
                        let data=JSON.parse(xmlHttp.responseText)
                        console.log(data)
                    }else{
                        console.log("获取失败")
                    }
                }
            }
            // open(method,url,async)	
            //     规定请求的类型、URL 以及是否异步处理请求。

            //     method：请求的类型；'GET' 或 'POST'

            //     url：文件在服务器上的位置

            //     async：true（异步）或 false（同步）

            // send(string)	
            //     将请求发送到服务器。

            //     string：仅用于 POST 请求


            xmlHttp.open('GET',url);
            xmlHttp.send();
        }
    </script>
</body>

VincerCC

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS使用ajax实例

<body> <button class="btn">获取数据</button> <script> let btn=document.getElementsByClassName("btn") btn[0].onclick=function(){ ajax("http://ww...
复制链接

扫一扫