使用ajax每次和服务器端进行异步操作时都要创建一个XmlHttpRequest对象实例,考虑跨域问题的处理等等。这样重复性的操作不但会加大工作量还会造成代码冗余,影响系统运行速度。基于面向对象的思想,我们可以将公共性的部分提取出来进行封装,在需要的地方直接调用即可,这样一来不但减少了工作量还提高了系统的性能。
下面是关于ajax中公共方法封装的AJAX.js文件
<span style="font-size:18px;">//创建XMLHttpRequest对象实例
var myXmlhttp = function () {
//初始化xmlhttp
xmlhttp = null;
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//IE7,IE8,FireFox,Mozilla,Opera...
xmlhttp = new XMLHttpRequest();
//alert(xmlhttp);
}
else if (window.ActiveXObject) {
//IE6,IE5...
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//alert(xmlhttp);
}
if (xmlhttp == undefined || xmlhttp == null) {
alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
}
}
//用户发送请求的方法封装
//定义方法send,对传入的method,url和回调函数callback的参数进行判断
myXmlhttp.prototype.send = function (method, url, data, callback, failback) {
//浏览器支持XMLHttpRequest对象
if (this.xmlhttp != undefined && this.xmlhttp != null) {
//将传入的方法名称转换为大写格式
method = method.toUperCase();
if (method != "GET" && method != "POST") {
alert("HTTP的请求方法必须是GET或POST");
return;
}
if (url == null || url == undefined) {
alert("HTTP的请求地址必须设置");
return;
}
var tempxmlhttp = this.xmlhttp;
tempxmlhttp.onreadystatechange = function () {
if (tempxmlhttp.readyState == 4) {//接收数据完成
if (tempxmlhttp.status == 200) {//正确返回数据
//服务器响应的文本内容
var responseText = tempxmlhttp.responseText;
//服务器响应的XML内容对应的DOM对象
var responseXML = tempxmlhttp.responseXML;
if (callback == undefined || callback == null) {
alert("没有设置处理数据正确返回后的方法");
alert("返回的数据:" + responseText);
}
else {
callback(responseText, responseXML);
}
} else {
if (failback == undefined || failback == null) {
alert("没有设置处理数据返回失败的处理方法!");
alert("HTTP的响应码:" + tempxmlhttp.status + "响应码的文本信息:" + tempxmlhttp.statusText);
} else {
failback(tempxmlhttp.status, tempxmlhttp.statusText)
}
}
}
}
//缓存处理方法封装
if (url.indexOf("?") >= 0) {
url = url + "&t=" + (new Date()).valueOf();
} else {
url = url + "?t=" + (new date()).valueOf();
}
//跨域问题方法封装
if (url.indexOf("http://") >= 0) {
url.replace("?", "&");
url = "Proxy?url=" + url;
}
this.xmlhttp.open(method, url, true);
//如果是POST方法,需要设置请求头
if (method == "POST") {
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www.form-urlencoded");
}
this.xmlhttp.send(data);
} else {
alert("XMLHttpRequest对象创建失败,无法发送数据!");
}
}
//HTTP放弃请求方法的封装
myXmlhttp.prototype.abort = function () {
this.xmlhttp.abort();
}</span>
对封装方法的调用
<span style="font-size:18px;">@{
ViewBag.Title = "panel";
}
<script src="../../Scripts/mytest/AJAX.js"></script>
<!document html>
<script>
function test() {
//利用XMLHttpRequest对象和服务器端进行交互
//调用封装好的方法
var xmlhttptest = new myXmlhttp();
xmlhttptest.send("GET", "TEST", "", callback, failback);
}
function callback(responseText, responseXML) {
//对回调函数的定义
}
function failback(status, statusText) {
//对返回数据失败后的处理
}
</script>
<html>
<head>
<link href="../../Css/easyui.css" rel="stylesheet" />
<link href="../../Css/icon.css" rel="stylesheet" />
</head>
</html></span>
这种抽象的思想我们每天都在用,一劳永逸。就像JQuery的宗旨一样:写的更少,做的更多。