AJAX之同步和异步(JS实现方式)

AJAX之同步和异步.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
    <input type="button" value="JS_Ajax" id="btn"> 
    <hr>
    <input>
    <script>
        
        
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            //1.获取XMLHttpRequest 对象
            var xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立连接
            //参数1 :method:请求的类型;GET 或 POST
            //参数2 :url:文件在服务器上的位置
            //参数3 :async:true(异步)或 false(同步)
            //xmlhttp.open("POST","AjaxServlet",true);
            xmlhttp.open("GET", "AjaxServlet?lname=zzf", true);
            //3.发送请求 
            xmlhttp.send();
            //4.接收服务器的数据 xmlhttp.responseText;
            //onreadystatechange:   存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
            xmlhttp.onreadystatechange = function() {
                //存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                //readyState
                //0: 请求未初始化
                //1: 服务器连接已建立
                //2: 请求已接收
                //3: 请求处理中
                //4: 请求已完成,且响应已就绪

                //status
                //1XX - 5XX
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    alert(xmlhttp.responseText);
                }
            }
        }
    </script>

</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容