Ajax：Asynchronous Javascript and XML， 异步的Javascript和XML技术。是指一种创建交互式网页应用的网页开发技术。它不是一种单一的技术，而是有机地利用一系列的相关技术的组合，即：Javascript + XMLHttpRequest + CSS + 服务器端 的集合。
Ajax的优点：
1.Ajax在本质上是一个浏览器端的技术
2.Ajax技术之主要目的在于局部交换客户端及服务器间之数据
3.这个技术的主角XMLHttpRequest的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refreshwithout Reload(轻刷新)
4.与服务器之间的沟通，完全是透过Javascript来实行
5.使用XMLHttpRequest本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
6.AJAX就是运用Javascript在后台悄悄帮你去跟服务器要资料，最后再由Javascript或DOM来帮你呈现结果，因为所有动作都是由Javascript代劳，所以省去了网页重载的麻烦， 使用者也感受不到等待的痛苦
异步请求基本步骤：使用XMLHttpRequest对象
按照下面模式，可以同步地XMLHttpRequest对象：
1.
创建对象；
-new(
叫助手过来
)
2.
创建请求；
-open (
告诉他要去做的事情
)
3.
发送请求；
-send (
去吧
)
下面是一个jsHelper类，条用Ajax方法
具体代码（获得服务器时间）
<script type="text/javascript">
window.onload = function () {
document.getElementById("btnGetTime").onclick = function () {
//向服务器请求 时间
//1.创建异步对象（小浏览器）
var xhr = new XMLHttpRequest();
//2.设置参数
xhr.open("get","GetTime.ashx?name=jameszou",true);
//3.让get请求不从浏览器获取缓存数据
xhr.setRequestHeader("If-Modified-Since","0");
//3.设置回调函数
xhr.onreadystatechange = function () {
//3.1当完全接收完响应报文后 并且 响应状态码为200的时候
if (xhr.readyState == 4 && xhr.status == 200)
{
//3.2获取相应报文体内容
var res = xhr.responseText;
alert(res);
}
};
//4.发送异步请求
xhr.send(null);
};
document.getElementById("btnPostTime").onclick = function () {
//向服务器请求 时间
//1.创建异步对象（小浏览器）
var xhr = new XMLHttpRequest();
//2.设置参数
xhr.open("post","GetTime.ashx",true);
//3.设置 请求 报文体 的 编码格式（设置为 表单默认编码格式）
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.设置回调函数
xhr.onreadystatechange = function () {
//3.1当完全接收完响应报文后 并且 响应状态码为200的时候
if (xhr.readyState == 4 && xhr.status == 200) {
//3.2获取相应报文体内容
var res = xhr.responseText;
alert(res);
}
};
//5.发送异步请求"name=jameszou"
//5.1格式：直接拼接字符串 key=value&key1=value2
xhr.send("name=jameszou&age=29");
};
};
</script>
<body>
<input type="button" id="btnGetTime" value="get获取服务器时间" />
<input type="button" id="btnPostTime" value="post获取服务器时间" />
</body>
一般处理程序GetTime.ashx代码：
public class GetTime : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//接收浏览器 ajax 方式发送来的 get 参数
string strName = context.Request.Params["name"];
//休息
System.Threading.Thread.Sleep(1000);
//输出响应报文
context.Response.Write(DateTime.Now.ToString() + ",name=" + strName);
}
public bool IsReusable
{
get
{
return false;
}
}
}
下面是一个jsHelper类，条用Ajax方法
var jsHelper = {
/*1.0 浏览器兼容的方式创建异步对象*/
makeXHR: function () {
//声明异步对象变量
var xmlHttp = false;
//声明 扩展 名
var xmlHttpObj = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","MSXML.XMLHttp"];
//判断浏览器是否支持 XMLHttpRequest，如果支持，则是新式浏览器，可以直接创建
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
//否则，只能循环 遍历 老式浏览器 异步对象名，一一尝试创建，直到创建成功为止
else if (window.ActiveXObject) {
for (i = 0; i < xmlHttpObj.length; i++) {
xmlHttp = new ActiveXObject(xmlHttpObj[i]);
if (xmlHttp) {
break;
}
}
}
//判断 异步对象 是否创建 成功，如果 成功，则返回异步对象，否则返回false
return xmlHttp ? xmlHttp : false;
},/*2.0 发送Ajax请求*/
doAjax: function (method,url,data,isAyn,callback,errCallback) {
method = method.toLowerCase();
//2.1创建异步对象
var xhr = this.makeXHR();
//2.2设置请求参数（如果是get，则带url参数，如果不是，则不带）
xhr.open(method,url + (method == "get" ? "?" + data : ""),isAyn);
//2.3根据请求谓词(get/post)，添加不同的请求头
if (method == "get") {
xhr.setRequestHeader("If-Modified-Since",0);
} else {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//2.4设置回调函数
xhr.onreadystatechange = function () {
//如果接受完毕 服务器发回的 响应报文
if (xhr.readyState == 4) {
//判断状态码是否正常
if (xhr.status == 200) {
//正常，则调用回调函数
callback(xhr);//当 异步对象调用 回调函数时，为回调函数 传入 xhr 对象
}
//如果不正常，则尝试调用 异常回调函数
else {
//如果 异常回调函数 存在，则调用，并传入 状态码
if (errCallback) {
errCallback(xhr.status);
}
//否则，直接提示 错误~！
else {
alert("错误啦~~状态码:" + xhr.status);
}
}
}
};
//2.5发送（如果是post，则传参数，否则不传）
xhr.send(method != "get" ? data : null);
},/*3.0 直接发送Post请求*/
doPost: function (url,errCallback) {
this.doAjax("post",callback);
},/*4.0 直接发送Get请求*/
doGet: function (url,errCallback) {
this.doAjax("get",callback);
}
};
