AJAX工作原理-tutoriel php-php.cn

一、ajax技术的背景

不可否认，ajax技术的流行得益于google的大力推广，正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用，催生了ajax的流行。而这也让微软感到无比的尴尬，因为早在97年，微软便已经发明了ajax中的关键技术，并且在99年IE5推出之时，它便开始支持XmlHttpRequest对象，并且微软之前已经开始在它的一些产品中应用ajax，比如说MSDN网站菜单中的一些应用。遗憾的是，不知道出于什么想法，当时微软发明了ajax的核心技术之后，并没有看到它的潜力而加以发展和推广，而是将它搁置起来。对于这一点来说，我个人是觉得非常奇怪的，因为以微软的资源和它的战略眼光来说，应该不会看不到ajax技术的前景，唯一的解释也许就是因为当时它的主要竞争对手Netscape的消失反而使它变得麻痹和迟钝，毕竟巨人也有打盹的时候，比如IBM曾经在对微软战略上的失误。正是这一次的失误，成就了它现在的竞争对手google在ajax方面的领先地位，而事实上google目前在ajax技术方面的领先是微软所无法达到的，这一点在后面我讲述ajax缺陷的时候也会提到。现在微软也意识到了这个问题，因此它也开始在ajax领域奋起直追，比如说推出它自己的ajax框架atlas，并且在.NET2.0也提供了一个用来实现异步回调的接口，即ICallBack接口。那么微软为什么对自己在ajax方面的落后如此紧张呢？现在就让我们来分析一下ajax技术后面隐藏的深刻意义。

二、什么是ajax

ajax即“Asynchronous Javascript AND XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。ajax包括使用XHTML和CSS标准实现Web页面，使用DOM实现动态显示和交互,使用XML进行数据交换和处理，最后使用javaScript绑定和处理所有数据。ajax将一些服务器负担的工作下放至客户端，利用客户端的某些能力来处理数据，减少用户实际和心理上的等待时间，用户不在遇到因为页面刷新导致浏览器长时间空白，甚至停止响应的糟糕结果，这给了用户最佳的体验效果。ajax基于标准化的XML，被广泛使用并且支持，利于维护和修改。ajax调用外部数据很方便，在需要页面与数据分离的情况下，可以应用ajax获取数据。

三、ajax所包含的技术

大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javaScript来绑定和调用。

四、ajax原理和XmlHttpRequest对象

ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。通过下图能更清楚的理解ajax的工作原理

<strong>ajax</strong>工作原理

XMLHttpRequest的工作原理。
XMLHttpRequest对象的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
statusText 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法

<script language="javascript">
	var xmlHttp = null;

	//创建XMLHttpRequest<strong>对象
	function GetXmlHttpRequest()
	{
		var xmlHttp = null;
		try
		{
			xmlHttp = new XMLHttpRequest();  //对于firefox等浏览器
		}
		catch(e)
		{
			try
			{
				xmlHttp = new ActiveXObject("Msxm12.XMLHTTP"); //对于IE浏览器
			}
			catch(e)
			{
				try
				{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch(e)
				{
					xmlHttp = false;
				}
			}
		}
		//返回XMLHttpRequest<strong>对象
		return xmlHttp;
	}
	
	//发出异步请求
	function sendRequest()
	{

		//获取页面表单提交的文本框的值
		var  prov_name = document.getElementById("province").value;

		if ((prov_name == null) || (prov_name == &#39;&#39;))
			return;
	
		xmlHttp = GetXmlHttpRequest();
		if (xmlHttp == null)
		{
			alert("浏览器不支持xmlHttpRequset!");
			return;
		}

		//构建请求的URL地址
		var url = &#39;18-5.php&#39;;
		url = url + "?prov=" + prov_name;
	
		//使用get()方法打开一个到url的链接，为发出的请求做准备
		xmlHttp.open("GET",url,true);

		//设置一个函数 ，当服务器完成请求后调用，该函数名为updatePage
		xmlHttp.onreadystatechange = updatePage;
		//发送请求（GET提交方式） <span style="font-family: 宋体;">POST提交方式 <span style="font-family: 宋体;">xmlHttp.send(url);
		xmlHttp.send(null);
	}

	//回调函数 处理服务器响应
	function updatePage()
	{
		//判断xmlHttpRequset()<strong>对象的readyState值是否等于4
		if(xmlHttp.readyState == 4 && xmlHttp.status ==200)
		{
		<span style="white-space: pre;">	//获取服务器返回的响应数据
			var response = xmlHttp.responseText;
			document.getElementById(&#39;city&#39;).innerHTML = response;
		}
	}
</script>

Copier après la connexion

如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。
对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：
a、向服务器提交数据的类型，即post还是get。
b、请求的url地址和传递的参数。
c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。
d、Send方法用来发送请求。

从XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。

五、ajax的优缺点

ajax的优点:
1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点:
因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。下面所阐述的ajax的缺陷都是它先天所产生的。

1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到ajax元素上，以便将应用程序状态恢复到当时的状态。）但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。

2、安全问题
技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。

六、ajax的几种框架

目前我们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。ajax.dll和ajaxpro.dll这两个框架差别不大，而magicajax.dll只是封装得更厉害一些，比如说它可以直接返回DataSet数据集，前面我们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。但是它的这个特点可以给我们带来很大的方便，比如说我们的页面有一个列表，而列表的数据是不断变化的，那么我们可以采用magicajax来处理，操作很简单，添加magicajax之后，将要更新的列表控件放在magicajax的控件之内，然后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差不多。但是，需要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就可以知道。
除了这几种框架之外，我们平时用到的比较多的方式是自己创建xmlHttpRequest对象，这种方式和前面的几种框架相比更具有灵活性。另外，在这里还提一下aspnet2.0自带的异步回调接口，它和ajax一样也可以实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，当然这是微软的一个竞争策略。

七、ajax简单示例

示例实现的功能是当用户在WEB页面的下拉列表框中选择某个省的名称时，会在页面上显示该省的省会名称，而此时页面并不刷新。省会名称将由服务端传送至浏览器。这个示例包含三个部分（这里的服务端是PHP程序）

1、HTML页面，包含下拉列表框和要显示省会名称的位置

2、JavaScript程序，实现发送请求和处理响应。

3、服务端的PHP程序，用来接受浏览器的请求，向浏览器传送结果数据。

（客户端）HTML页面：



<meta http-equiv="Content-Type" c charset='utf-8"'>
<title>
<strong>ajax</strong>简单应用</title>
<script language="javascript">
	var xmlHttp = null;

	//创建XMLHttpRequest<strong>对象
	function GetXmlHttpRequest()
	{
		var xmlHttp = null;
		try
		{
			xmlHttp = new XMLHttpRequest();  //对于firefox等浏览器
		}
		catch(e)
		{
			try
			{
				xmlHttp = new ActiveXObject("Msxm12.XMLHTTP"); //对于IE浏览器
			}
			catch(e)
			{
				try
				{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch(e)
				{
					xmlHttp = false;
				}
			}
		}
		//返回XMLHttpRequest<strong>对象
		return xmlHttp;
	}
	
	//发出异步请求
	function sendRequest()
	{

		//获取页面表单提交的文本框的值
		var  prov_name = document.getElementById("province").value;

		if ((prov_name == null) || (prov_name == &#39;&#39;))
			return;
	
		xmlHttp = GetXmlHttpRequest();
		if (xmlHttp == null)
		{
			alert("浏览器不支持xmlHttpRequset!");
			return;
		}

		//构建请求的URL地址
		var url = &#39;18-5.php&#39;;
		url = url + "?prov=" + prov_name;
	
		//使用get()方法打开一个到url的链接，为发出的请求做准备
		xmlHttp.open("GET",url,true);

		//设置一个函数 ，当服务器完成请求后调用，该函数名为updatePage
		xmlHttp.onreadystatechange = updatePage;
		//发送请求
		xmlHttp.send(null);
	}

	//回调函数 处理服务器响应
	function updatePage()
	{
		if(xmlHttp.readyState!= 4)
		{
			document.getElementById("city").innerHTML="数据正在加载...";
		}
		//判断xmlHttpRequset()<strong>对象的readyState值是否等于4
		if(xmlHttp.readyState == 4 && xmlHttp.status ==200)
		{
			//获取服务器返回的响应数据
			var response = xmlHttp.responseText;
			document.getElementById(&#39;city&#39;).innerHTML = response;
		}
	}

</script>



<h3>请选择一个省（自治区）<h3>
</h3>
</h3>

Copier après la connexion

（服务端）PHP程序

<?php $city_arr = array(
		&#39;ah&#39;=>'合肥',
		'fj'=>'福州',
		'gs'=>'兰州',
		'gx'=>'南宁',
		'gd'=>'广州',
		'gz'=>'贵阳',
		'hn'=>'海口',
		'hb'=>'石家庄',
		'hh'=>'郑州',
		'hlg'=>'哈尔滨',
	);

	if (empty($_GET['prov']))
	{
		echo iconv("UTF-8", "UTF-8", '<font color="red">您还没有选择省（自治区）</font>'); //注意：你的PHP文件使用的是<strong>GB2312</strong>编码保存的话，那iconv('<strong>GB2312</strong>','UTF-8','<span style="font-family: 宋体;"><font color="red">您还没有选择省（自治区）</font></span><span style="font-family: 宋体;">');</span>
	}
	else
	{
		$prov = $_GET['prov'];
		$city = $city_arr[$prov];
		echo iconv("UTF-8", "UTF-8", '所选省（自治区）省会（首府）为：'.$city); <span style="font-family: 宋体;">//注意：你的PHP文件使用的是<strong>GB2312</strong>编码保存的话，那iconv('<strong>GB2312</strong>','UTF-8','</span><span style="font-family: 宋体;">所选省（自治区）省会（首府）为：'.$city</span><span style="font-family: 宋体;">);</span><span style="font-family: 宋体;">
</span>	}
?>

Copier après la connexion

运行效果

<strong>ajax</strong>工作原理

以上就介绍了AJAX工作原理，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。