写jQuery-ajax插件，XMLHttpRequest，支持回调，兼容ie、ff、360等浏览器
。kl 为命名空间
。使用必须有jquery.js
/*
*该插件用于异步调取数据
*readyState
*0：请求未初始化
*1：请求已经建立，但是还没有发送
*2：请求已发送，正在处理中
*3：请求在处理中
*4：响应已完成
*status
*401：未经授权
*403：禁止访问
*404：没找到访问页
*200：正常
*email pigkeli@qq.com
*/
jQuery.kl = {
ajax: function (options) {
var defaults = {
//发送方式 （可选 post、get）
method: "post",
//网址
url: "#",
//是否异步 （可选true、false）
async: true,
//用户名
user: null,
//密码
password: null,
//回调方法
callBack: function (data) {
//data 返回的数据
}
};
var o = jQuery.extend(defaults, options);
//method
if (o.method != "post" && o.method != "get") {
__log("'method' 参数无效. \r\n 应该为 'post' 或者 'get' .");
return;
}
//url
if (jQuery.trim(o.url) == "" || o.url == "#") {
__log("'url' 参数无效 .");
return;
}
//async
if (jQuery.trim(o.async) == "" || (o.async != true && o.async != false)) {
__log("'async' 参数无效. \r\n 应该为 true 或者 false .");
return;
}
//callBack
if (typeof (o.callBack) != "function") {
__log("'callBack' 参数无效. \r\n 应该为 'function' 支持传一个参数，该参数为返回的数据 .");
return;
}
var xhr = null;
//创建ajax
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xhr = new XMLHttpRequest();
} catch (e) {
__log("您的浏览器不支持ajax .");
return;
}
}
}
//状态改变回调函数
xhr.onreadystatechange = function () {
//响应已完成
if (xhr.readyState == 4) {
//成功
if (xhr.status == 200) {
//回调
o.callBack(xhr.responseText);
}
else {
//判断错误
switch (xhr.status) {
case 401:
__log("调用出错了. \r\n 错误原因:未经授权 .");
break;
case 403:
__log("调用出错了. \r\n 错误原因:禁止访问 .");
break;
case 404:
__log("调用出错了. \r\n 错误原因:没找到访问页 .");
break;
default:
__log("调用出错了. \r\n 错误原因:未知错误 .");
break;
}
}
}
};
//open
xhr.open(o.method, o.url, o.async, o.user, o.password);
//send
xhr.send(null);
}
};
/*
*向控制台输出错误
*/
function __log(text) {
if (window.console && window.console.log) {
window.console.log(text);
}
};
页面调用
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script src="jQuery.kl.ajax.js" type="text/javascript"></script>
<title>Jquery 插件 开发</title>
</head>
<body>
<form id="xhr" method="post" runat="server">
<p id="_xhr"></p>
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
$.kl.ajax({
method: "post",
url: "/Search.aspx?q=123",
async: true,
callBack: function (data) {
$("#_xhr").html(data);
}
});
});
</script>
上一篇： Vue学习之路6-条件渲染
下一篇： MySQL基本使用以及基本操作