AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。它使用:
- 使用XHTML+CSS来表示信息;
- 使用Javascript操作Document Object Model进行动态显示及交互;
- 使用 XML 和 XSLT 进行数据交换及相关操作;
- 使用 XMLHttpRequest对象与Web服务器进行异步数据交换;
- 使用 JavaScript 将所有的东西绑定在一起。
与传统的web应用比较
传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。 这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服 务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或
其它一些基于XML的web
service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快
的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
优点、前提和批评
使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息。
Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样,Ajax应用程序必须在众多不同 的浏览器和平台上经过严格的测试。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不 支持JavaScript的用户提供替代功能。
对应用Ajax最主要的批评就是,它可能破坏浏览器后退按钮的正常行为(参见Jakob Nielsen's的《1999 Top-10 New Mistakes of Web Design》)。 在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间 的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现。开发者们想出了种种办法来解决这个问 题,大多数都是在用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)
一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片 断标识符(通常被称为锚点,即URL中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚 点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论。
进行Ajax开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应,没有恰当的预读数据,或者对XMLHttpRequest的不恰当处理,都会使用户感到延迟,这是用户不希望看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。早听说过Ajax大名(最起码我知道著堍的Gmail用它),一直没理会过它,最近因为工作的原因开始接了Ajax,用过之后感觉比较好玩,其实是它能非常轻松的实现页面的友好.
我的程序,先是一些功能需求才用到它,到现在几乎能用Ajax实现的都用它来实现了(但是也不会强致让其它程序用它).
wiki讲Ajax特性已经比较专业了,我就写个简单的实例吧:
/**
*初始化一个xmlhttp对象
*/
function InitObj(){
var ajax=false;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
return ajax;
}
我对上面的程序没有深入去研究,如果谁愿意可以研究一下.
下面写一个接收表单的程序(PHP我比较熟,而且语法简单):
<?PHP
/** com_str.php
* 比较表单提交过来的两个字符串是否相同,如果相同输出 1,否则输出0
*/
$str1 = $_POST['str1']; //表单名为str1的Post值
$str2 = $_POST['str2']; //表单名为str2的Post值
if($str1 == $str2) echo "1";
else echo "0";
?>
接下来的是我们最主要的内容,也就是使用JS与逻辑页面的交互:
<script language="javascript">
function comStr(str1, str2)
{
var ajax = InitObj();
var postStr = "str1="+str1+"&str2"+str2;
ajax.open("POST", "/com_str.php", true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(postStr);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
returnVal = ajax.responseText;
if(returnVal) alert("Two string is the same."); //两个值一样
else alert("Not the same."); //两个值不一样
}
}
}
</script>
<input type="text" name="str1" id="str1" value="asdf">
<input type="text" name="str2" id="str2" value="asdf1">
<inpu type="button" value="对比" onClick="javascript: comStr(getElementById('str1').value, getElementById('str2').value);">
