三、Ajax (二) -- Ajax的创建以及原理

最新推荐文章于 2023-01-05 21:48:22 发布

二旬、

最新推荐文章于 2023-01-05 21:48:22 发布

阅读量172

点赞数

分类专栏：黑马 -- web2

本文链接：https://blog.csdn.net/weixin_45602227/article/details/106191351

版权

黑马 -- web2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、web中的同步与异步

1.1 同步请求

	
	同步请求：顺序处理。（web1.0） 浏览器必须等待服务器响应才可以做其他动作。
			  
			    1.即当我们向服务器发出一个请求时，在服务器没返回结果给客户端之前，
				  我们要一直处于等待状态直至服务器将结果返回到客户端，
				  我们才能执行下一步操作。
			
			    2.请求1->响应1->请求2->响应2           	
			     
			     [Web1.0时代] 提交请求->等待服务器处理->处理完毕返回。这个期间客户端浏览器不能干任何事

1.2 异步请求

				
	异步请求:并行处理。（web2.0） 浏览器无须等服务器响应，可以做其他操作。
	
				 1.当我们向服务器发出一个请求时，在服务器没返回结果之前，
				   我们还是可以执行其他操作。例如AJAX技术就是异步请求。
				 
				 2.请求1->请求2->请求3->响应1->响应2->响应3->
	    		   请求1->响应1->请求2->请求3->响应2->响应3->

			  	 [web2.0时代]请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕。

1.3 同步请求和异步请求在web项目中的应用

       
        项目中：Web1.0为主（整个浏览器刷新），Web2.0为辅（浏览器局部刷新）

二、AJAX

在这里插入图片描述

2.1 什么是Ajax

		
		客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术	
	    即，AJAX是一个【局部刷新】的【异步】通讯技术
	    
	    AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言

2.2 不用刷新整个页面便可与服务器通讯的办法


       （A）Flash/ActionScript
       （B）框架Frameset
       （C）iFrame（内嵌入框架)
       （D）XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)

2.3 AJAX的应用范围


	   1.AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，
	     在用户的【体验】上，【更加人性化】
	   
	   2.AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP，。。。这些技术都可
	    
	   3.AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应

2.4 Ajax技术的组成

	Ajax是否是新的技术?
	
	Ajax是一种编程。其实质上就是一个异步对象。
	所用技术还是DOM\CSS\JS等相关技术。

在这里插入图片描述

2.4 Ajax的缺陷

AJAX不是完美的技术。也存在缺陷：

		1.AJAX大量使用了JavaScript和AJAX引擎，而这个取决于浏览器的支持。	
		  IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，
		  Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。
		  所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。 
		
		2 .AJAX更新页面内容的时候并没有刷新整个页面，
		   因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。
		   这个就需要在明显位置提醒用户“数据已更新”。 
		
		3 .对媒体的支持没有FLASH好。 
		   一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

三、Ajax的异步对象

3.1 什么是Ajax的异步对象

		AJAX是一种概念。而异步对象是AJAX这种概念的实现。

	
	+++ 异步对象的分类:
				
			ActiveXObject(IE浏览器)
			XMLHttpRequest(非IE浏览器、IE高版本浏览器)
	
	------------------------------------------------------------
		
			支持ActiveXObject 对象     IE5.0以上			
			支持XMLHttpRequest对象     IE10以上（包含）
									   火狐等其他浏览器

3.1 Ajax异步对象的背景


	背景：
			1.在IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，
			
			2.到后来Firefox等其它浏览器厂商也慢慢引入异步通讯对象，
			  这个对象叫XMLHttpRequest对象。
			  【其实这个对象就是ActiveXObject对象，只不过由于侵权问题，所以换了对象名称】
	         
	        3.IE感觉没有跟随主流，所以在IE的高版本中，又引入了XMLHttpRequest对象【IE0以上版本】

3.2 Ajax异步对象的兼容性

		
		XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准。

		Internet Explorer把XMLHttpRequest实现为一个ActiveX对象。
		其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
		
		XMLHttpRequest在不同浏览器上的实现是兼容的，
		所以可以用同样的方式访问XMLHttpRequest实例的属性和方法。
		而不论这个实例创建的方法是什么。

3.3 异步对象的创建


	  无需第三方jar包，
	  现代中高版本浏览器中内置了这个异步通讯对象，
	  只需通过JavaScript就可以创建
	   
	   注意：所有浏览器中都内置了异步对象，
	         在默认情况下，该异步对象并没有创建出来，需手动创建

>>>>>> 方式一


	function createAJAX(){
		var ajax = null;
		try{
			ajax = new ActiveXObject("microsoft.xmlhttp");
		}catch(e1){
			ajax = new XMLHttpRequest();
		}
		return ajax;
	}

>>>>>> 方式二

				if(window.XMLHttpRequest) {
					//isIE   =   false;  
					xmlhttp = new XMLHttpRequest();
				} else if(window.ActiveXObject) {
					//isIE   =   true;  
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}

3.4 检测浏览器是否支持异步对象

<!DOCTYP E html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
	

	<!-- 演示用JS提交表单 -->
	<script type="text/javascript">
		
		//创建异步对象
		function createAJAX(){		
			var ajax=null;			
			try{				
				ajax=new ActiveXObject("microsoft.xmlhttp");		
			}catch(e){
					try{
						ajax=new XMLHttpRequest();
					}catch (e) {
						alert("你的浏览器没有异步对象")
					}
			}			
			return ajax;
		}
		
		
		//检测异步对象是否创建
		var item=createAJAX();
		if(item==null){
			alert("你的浏览器没有异步对象")
		}else{
			alert(item)
		}
		
	</script>
<body>


</body>
</html>

3.5 使用原生AJAX是否需要导包

		
		1.AJAX是一种概念，其XMLHttpRequest、ActiveXObject是其实现类。
		
		2.这两个类是浏览器默认支持的，所以无须导包。

3.6 防止Ajax页面缓存，造成Ajax失效

	在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果。
	
	解决办法呢把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。 

	var url = "GetAndPostExample?timeStamp=" + new Date().getTime();

三、Ajax的原理

3.1 Ajax的工作原理图

3.1.1 传统的web请求路径图

在这里插入图片描述

3.1.2 AJAX 请求路径图

在这里插入图片描述


	传统web请求:
				1.用户发送http请求到服务器，浏览器等待。
				2.服务器处理请求。
				3.服务器响应数据。
	
	ajax请求：	
				1.用户发送原始的请求，到ajax对象。浏览器继续做其他事情。
				2.ajax对象包装请求，以http协议方式发送给服务器。
				3.服务器处理请求。
				4.服务器响应数据。
								必须以IO的方式写出。
								如果使用请求或重定向，则浏览器一定会全局刷新。
				5.ajax接受服务器响应数据。

3.2 Ajax 的状态码

3.2.1 什么是Ajax 的状态码

	
	AJAX维护了5种状态码（AJAX对象维护了一个状态码。该值有5个值）:
	
	0:ajax异步对象已经创建完毕，但是还未准备发送(创建阶段)
	
	1:ajax.open();准备发送请求
			ajax已经调用了open方法，但是还未发送请求。
	
	2:ajax.send();发送请求
			ajax已经调用了send方法，但是发送的请求还没有到服务器。
			请求在途。

	3:请求已经到达服务器，正在处理中，服务器正在将响应返回的过程中。
	  响应在途
	
	4：ajax已经完完全全接收到响应信息。

	
	注意：每个浏览器的0,1，2,3这四种状态码的值可能不一样。
	      但是4这个状态码的码值一定一样。

在这里插入图片描述

3.2.2 如何监听Ajax 的状态码改变

		
		onreadystatechange,
				1.可以监听ajax的状态变化。只有状态码变化了，方可触发函数。
					如：
					   0-1-2-3-4,这些是可以触发函数的
					   4-4-4-4-4，这些是不可以触发函数的
				
				2.这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的

		
			ajax.onreadystatechange = function(){
				//如果AJAX状态码为4
				if(ajax.readyState == 4){
					//如果服务器响应码是200
					if(ajax.status == 200){
						//NO5）从AJAX异步对象中获取服务器响应的结果
						var str = ajax.responseText;
						//NO6）按照DOM规则，将结果动态添加到web页面指向的标签中
						document.getElementsByTagName("span")[0].innerHTML = str;
					}
				}
			}

3.3 Ajax 异步对象

在这里插入图片描述

3.4 Ajax的原理

		
		1.AJAX采用异步交互过程。
		
		2.AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
		
		3.用户的浏览器在执行任务时即装载了AJAX引擎。
		  AJAX引擎用JavaScript语言编写，它负责用户界面及与服务器之间的交互。
		
		4.现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，这些不需要重新载入整个页面的需求可以交给AJAX来执行。

	Ajax的核心是JavaScript对象XMLHttpRequest。
    XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，
    而不阻塞用户。

二旬、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录