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方法
原文链接:https://www.f2er.com/ajax/165018.html具体代码(获得服务器时间)
<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);
}
};