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, data, isAyn, callback, errCallback) {
this.doAjax("post", url, data, isAyn, callback);
},
/*4.0 直接发送Get请求*/
doGet: function (url, data, isAyn, callback, errCallback) {
this.doAjax("get", url, data, isAyn, callback);
}
};