AJAX封装

最新推荐文章于 2024-10-13 20:39:16 发布

changpanzzp

最新推荐文章于 2024-10-13 20:39:16 发布

阅读量86

点赞数

分类专栏： ajax 文章标签：后端

本文链接：https://blog.csdn.net/changpnazzp/article/details/84508130

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通常使用原生的ajax对象访问后台，代码相对复杂，这里我封装了一个AJAX，代码如下：

base.js

//发送数据对象
var Command = function(actionName,methodName) {
	this.actionName =actionName;
	this.methodName = methodName;
};
//向后端获取数据
Command.prototype.execute = function(){
	var cmdObj = this;
	//申明ajax对象
	var xhr = null;
	var param ="";
	var url = this.actionName+"?method="+ this.methodName;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP.1.0");
	}
	xhr.open("POST",url,true);
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4 && xhr.status==200){
			if(cmdObj.success){
				var txt = xhr.responseText;
				//把数据传回给success方法处理
				cmdObj.success(txt); 
			}
		}
	};
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.send(param);
};

使用实例：

index.js

var pageObj = {};

//---------------------------------
//页面初始化方法
//---------------------------------
pageObj.pageInit  = function(){
	var cmd = new Command("indexAction","initPageContent");
	cmd.success = function(data){
		alert(data);
	};
	cmd.execute();
};

//---------------------------------
//页面加载完毕执行
//---------------------------------
$(document).ready(function() {
	pageObj.pageInit();
	
});