我们知道，传统的Web应用是request - response形式的，即浏览器向服务器发送请求，服务器进行处理，然后再对浏览器响应。
这种形式最大的缺点就是：客户端需要等服务器处理完之后，向它响应才能看到结果，在此期间，用户只能等待。
如果在网速很差的网络环境中，这是很很难忍受的。因此，AJAX技术应运而生。
AJAX允许客户端和服务器能进行异步的交互。
谈及AJAX，有个对象我们不得不提，那就是XMLHttpRequest，我们简称它为XHR。
该对象用来发起一个异步的请求。
在最老式的AJAX程序中，我们最标准的做法便是：通过JavaScript的XHR对象来发起一个异步的请求。
那么，传统的AJAX应用需要怎么做呢？
我的总结是5步法，如下：
1）创建XMLHttpRequest对象
2）注册回调函数
3）设置连接信息
4）发送数据
5）在回调函数中处理数据
下面我们来举个实际的例子，验证名字。
逻辑：名字不能为空，如果是david，则报存在，其余正确。
首先，我们建立一个aspx页面，如下：
<% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " simpleAjax.aspx.cs " Inherits = " BlogNet.AJAXDemo.simpleAjax " %> <! 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 runat ="server" > < title > AJAX的简单例子 </ title > < script type ="text/javascript" src ="../JS/simpleAjax.js" ></ script > </ head > < body > < form id ="form1" runat ="server" > < div > Please input user name to verify: < br /> < input type ="text" id ="userName" /> < input type ="button" value ="Verify" onclick ="verify()" /> < div id ="result" ></ div > </ div > </ form > </ body > </ html >
然后，我们定制我们自己的处理AJAX逻辑的js文件，simpleAjax.js,如下：
var xhr = null ; var READY_STATE_UNINTIALIZED = 0 ; var READY_STATE_LOADING = 1 ; var READY_STATE_LOADED = 2 ; var READY_STATE_INTERACTIVE = 3 ; var READY_STATE_COMPLETE = 4 ; function getXmlHttpRequest() { var req = null ; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); // Correct some browser's bugs if (req.overrideMimeType) { req.overrideMimeType( " text/xml " ); } } else if (window.ActiveXObject) { // IE 5.5 & IE6 var activexName = [ " MSXML2.XMLHTTP " , " Microsoft.XMLHTTP " ]; for ( var i = 0 ; i < activexName.length; i ++ ) { try { req = new ActiveXObject(activexName[i]); break ; } catch (e) { } } } return req;} function verify() { // *** 1. Create XMLHttpRequest Object *** xhr = getXmlHttpRequest(); if ( ! xhr) { alert( " Creating XMLHttpRequest Object Failed!! " ); return ; } else { // alert(xmlhttp.readyState); } // *** 2. Register Callback Function *** xhr.onreadystatechange = callback; // *** 3. Set Connection Information ************ // *** 1st param: http request type: get/post // *** 2nd param: url // *** 3rd param: true - asynchronoous // ********************************************** var userName = document.getElementById( " userName " ).value; var url = " simpleServer.ashx?name= " + userName; xhr.open( " GET " ,url, true ); // *** 4. Send Data *** xhr.send( null );} // Callback Function function callback() { // *** 5. Receive Response Data *** if (xhr.readyState == READY_STATE_COMPLETE) { // Judge Successful if (xhr.status == 200 ) { // Get Data Back From Server var responseText = xhr.responseText; // Show Data On Page var divNode = document.getElementById( " result " ); divNode.innerHTML = responseText; } else { alert( " AJAX Error! " ); } }}
接下来，便是服务端处理逻辑，以前ASP时候便是写在asp文件中，但是在ASP.NET中，如果你使用了aspx文件，
界面默认的HTML的UI会干扰我们的返回数据，导致结果不正确。因此，我们需要的是一个没有UI的服务端处理，
在ASP.NET中唯有HttpHandler才能胜任，其实学过J2EE的朋友一定知道，HttpHandler相当于J2EE中的Servlet。
下面我们建立一个ashx文件用以处理请求逻辑，如下：
using System; using System.Web; namespace BlogNet.AJAXDemo{ public class simpleServer : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = " text/plain " ; string name = context.Request[ " name " ].ToString(); if (name == "" ) { context.Response.Write( " 姓名不能为空! " ); } else if (name == " david " ) { context.Response.Write( " 该姓名已存在! " ); } else { context.Response.Write( " 恭喜:合法用户. " ); } } public bool IsReusable { get { return false ; } } }}
至此，整个逻辑就已经全部完成了！