ajax介绍及实现步骤

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

1. 使用XHTML和CSS标准化呈现；
2. 使用DOM实现动态显示和交互；
3. 使用XML和XSLT进行数据交换与处理；
4. 使用XMLHttpRequest进行异步数据处理；
5. 使用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的步骤：

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

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

代码示例：

	
		
				
		
		
	
	
		

			
城市：
			
国家：
			
代号：