以前，当我们点击了一个按钮，向服务器请求数据的时候，通常会有这么一个流程。浏览器向服务器发送Http请求→服务器返回整个页面→浏览器将原先的整个页面替换成新的页面。这样子做当然没有什么问题，但是比如在看土豆的视频的时候，想看一下下方的评论，不过瘾，想再看下一页的评论，这时候浏览器会向服务器发请求，要是正在看视频的时候整个页面重新加载，视频重加载一次，那简直不可饶恕。所以就产生了Ajax这种技术，用来进行页面的局部刷新，省的每次更新界面都得重新下载一个完整的界面。Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据，就像JavaScript版的WebClient一样，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会整个刷新了。
下面我们将用一个小例子来体验一下Ajax的神奇。我们将会做一个向服务器获取时间的小页面，这个东西将通过XmlHTTPRequest向服务器发送请求。
浏览器端的Ajax请求代码
<script type="text/javascript">
function btnClick() {
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象
if (!xmlHttp) { //判断xmlHttp对象是否创建成功
alert("创建xmlHttp对象异常!");
return false;
}
xmlHttp.open("POST", "GetDate.ashx?ts=" + encodeURI("哈哈"), false); //准备向服务器的GetDate发出post请求
//XMLHTTP默认（也推荐）不是同步请求的，也就是open方法并不等服务器响应数据才返回，而是监听服务器
//返回的数据，因此需要监听onreadystatechange事件。
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {//如果状态码为200则是成功
alert(xmlHttp.responseText);//responseText是服务器返回的文本
document.getElementById("Text1").value = xmlHttp.responseText;
}
else {
alert("Ajax服务器错误");
}
}
}
xmlHttp.send();
}
</script>
在这段代码中，我们做了一下几件事情：1、创建一个XmlHttpRequest对象用来处理Ajax请求。2、我们调用XmlHttpRequest.open()方法准备Ajax请求，传进去的参数主要是选择请求的方法和请求的URL。3、我们将XmlHttpRequest.onreadystatechange绑定上我们自己的处理函数，主要就是判断返回的消息是否正确，如果正确，那么从返回的消息中提取我们需要的信息并绑定到指定的控件上。4、向服务器发起请求。
其实这个过程有点像数据库的查询（执行）过程。数据库的查询要经历这么几个步骤，首先建立数据库的连接，通常是通过指定的数据库连接字符串进行数据库的匹配，再次就是进行查询操作，最后操作完成后对查询的结果进行处理。
服务器端代码
我们在Vs2010中创建一个WebApplication，并创建一个GetDate.Ashx来处理客户端的请求。
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace testAjax { /// <summary> /// GetDate 的摘要说明 /// </summary> public class GetDate : IHttpHandler { public void ProcessRequest(HttpContext context) { string time = context.Request["ts"]; context.Response.ContentType = "text/plain"; context.Response.Write(DateTime.Now.ToString() + time); } public bool IsReusable { get { return false; } } } }
这个一般处理程序其实就做一件事情，就是将服务器上面的时间发送给客户端。
补充说明：
1、前面我们定义了Ajax的同步请求，如果我们发送异步请求，那么在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态（即上文xmlHttp.readyState==4处的代码），当readyState = 4时，表示收到全部响应数据，属性值的定义如下：
| readyState值 |
描述 |
| 0 |
未初始化；尚未调用open()方法 |
| 1 |
启动；尚未调用send()方法 |
| 2 |
已发送；但尚未收到响应 |
| 3 |
接收；已经收到部分响应数据 |
| 4 |
完成；收到全部响应数据 |
2、在Ajax的状态发生改变的时候，我们除了需要判断请求的状态，还需要判断服务器返回的信息中的HTTP状态码，以便判断服务器是否正确地返回我们需要的数据。
参考链接
作者：kissazi2
出处：http://www.cnblogs.com/kissazi2/
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
转载：http://www.cnblogs.com/kissazi2/p/3294341.html
