ajax现在是一种非常流行的技术，现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能，但是明白其原理也是非常重要的，下面是来使用纯javascript实现获取服务器端的功能来展示如何使用纯javascript实现ajax功能，以弄清其原理.

在使用ajax技术时XMLHttpRequest是它的核心部分，就是利用javascript的XMLHttpRequest对象来实现ajax功能，以便给用户带来好的体验，其他的方法实现ajax功能也都是实现此功能，

下面是XMLHttpRequest几个常用的方法、属性：

open（）方法：用于向服务器发送一个请求，这个方法有3个参数，其中第一个参数发送请求的方式如“GET”或者“POST”，第二个参数是要请求的URL，第三个参数是表示是否以异步方式发出请求，若为true则表示是异步，否则为同步.

send()方法：只用这个方法才能正确的请求服务器页面。

onreadystatechange事件：紧跟其后是一个函数名或是一个匿名函数，发送请求以后XMLHttpRequest对象一直处于等待状态，直到服务器响应后激发onreadystatechange事件，紧跟其后的方法就是当XMLHttpRequest对象的onreadystatechange事件激发之后的客户端方法。

readyState属性：XMLHttpRequest对象的状态，当这个状态等于4时表示服务器正确的响应

responseText属性：表示服务器用于响应请求的html文本。

下面是具体实现的代码：

首先新建一个客户端页面：如就是默认首页“Default.aspx”，删除其前台的html代码

只保留如下代码：

 

 
  
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="javascript实现ajax版的获取服务器时间._Default" %> 
 
  
其后台代码如下：
 
  
 
 
  
 
  
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.  
  8. namespace javascript实现ajax版的获取服务器时间  
  9. {  
  10.     public partial class _Default : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.             //设置服务器上不缓存结果，保证每次都能获取到服务器上的时间  
  15.             Response.Cache.SetCacheability(HttpCacheability.NoCache);  
  16.             //获取返回时间格式  
  17.             string format=Request["format"];  
  18.             string dateFormat = string.Empty;  
  19.             if (!string.IsNullOrEmpty(format))  
  20.             {  
  21.                 format = format.ToLower();  
  22.                 switch (format)  
  23.                 {  
  24.                     case "yyyy-mm-dd": dateFormat = "yyyy-MM-dd"; break;  
  25.                     case "yyyy-mm-dd hh:mm:ss": dateFormat = "yyyy-MM-dd HH:mm:ss"; break;  
  26.                     case "mm-dd": dateFormat = "mm-dd"; break;  
  27.                     default: dateFormat = "yyyy-MM-dd HH:mm:ss"; break;  
  28.                 }  
  29.             }  
  30.             else 
  31.             {  
  32.                 dateFormat = "yyyy-MM-dd HH:mm:ss";  
  33.             }  
  34.             //返回按预定格式系统时间  
  35.             Response.Write(DateTime.Now.ToString(dateFormat));  
  36.         }  
  37.     }  
  38. }  
 
  
然后新建一个普通html页面代码如下
 
  
 
 
  
 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" > 
  3. <head> 
  4.     <title></title> 
  5.         <script type="text/javascript" language="javascript"> 
  6.          var request = false;  
  7.     //实现浏览器是否支持XMLHttpRequest的判定，这是一个通用方法  
  8.         function createXMLRequest() {  
  9.              
  10.             try {  
  11.                 request = new ActivexObject("Msxml2.XMLHTTP");  
  12.             }  
  13.             catch (e1) {  
  14.                 try {  
  15.                     request = new ActivexObject("Microsoft.XMLHTTP");  
  16.                 }  
  17.                 catch (e2) {  
  18.                     request = false;  
  19.                 }  
  20.             }  
  21.             if (!request && typeof XMLHttpRequest != 'undefined') {  
  22.                 request = new XMLHttpRequest();  
  23.             }  
  24.               
  25.         }  
  26.         //实现对时间的调用  
  27.         function getServerTime(format) {  
  28.             createXMLRequest();  
  29.             //对特殊字符进行转义  
  30.             var url = "Default.aspx?format=" + escape(format);  
  31.             //通过get方式发送request请求，true表示是异步请求  
  32.             request.open("GET", url, true);  
  33.             request.onreadystatechange = update;  
  34.             request.send(null);  
  35.         }  
  36.         function update() {  
  37.             if (request.readyState == 4) {  
  38.                  
  39.                 document.getElementById("time").innerHTML=request.responseText;  
  40.             }  
  41.         }  
  42.     </script> 
  43. </head> 
  44. <body> 
  45. <div> 
  46.     服务器时间:<div id="time"></div> 
  47.     <li><input type="button" value="完整时间" onclick="javascript:void getServerTime('yyyy-mm-dd hh:mm:ss')" /></li> 
  48.     <li><input type="button" value="年月日" onclick="javascript:void getServerTime('yyyy-mm-dd')" /></li> 
  49.     <li><input type="button" value="月日" onclick="javascript:void getServerTime('mm-dd')" /></li>    
  50.     </div> 
  51. </body> 
  52. </html> 
 
  
最后运行结果如下：
 
  
 
 
  
 
  
 
 
  
总结：
 
  
利用纯javascript实现ajax效果的主要步骤如下：
 
  
1、根据浏览器类型的不同实例化不同的XMLHttpRequest对象
 
  
2、利用XMLHttpRequest对象向服务器发出一个动态请求
 
  
3、编写XMLHttpRequest对象接收服务器的响应时要执行客户端代码，在客户端做一些设置来响应客户端操作
 
  
4、编写服务器方法，用于处理客户端请求并作出响应。
 
  
 
 
  
以上为用纯javascript实现ajax的方法，还会有用JQuery来实现ajax效果的文章，敬请关注....