整理一个自己用的Ajax例子,封装,调用!
什么是Ajax?
也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
核心机制为:XMLHttpRequest
XMLHttpRequest属性:
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值,0—未初始化 1—正在加载 2—加载完毕 3—交互 4—完成。
JS:
function Ajax() {
var xmlHttpReq = null;
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
var handler = null;
this.invoke = function (url, mode, synchro, _handler) {
handler = _handler;
xmlHttpReq.open(mode, url, synchro);
xmlHttpReq.onreadystatechange = this.callback;
xmlHttpReq.send(null);
};
this.callback = function () {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
handler(xmlHttpReq.responseText);
} else {
alert("There was a problem retrieving the XML data:\n" + xmlHttpReq.statusText);
}
}
};
}
var xmlHttpReq = null;
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
var handler = null;
this.invoke = function (url, mode, synchro, _handler) {
handler = _handler;
xmlHttpReq.open(mode, url, synchro);
xmlHttpReq.onreadystatechange = this.callback;
xmlHttpReq.send(null);
};
this.callback = function () {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
handler(xmlHttpReq.responseText);
} else {
alert("There was a problem retrieving the XML data:\n" + xmlHttpReq.statusText);
}
}
};
}
调用方式:
var ajax = new Ajax();
ajax.invoke("http://www.xx.com/getlist.aspx?type=1&id=1","GET",true,function(response){
var json = eval("(" + response + ")");
});
ajax.invoke("http://www.xx.com/getlist.aspx?type=1&id=1","GET",true,function(response){
var json = eval("(" + response + ")");
});
Jquery方式:
//参数设置,设置的格式为key:value,如果{"cl":"check","dd":"dd"},获取的格式为cl=check&dd=dd
var params = $.param({"il":Math.random()});
//验证是否登录
$.ajax({
type:"POST",
url:"Control/Login.aspx",
data:encodeURI(params),
success:function(response){
var json = eval("("+response+")");
//操作JSON,json[0];json.Table[0].id;
}
});
//---------------
$.getJSON("Control/GetData.aspx",{t:Math.random()},function(json){
alert(json.ok);
if(json.ok==true){
alert(json.Table[0].ID);
}
});
//遍历JSON
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
var params = $.param({"il":Math.random()});
//验证是否登录
$.ajax({
type:"POST",
url:"Control/Login.aspx",
data:encodeURI(params),
success:function(response){
var json = eval("("+response+")");
//操作JSON,json[0];json.Table[0].id;
}
});
//---------------
$.getJSON("Control/GetData.aspx",{t:Math.random()},function(json){
alert(json.ok);
if(json.ok==true){
alert(json.Table[0].ID);
}
});
//遍历JSON
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
专注iOS、Golang开发。
技术博客:http://xiaopin.cnblogs.com
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用