一、白话Ajax的原理
    这个其实要从C/S和B/S的原理说起。Windows操作系统的诞生，为单机通信提供了很大的支持，程序设计也从DOS早期的单任务单用户向网络的分布式应用过度。C/S提供的客户/服务器编程模式为网络应用提供了一个有效的通信手段。浏览器与Web服务器之间的请求/ 服务，就是一个典型的C/S应用。
    有人说，怎么是C/S？这应该是B/S呀！其实是这样理解的：浏览器/Web服务器作为我们实现网页发布的一个平台，对于我们在这个平台上开发的应用，我们的应用是由浏览器从Web服务器上下载下来然后展示在浏览器的“容器”里的，我们的应用是B/S模式的。但是浏览器与Web服务器的通信，却是C/S模式的。可以说，B/S模式是建立在C/S模式之上的。
    Windows早期的桌面应用程序(包括单机程序和C/S结构的网络应用程序)，其界面是调用Windows的API来实现的，后来，出现了VB、Delph(VCL)、VC++(MFC)等应用程序框架，把繁杂的API包装起来，使Windows程序开发大大降低、效率大大提高。
    进入B/S编程阶段后，我们只需要面向Web服务器和浏览器编程，不需要考虑网络通信和并发等复杂的问题。但是在浏览器和Web服务器之间，为了进行数据交互，浏览器经常频繁的向Web服务器提交一些信息，现在的网络环境又极差，使我们经常等待于浏览器与Web服务器的通信状态，用户体验很差。而传统的桌面程序没有这个缺陷。
    怎样既能利用B/S程序极强的界面表现力，又能避免其提交后的那一段眩晕的“真空”状态呢？
    其实，在浏览器的设计阶段，设计师已经为我们考虑到了这个问题。这就是我们要说到的Ajax！Ajax英文是Asynchronous JavaScript and XML，就是在浏览器里通过一个机制，实现浏览器端与Web服务器端的一个异步通信，参与这个过程的有javascript、XML等技术。Ajax的引入，使B/S信息传递的量减少了，浏览器界面不再闪烁了，浏览者的感觉好多了。
    Ajax并不是一项新技术，而是几个现有技术的新组合，而且它的发展也得益于几家大的互联网企业的率先应用(大家常拿Google的在线Maps来举例)。连浏览器寡头微软当初都没怎么看得起这项技术，后来才在VS.NET2.0时代玩命的赶呀追。

    二、Ajax的实现
    Ajax是由浏览器通过内部的一个组件实现的，这个组件负责接收用户的请求，以XML作为信息中介，并与Web服务器实现异步通信，并把请求的结果返回给浏览器，再由浏览器呈现给用户界面。“异步”的意思就是组件在后台工作期间，浏览器与用户保持在交互状态，并不更新当前窗口。也不是所有的数据都被组件提交到后台去。
    Ajax实现的基础是：浏览器有一个Ajax引擎;浏览器支持Javascript;Web服务器端也支持XML数据格式。并不是所有浏览器都支持Ajax技术的，但支持Ajax的浏览器越来越多。
    这个组件在Windows下是一个COM组件，由IE浏览器调用。IE浏览器也是在5.0版本以后才提供这个组件的。不同的浏览器实现和创建XMLHttpRequest对象的方式是不太一样的。但作为一个通用的Ajax接口，其外在表现是一致的。
    Ajax其实是一项复杂的技术，牵扯到的东西很多。除过XMLHttpRequest对象和Javascript,还有DOM(文档对象模型)，XML等。Javascript是一个粘合剂，它通过XMLHttpRequest对象对浏览器端页面的诸多元素进行操控，实现与Web服务器的后台交互，实现数据验证、存取等功能。

    三、Ajax编程示例

    1，客户端(文件client.htm)
    

 
  
  1. <html> 
  2.     <head> 
  3.     <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> 
  4.     <title>AJAX 客户端</title> 
  5.     <script language=”javascript”> 
  6.      var xmlhttp = false;  
  7.      开始初始化XMLHttpRequest对象  
  8.       //这段代码考虑到了xmlhttp对象与目前主流浏览器的兼容  
  9.       //如果在IE浏览器下测试，一条  
  10.       //xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”)  
  11.       //或xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”)语句就可以了  
  12.      if(window.XMLHttpRequest)  
  13.      {  
  14.       //Mozilla 浏览器  
  15.       xmlhttp = new XMLHttpRequest();  
  16.       if (xmlhttp.overrideMimeType)  
  17.       {//设置MiME类别  
  18.        xmlhttp.overrideMimeType(’text/xml’);  
  19.       }  
  20.      }  
  21.      else  
  22.      if (window.ActiveXObject)  
  23.      {  
  24.       // IE浏览器  
  25.       try  
  26.       {  xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”); }  
  27.       catch (e)  
  28.       {  
  29.        try  
  30.        { xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”); }  
  31.        catch (e)  
  32.        { }  
  33.       }  
  34.      }  
  35.  
  36.      function send_request(url, data)  
  37.      {  
  38.       //初始化、指定处理函数、发送请求的函数  
  39.       if (!xmlhttp)  
  40.       { //异常，创建对象实例失败  
  41.        window.alert(”不能创建XMLHttpRequest对象实例.”);  
  42.        return false;  
  43.       }  
  44.  
  45.       // 确定发送请求的方式和URL以及是否同步执行下段代码  
  46.       xmlhttp.open(”POST”, url, true);  
  47.       xmlhttp.onreadystatechange = proce***equest;  //根据Web服务器应答，触发该状态改变事件  
  48.        xmlhttp.setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”);  
  49.       xmlhttp.send(”username=” + data);  //发送信息到后台程序  
  50.      }  
  51.  
  52.      状态改变事件处理函数：处理返回的信息  
  53.      function proce***equest()  
  54.      {  
  55.         if (xmlhttp.readyState == 4)  
  56.         { // 判断对象状态  
  57.           if (xmlhttp.status == 200)  //正常返回信息，状态编号200  
  58.           { // 信息已经成功返回，开始处理信息  
  59.             alert(xmlhttp.responseText);  
  60.           }  
  61.           else  
  62.           { //页面不正常  
  63.             alert(”您所请求的页面有异常。”);  
  64.           }  
  65.         }  
  66.      }  
  67.  
  68.      function userCheck()  
  69.      {  
  70.       var f = document.form1;  
  71.       var username = f.username.value;  
  72.       if(username==”")  
  73.       {  
  74.        window.alert(”用户名不能为空。”);  
  75.        f.username.focus();  
  76.        return false;  
  77.       }  
  78.       else  
  79.       {  
  80.           //该语句由用户按“唯一性检查”按钮后执行  
  81.           send_request(’server.php’, username);  
  82.         }  
  83.      }  
  84.     </script> 
  85.  
  86.     </head> 
  87.  
  88.     <body> 
  89.     <body> 
  90.       <form name=”form1″ action=”" method=”post”> 
  91.       用户名：<input type=”text” name=”username” value=”">   
  92.       <input type=”button” name=”check” value=”惟一性检查” onClick=”userCheck()”> 
  93.       <input type=”submit” name=”submit” value=”提交”> 
  94.       </form> 
  95.     </body> 
  96.     </html> 
  97.  
  98.     2，Web服务器端(文件server.php)  
  99.     <?php 
  100.     //取得客户端数据  
  101.     $username = $_POST[”username”];  
  102.  
  103.     //判断用户名的惟一性  
  104.     if( $username==”网眼”)  //实际工程中，这里一般是从数据库取用户名的值  
  105.     {  
  106.      printf(”用户名“%s”已经被注册，请更换一个用户名”, $username);  
  107.     }  
  108.     else  
  109.     {  
  110.       printf(”用户名“%s”尚未被使用，您可以继续”, $username);  
  111.     }  
  112.     ?> 
  113.  
 
  
    在以上Client.htm代码中，首先建立XMLHttpRequest对象实例，然后很据对象的状态触发事件处理函数，对返回的信息进行处理。一切控制逻辑都是用Javascript脚本来书写的，XMLHttpRequest对象与Web服务器的XML信息交换对我们是隐含的，我们不必关心。
 
  
    这是一个最原始的Ajax编程框架，它能简单的处理一些少量数据。经过代码重构，完全可以用在我们自己的小型工程中。
 
  
    注意Ajax本身是一种浏览器端技术，它和Web服务器端采用什么脚本书写代码是没有关系的。比如我们把Client.htm的语句send_request(’server.php’, username)换为send_request(’server.asp’, username)，再相对应的建立server.asp文件，内容为：
 
  
    <%
     dim username
     username = request(”username”)
 
  
    if username=”Thomas” then
      response.write(”用户名” & username & “已经被注册，请更换一个用户名”)
     else
      response.write(”用户名” & username & “尚未被使用，您可以继续”)
     end if
     %>
     做了这样的改变后，在浏览器端，用户看到的效果是一模一样的。