原生JS的Ajax技术

1.同步和异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

2.ajax运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，

在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，

ajax引擎会监听到ajax的状态改变，触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

（我觉得ajax起到一个缓冲的作用，就像io系统中的通道，会接受并传递客户端的请求，此时客户端就不需要等待响应了）

以下是原生js的ajax演示：

点击异步访问服务器端，过3秒后会在页面显示一个随机数，在此期间，客户端并没有卡死，可以点击test按钮

点击同步访问服务器端，过3秒后会在页面显示一个随机数，在此期间，客户端卡死，不可以点击test按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function fun1(){
        //1.创建ajax引擎对象
        var xmlHttp=new XMLHttpRequest();
        //2.绑定监听   监听服务器是否已经返回相应数据
        xmlHttp.onreadystatechange=function(){
            // 当请求已完成，响应已就绪 并且正确返回请求资源时。
            //ajax引擎才会接收相应的数据
            if(xmlHttp.readyState==4&&xmlHttp.status==200 ){
                //5.接受相应数据
                var res=xmlHttp.responseText;
                document.getElementById("span1").innerHTML=res;
            }   
        }
        //3.绑定地址
        // 1)请求资源的方式  2）访问的web资源的地址  3）是否异步
        xmlHttp.open("GET","/WEB22/ajaxServlet",true);
        //4.发送请求
        xmlHttp.send();
    }
     
    function fun2(){
        //1.创建ajax引擎对象
        var xmlHttp=new XMLHttpRequest();
        //2.绑定监听   监听服务器是否已经返回相应数据
        xmlHttp.onreadystatechange=function(){
            // 当请求已完成，响应已就绪 并且正确返回请求资源时。
            //ajax引擎才会接收相应的数据
            if(xmlHttp.readyState==4&&xmlHttp.status==200 ){
                //5.接受相应数据
                var res=xmlHttp.responseText;
                document.getElementById("span2").innerHTML=res;
            }   
        }
        //3.绑定地址
        // 1)请求资源的方式  2）访问的web资源的地址  3）是否异步
        xmlHttp.open("GET","/WEB22/ajaxServlet",false);
        //4.发送请求
        xmlHttp.send();
         
         
    }
</script>
 
</head>
<body>
    <input type="button" value="异步访问服务器端" onclick="fun1()" ><span id="span1"></span><br>
    <input type="button" value="同步访问服务器端" onclick="fun2()" ><span id="span2"></span><br>
    <input type="button" value="test" onclick="alert()" >
</body>
</html>