Ajax学习(get)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script>
        document.querySelector('#btnAjax).onclick = function(){
            //发送ajax需要五步
            //创建异步对象
            var ajaxObj=new XMLHttpRequest();
            //设置请求的URL

            //如果需要动态提交数据到服务器

           //'get','01.php?username='+document.querySelector('input').value;
            ajaxObj.open('get','01.php');
            //发送请求
            ajaxObj.send();
            //注册事件
            //onreadystatechange 状态改变就会调用
            //如果要在数据完美请求回来的时候在调用我们需要手动写判断逻辑
            ajaxObj.onreadystatechange=function(){
                //为了保证数据完整,我们一般会判断两个值
                if(ajaxObj.readyState==4&&ajaxObj.status==200){
                    //如果能进到这里面数据才是完整的
                    //在注册的事件中获取返回的内容并修改页面的显示
                console.log('调用了');
                //数据是保存在异步对象中
                console.log(ajaxObj.responseText);

                //修改页面的值
                document.querySelector('h1').innerHTML=ajaxObj.responseText;
                }
            }
        
        }
    </script>
    <body>
        <hi>发送get请求的Ajax</hi>
        <input type="button" value="发送get_ajax请求" id="btnAjax" />
    </body>
</html>

                                                                           本文只用于学习,不做其他用途

猜你喜欢

转载自blog.csdn.net/weshouldhelp/article/details/82285111
今日推荐