zoukankan      html  css  js  c++  java
  • 原生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>
    
  • 相关阅读:
    大话串口:我和它的恩恩怨怨
    分布式网游server的一些想法(一) 语言和平台的选择
    C++: C没有闭包真的很痛苦……
    C++不是C/C++
    最美树算法
    类魔兽世界 技能 天赋 成就 log 系统设计
    C++网游服务端开发(一):又无奈的重复造了个轮子,一个底层网络库
    C++ protobuf 不仅仅是序列化……
    深入WPFStyle
    Illusion = Caliburn.Micro + MEF
  • 原文地址:https://www.cnblogs.com/houchen/p/10667002.html
Copyright © 2011-2022 走看看