原生JS的Ajax技术

Posted 你所学的知识,就是你持有的武器

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生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>

 

 

 

 

 

 

 

以上是关于原生JS的Ajax技术的主要内容,如果未能解决你的问题,请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

原生JS的Ajax技术

关于原生ajax请求及其封装

原生js实现ajax

js原生实现ajax

ajax语法结构