@H_502_1@
使用ajax每次和服务器端进行异步操作时都要创建一个XmlHttpRequest对象实例，考虑跨域问题的处理等等。这样重复性的操作不但会加大工作量还会造成代码冗余，影响系统运行速度。基于面向对象的思想，我们可以将公共性的部分提取出来进行封装，在需要的地方直接调用即可，这样一来不但减少了工作量还提高了系统的性能。
<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,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","",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的宗旨一样：写的更少，做的更多。
原文链接：https://www.f2er.com/ajax/163736.html