ajax介绍及实现步骤

最新推荐文章于 2024-08-11 21:47:18 发布

小蚂蚁_CrkRes

最新推荐文章于 2024-08-11 21:47:18 发布

阅读量2.3k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/zang141588761/article/details/90258536

版权

html5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

ajax并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起，在共同的协作中发挥各种作用

使用XHTML和CSS标准化呈现；
使用DOM实现动态显示和交互；
使用XML和XSLT进行数据交换与处理；
使用XMLHttpRequest进行异步数据处理；
使用JavaScript绑定和处理所有数据；

ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代向服务器提交请求。

Ajax并不是单一的技术，而是4种技术的集合，要灵活地运用Ajax必须深入了解这些不同的技术，以及它们在Ajax中所扮演的角色。

1.JavaScript

JavaScript是一种粘合剂，可以使用Ajax应用的各部分集成在一起。javascript是通用的脚本语言，用来嵌入在某种应用之中。在Ajax中javascript主要被用来传递用户界面上的数据到服务器端并返回处理结果。

2.CSS

CSS为Web页面元素提供了一种可重用的可视化样式的定义方法。它提供了简单而又强大的方法，以一致的方式定义和使用可视化样式。在Ajax应用中，用户界面的样式可以通过CSS独立修改。

3.DOM

Dom文档对象模型以一组可以使用javascript操作的可编程对象展现了Web页面的结构。通过使用脚本修改DOM，Ajax应用程序可以运行时改变用户界面，或者高效地重绘页面中的某个部分。

4.XMLHttpRequest

XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方式获取数据。数据格式通常是XML，但是也可以很好地支持任何基于文本的数据格式。也可以通过其他的方法从服务器获取数据，但XMLHttpRequest是最为灵活的和通用的工具。

JavaScript就像脱水一样将组成Ajax的各个部分粘合在一起。通过使用JavaScript操作DOM来改变和刷新用户界面，不断地重绘和重新组织显示给用户的数据，并且处理用户葳鼠标和键盘的交互。CSS为应用提供了一致的外观，并且为以编程方式操作DOM提供了强大的捷径。XMLHttpRequest对象则用来与服务器进行异步通信，在用户工作时提交用户的请求并获取新的数据。

Ajax可以作为客户端和服务器的中间层，来处理客户端的请求，并根据需要向服务器端发送请求，用什么就取什么，用多少取多少，就不会有数据的冗余和浪费，减少了数据的下载问题，而且更新页面时不用重新载入全部内容，只更新需要更新的那部分即可。相对于纯后台处理并重新载入的方式缩短了用户的等待时间，也把对资源的浪费降到了最低，基于标准化的并被广泛支持的技术，并且不需要插件或下载小程序，所以Ajax对于客户和ISP来说是双赢的。

Ajax使Web中的与显示分离，而在以前两者是没有精确界限的。数据与显示分离，有利于分工合作、减少非技术人员对页面的修改造成的Web应用程序错误、提高效率，也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利用客户端闲置的处理能力处理。

实现Ajax的步骤：

创建XMLHttpRequest对象，也就是创建一个异步调用的对象。不同浏览器使用异步调用对象有所不同，在IE浏览器中异步调用使用的，是XMLHTTP组件中的XMLHttpRequest对象，而在Netscape、Firefox浏览器中则直接使用XMLHttpRequest组件。因此，在不同的浏览器中创建XMLHttpRequest对象的方法有所不同。
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。创建了XMLHttpRequest对象之后，必须为其创建http请求，用于说明XMLHttpRequest对象要从哪里获取数据。通常要获取的数据可以是网站中的数据，也可以是本地文件中的数据。
设置响应HTTP请求状态变化的函数。创建HTTP请求后，就可以将HTTP请求发送给Web服务器了。然而，发送HTTP的目的是为了可以接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据，XMLHttpRequest对象一共会经历5种状态。
发送HTTP请求。在经过以上几个步骤的设置之后，就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法。
获取异步调用返回的数据。设置了响应http请求变化的函数，当XMLHttpRequest对象的readyState属性改变时，会自动激活该函数，如果XMLHttpRequest对象的readState属性值等于4，则表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据了。

6.使用javaScript和DOM实现局部刷新。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax 基础</title>		
		<style type="text/css">
			body{
				font-family: "微软雅黑";
				font-size: 12px;
			}
			*{
				margin: 0px;
				padding: 0px;
				border: 0px;
			}
			form{
				width:280px;
				height: 181px;
				background-image: url(img/1.png);
				background-repeat: no-repeat;
				padding-top: 40px;
				padding-left: 20px;
			}
			input{
				font-family: "微软雅黑";
				color:#666666;
				background: transparent;
				border-bottom: 1px dashed#007eff;
				border-left: none;
				border-right: none;
				border-top: none;
			}
			p{
				padding:10px 5px 5px 15px;
				background-image: url(img/1.png);
				background-repeat: no-repeat;
				background-position: left center;
			}
		</style>
		<script language="javascript">
			var xmlHttp;
			function createXMLHttpRequest(){
				if (window.ActiveXObject)
				{
					xmlHttp = new ActiveXObjext("Microsoft.XMLHTTP");
				}
				else if(window.XMLHttpRequest)
				{
					xmlHttp = new XMLHttpRequest();
				}
				
			}
			function callServer(){
				//获取表单中的数据
				var city = document.getElementById("city").value;
				var state = document.getElementById("state").value;
				//如果没有填写则返回
				if((city==null)||(city==""))
				return;
				if ((state==null)||(state=="")) {
					return ;
				}
				//链接服务器，自动获取代号。本实例没有链接服务器，此片只是示例
				var url = "https://blog.csdn.net/zang141588761";
				//打开链接
				xmlHttp.open("GET",url,true);
				// 告诉服务器在运行完成 后做什么，此片触发updatePage函数
				xmlHttp.onreadystatechange = updatePage;
				// 发送请求
				xmlHttp.send(null);
			}
			//处理服务器响应
			function updatePage()
			{
				if(4==xmlHttp.readyState)
				{
					var response = xmlHttp.responseText;
					document.getElementById("zipCode").value = response;
				}
			}
			// 创建XMLHttpRequest对象
			createXMLHttpRequest();
			
		</script>
	</head>
	<body>
		<form>
			<p>城市：<input type="text" name="city" id="city" size="25" onchange"callServer();"></p>
			<p>国家：<input type="text" name="state" id="state" size="25" onchange"callServer();"></p>
			<p>代号：<input type="text" name="zipCode" id="zipCode" size="5"></p>
		</form>
	</body>
</html>