现在的位置: 首页 > web前端 > 正文

封装ajax

2017年07月10日 web前端 ⁄ 共 1919字 ⁄ 字号 评论关闭

模仿jQuery中ajax的功能。自己封装了一个简单的ajax实现函数。用来练手的,里面没有考虑安全性问题。

ajax.js

/**
* Date 2012-11-3
* 
*/
function ajax(options){
	/**
	*创建xmlHttpRequest对象
	*对于不同的浏览创建xmlHttpRequest的对象所使用的方法不同
	*
	*/
	var xmlHttp=null;
	if(typeof(xmlHttp)=="undefined" || xmlHttp==null){
		try{
			xmlHttp = new XMLHttpRequest();
		}catch(e1){
			try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e2){
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
		}
	}
	
	/**  create END **/
	
	/**
	*属性参数,先写几个作为测试,以后会陆续增加
	*/
	var default_options={
		url:"",
		method:"GET",
		async:true,
		data:"",
		success:"",
	};
	/** 属性 END **/
	
	//判断请求中是否带有url参数,没有的话则不给处理
	if(typeof(options.url)=='undefined' || options.url==""){
		alert("调用ajax请求时,url不能为空!!");
		return;
	}
	//如果请求方式也没写的话,则使用默认的设置
	if(typeof(options.method)=='undefined' || options.method==""){
		options.method=default_options.method;
	}
	//请求模式为空使用默认设置,默认使用异步请求
	if(typeof(options.async)=='undefined' || options.async==""){
		options.async=default_options.async;
	}
	/**
	*请求参数,get方式与post方式请求发送参数的方式不同。如果是get方式直接
	*将参数连接到url后面
	*/
	if(options.method.toLowerCase()=="get"){
		if(typeof(options.data)!='undefined' && options.data!="" && options.data!=null){
			options.url+="?"+options.data;
		}
	}
	//连接服务器
	xmlHttp.open(options.method,options.url,options.async);
	
	//发送请求的数据 GET方式与post方式请求时传送参数的方式不同。分开对待
	if(options.method.toLowerCase()=="post"){
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send(options.data);
	}else{
		xmlHttp.send(null);
	}
	//异步请求状态发生改变时,执行的函数
	eval(options.success);
	xmlHttp.onreadystatechange=function(){
		//readyState==4请求已完成  status==200服务器响应完成
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
			//执行响应的结果
			eval(options.success(xmlHttp.responseText));
			xmlHttp=null;
		}
	}
}

测试代码Test.html

<html>
	<head>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript">
		function load(){
			/*createXmlHttpRequest();
			open("GET","ajax.php",false,"showResult()");
			*/
			ajax({
				url:"ajax.php",
				method:"POST",
				data:"username=M1&password=P1",
				success:function(msg){
					alert(msg);
				}
			});
			
		}
		
	</script>
	</head>
	<body onload="load();">
	</body>
</html>

【上篇】
【下篇】

抱歉!评论已关闭.