AJAX工作原理
|
一、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并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 四、AJAX原理和XmlHttpRequest对象 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。通过下图能更清楚的理解AJAX的工作原理
XMLHttpRequest的工作原理。 1 (初始化) 对象已建立，尚未调用send方法 2 (发送数据) send方法已调用，但是当前的状态及http头未知 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据 由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法
<script language="javascript">
var xmlHttp = null;
//创建XMLHttpRequest对象
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对象
return xmlHttp;
}
//发出异步请求
function sendRequest()
{
//获取页面表单提交的文本框的值
var prov_name = document.getElementById("province").value;
if ((prov_name == null) || (prov_name == ''))
return;
xmlHttp = GetXmlHttpRequest();
if (xmlHttp == null)
{
alert("浏览器不支持xmlHttpRequset!");
return;
}
//构建请求的URL地址
var url = '18-5.php';
url = url + "?prov=" + prov_name;
//使用get()方法打开一个到url的链接，为发出的请求做准备
xmlHttp.open("GET",url,true);
//设置一个函数 ，当服务器完成请求后调用，该函数名为updatePage
xmlHttp.onreadystatechange = updatePage;
//发送请求（GET提交方式） <span style="font-family: 宋体;">POST提交方式 </span><span style="font-family: 宋体;">xmlHttp.send(url);</span>
xmlHttp.send(null);
}
//回调函数 处理服务器响应
function updatePage()
{
//判断xmlHttpRequset()对象的readyState值是否等于4
if(xmlHttp.readyState == 4 && xmlHttp.status ==200)
{
<span style="white-space: pre;"> </span>//获取服务器返回的响应数据
var response = xmlHttp.responseText;
document.getElementById('city').innerHTML = response;
}
}
</script>
如上所示，函数首先检查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的优点: 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 AJAX的缺点: 1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。 2、安全问题 六、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，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就可以知道。 七、AJAX简单示例 示例实现的功能是当用户在WEB页面的下拉列表框中选择某个省的名称时，会在页面上显示该省的省会名称，而此时页面并不刷新。省会名称将由服务端传送至浏览器。这个示例包含三个部分（这里的服务端是PHP程序） 1、HTML页面，包含下拉列表框和要显示省会名称的位置 2、JavaScript程序，实现发送请求和处理响应。 3、服务端的PHP程序，用来接受浏览器的请求，向浏览器传送结果数据。 （客户端）HTML页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax简单应用</title>
<script language="javascript">
var xmlHttp = null;
//创建XMLHttpRequest对象
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对象
return xmlHttp;
}
//发出异步请求
function sendRequest()
{
//获取页面表单提交的文本框的值
var prov_name = document.getElementById("province").value;
if ((prov_name == null) || (prov_name == ''))
return;
xmlHttp = GetXmlHttpRequest();
if (xmlHttp == null)
{
alert("浏览器不支持xmlHttpRequset!");
return;
}
//构建请求的URL地址
var url = '18-5.php';
url = url + "?prov=" + prov_name;
//使用get()方法打开一个到url的链接，为发出的请求做准备
xmlHttp.open("GET",true);
//设置一个函数 ，当服务器完成请求后调用，该函数名为updatePage
xmlHttp.onreadystatechange = updatePage;
//发送请求
xmlHttp.send(null);
}
//回调函数 处理服务器响应
function updatePage()
{
if(xmlHttp.readyState!= 4)
{
document.getElementById("city").innerHTML="数据正在加载...";
}
//判断xmlHttpRequset()对象的readyState值是否等于4
if(xmlHttp.readyState == 4 && xmlHttp.status ==200)
{
//获取服务器返回的响应数据
var response = xmlHttp.responseText;
document.getElementById('city').innerHTML = response;
}
}
</script>
</head>
<body>
<h3>请选择一个省（自治区）<h3>
<form action="18-5.php">
<div>
<select id="province" onchange="sendRequest()">
<option value="">请选择一个省（自治区）</option>
<option value="ah">安徽</option>
<option value="fj">福建</option>
<option value="gs">甘肃</option>
<option value="gx">广西</option>
<option value="gd">广东</option>
<option value="gz">贵州</option>
<option value="hn">海南</option>
<option value="hb">河北</option>
<option value="hh">河南</option>
<option value="hlg">黑龙江</option>
</select>
</div>
</form>
<div id=city></div><!-- 显示城市省会 -->
</body>
</html>
（服务端）PHP程序
<?php
$city_arr = array(
'ah'=>'合肥','fj'=>'福州','gs'=>'兰州','gx'=>'南宁','gd'=>'广州','gz'=>'贵阳','hn'=>'海口','hb'=>'石家庄','hh'=>'郑州','hlg'=>'哈尔滨',);
if (empty($_GET['prov']))
{
echo iconv("UTF-8","UTF-8",'<font color ="red">您还没有选择省（自治区）</font>'); //注意：你的PHP文件使用的是GB2312编码保存的话，那iconv('GB2312','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",'所选省（自治区）省会（首府）为：'.$city); <span style="font-family: 宋体;">//注意：你的PHP文件使用的是GB2312编码保存的话，那iconv('GB2312','</span><span style="font-family: 宋体;">所选省（自治区）省会（首府）为：'.$city</span><span style="font-family: 宋体;">);</span><span style="font-family: 宋体;">
</span> }
?>运行效果
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |