关于Ajax的由来，简单的说明一下，2005年2月，Adaptive Path公司的Jesse James Garrett
在他的“Ajax:A new Approach to Web Applications”一文中首次提出了Ajax的概念。Garrett将一种综合使用Javascript,XHTML和Css,DOM,XMLHttpRequest,XML和XSTL的技术称之为Ajax。由此我们可以知道Ajax并不是一项新的技术，只是多种技术的综合，或者说是设计方法。
那么Ajax有什么作用？一直以来，Web应用程序的交互效果都不如桌面应用程序，比如客户端的功能和用户体验效果，通俗的讲就是有很多用户都曾抱怨过WEB应用程序的”卡”，这点也让很多WEB应用程序开发人员和用户耿耿于怀。Grarett期待Ajax能消除WEB应用程序和桌面应用程序在系统人机交互和用户体验方面的差距，至少目前Google Suggest,Google Maps等产品已经让人们看到了胜利的曙光。Grarrett采用了Ajax(Asynchronous Javascript and XML，异步的Javascript 和 XML)这个名称。
Ajax的主要功能在于，将浏览器客户端和服务器端传统的同步交互通信方式改变为异步通信交 互方式，从而丰富了浏览器客户端功能，解决了浏览器频繁刷新页面等待数据舆的问题。使用Ajax就算不重新刷新页面，用户也可以快速的得到服务器端的数据！
好了，我还是先通过一个实例来了解Ajax。
<!-- authod:冯岩 date: 2007-03-04 00:02--><HTML> <HEAD> <TITLE> 一个简单的AJAX例子 </TITLE>
<script language="javascript">
//按扭“开始计算”响应函数，输入域情况后调用send_request函数 function doCaculate()
{
var f = document.form1; if((f.number_1.value != "") && (f.number_2.value != "")) { document.getElementById("freeback").innerHTML = "正在计算，请稍候……"; send_request("process.jsp?number_1=" + f.number_1.value + "&number_2=" + f.number_2.value);
} else if(f.number_1.value == "") document.getElementById("freeback").innerHTML = "乘数不能为空。"; else if(f.number_2.value == "") document.getElementById("freeback").innerHTML = "被乘数不能为空。"; } var http_request = false; //向服务器发出XMLHTTP请求 function send_request(url) { //初始化，指定处理函数，发送请求的函数 http_request = false; //开始初始化XMLHTTPRequest对象 try { http_request = new XMLHttpRequest(); } catch (e) { } if(!http_request) { //异常，创建对象实例失败 window.alert("不能创建XMLHttpRequest对象实例。"); return false; } http_request.onreadystatechange = processRequest; //确定发送请求的方式和URL以及是否同步执行下段代码 http_request.open("GET",url,true); http_request.send(null); } //处理返回信息的函数 function processRequest() { var f = document.form1; if(http_request.readyState == 4) { //信息已经返回，可以开始处理 //判断对象状态 if(http_request.status == 200) { //信息已经成功返回，开始处理信息 var returnStr = http_request.responseText; if(returnStr.indexOf("Error") == -1) { f.result.value = returnStr ; document.getElementById("freeback").innerHTML = "" ; } else { f.result.value = ""; document.getElementById("freeback").innerHTML= returnStr; } } else { //页面不正常 alert("你所请求的页面有异常"); } } else { //信息还没有返回，等待…… } }
</script> </HEAD> <BODY> <center> <form action = "process.jsp" method = "post" enctype = "application/x-www-form-urlencoded" name = "form1" target="_self"> <table width="400" cellpadding = "4" cellspacing="1" border = "0"> <caption>简单乘法计算(Ajax应用)</caption> <tr> <td align="center"> <input type = "text" name = "number_1" size = "10"/> * <input type = "text" name = "number_2" size = "10"/> = <input type = "text" name = "result" size = "10"/> </td> </tr> <tr align="center"> <td> <input type = "button" name = "Caculate" value="开始计算" onClick="doCaculate()"/> <input type = "reset" name= "reset" value="重新计算"/> </td> </tr> <tr><td align = "center" height = "25"> <label id = "freeback"> </label></td></tr> </table> </form> </center> </BODY></HTML><%@ page language="java" pageEncoding="GB2312"%><% String number_1 = request.getParameter("number_1"); String number_2 = request.getParameter("number_2"); int num_1 = 0, num_2 = 0; boolean status = true ; if(number_1 != null) { try { num_1 = Integer.parseInt(number_1); } catch(Exception ex) { status = false; out.println("Error,乘数必须是整数"); } } if(number_2 != null) { try { num_2 = Integer.parseInt(number_2); } catch(Exception ex) { status = false; out.println("Error,被乘数必须是整数。"); } } if(status) out.println(num_1*num_2);%>