AJAX基础知识

一、含义:

每当我们提到一个新名词时,我们总爱问:是什么?那么AJAX到底是什么呢?笔者今天将对AJAX稍作阐述:

 

百度百科:

AJAX即“Asynchronous Javascript+ XML ”（异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。

有很多使用 AJAX的应用程序案例：新浪微博、Google地图、开心网等等。

 

笔者解释:

 

AJAX是一种技术，一种组合技术，也可以说是老技术新应用。下面提几个名词（这项技术中的主体部分），大家一定很熟悉：

1. Javascript：核心代码。
2. HTML：建立Web表单，并确定应用程序其他部分使用的字段。
3. DOM：通过JS代码处理HTML结构和服务器返回的XML
4. XMLHttpRequest：核心对象。
5. Asynchronous：核心思想

 

二、原理：

 

原理部分笔者将用两张图做个对比

 

图一：使用AJAX

• 传统Web应用程序，用户填写表单数据，点击Submit按钮，将整个表单的数据提交到服务器，服务器将它转发给处理表单的脚本。脚本执行完毕后再发送回全新的整个页面。不过在整个页面发送回来期间用户必须等待。

 

 

 

图二：不使用AJAX

• Ajax 基本上就是把 JavaScript技术和 XMLHttpRequest对象放在 Web表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是直接发送给服务器，JavaScript代码捕获表单数据并向服务器发送请求（这个处理过程都是在AJAXENGINE中处理完成的）。在整个处理过程中，用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后，服务器将数据返回 JavaScript代码（仍然在 Web表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。

 

 

三、XMLHttpRequest对象：

全篇文章唯一的陌生估计就是“XMLHttpRequest对象”了。下面就对XMLHttpRequest对象做一个简单的了解：

XMLHttpRequest属性：

readyState

responseText

responseXML

status

statusText

 

XMLHttpRequest方法：

abort()

getAllResponseHeaders()

getResponserHeader()

;open();send()

sentRequestHeader()

 

创建XMLHttpRequest对象：

//创建XMLHttpRequest对象
varxmlhttprequest;
functioncreateXmlHttpRequest(){
//
if(window.XMLHttpRequest){
xmlhttprequest=newXMLHttpRequest();
}
//
elseif(window.ActicvXObject){
xmlhttprequest=newActicvXObject("Microsoft.XMLHTTP");
}
}        
 

AJAX发出请求：

1.从Web表单中获取需要的数据

2.建立连接的URL

3.打开到服务器的连接

4.设置服务器在完成后要运行的函数

5.发送请求

		function validate(){
			// Ajax完成数据的验证
			//获得数据
			var field=document.getElementById("userId").value;
			if(trim(field)!=""){
				//创建一个XMLHttpRequest对象
				createXmlHttpRequest();
				var url="user_add_validate.jsp?userId=" + trim(field)+"&time="+new Date().getTime();
				//设置请求方式为get，设置请求的url,设置为异步提交
				xmlhttprequest.open("get",url,true);
				//将方法地址复制给onreadystatechange属性，类似于电话号码
				xmlhttprequest.onreadystatechange=callback;
				//将设置信息发送到AJAX引擎
				xmlhttprequest.send(null);
				
			}
			else{
				//清空数据
				document.getElementById("spanUserId").innerHTML="";
			}
		}		

四、使用AJAX的完整实例：

客户端代码：

	//创建XMLHttpRequest对象
		var xmlhttprequest;
		function createXmlHttpRequest(){
			//
			if(window.XMLHttpRequest){
				xmlhttprequest=new XMLHttpRequest();
			}
			//
			else if(window.ActicvXObject){
				xmlhttprequest=new ActicvXObject("Microsoft.XMLHTTP");
			}
		}	
			
		function validate(){
			// Ajax完成数据的验证
			//获得数据
			var field=document.getElementById("userId").value;
			if(trim(field)!=""){
				//创建一个XMLHttpRequest对象
				createXmlHttpRequest();
				var url="user_add_validate.jsp?userId=" + trim(field)+"&time="+new Date().getTime();
				//设置请求方式为get，设置请求的url,设置为异步提交
				xmlhttprequest.open("get",url,true);
				//将方法地址复制给onreadystatechange属性，类似于电话号码
				xmlhttprequest.onreadystatechange=callback;
				//将设置信息发送到AJAX引擎
				xmlhttprequest.send(null);
				
			}
			else{
				//清空数据
				document.getElementById("spanUserId").innerHTML="";
			}
		}		
	
		function callback(){
			//判断ajax引擎是否得到了响应
			//alert(xmlhttprequest.readyState);
			if(xmlhttprequest.readyState==4){
				//HTTP协议状态为成功
				if(xmlhttprequest.status==200){
					if(trim(xmlhttprequest.responseText)!=""){
						//alert("请求成功:"+xmlhttprequest.responseText);
						document.getElementById("spanUserId").innerHTML="<font color='red'>" + xmlhttprequest.responseText +"</font>";
					}
					else{
						document.getElementById("spanUserId").innerHTML="";
					}
				}
				else{
					alert("请求失败："+xmlhttprequest.status);
				}	
			}
		}

五、总结：

本篇博客只是从AJAX的含义，原理，以及它的简单应用等几个角度，对AJAX做了简单的介绍。一提AJAX技术就不得不提的回调机制将在下面文章中阐述。