手写实现Ajax请求-优快云博客

执行ajax时一般需要6项配置
         *   请求类型
         *   url地址
         *   数据
         *   是否异步
         *   成功与失败的回调函数
         *   是否缓存<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EMS</title>
	<style type="text/css">
		#ems{
			position: absolute;
			left: 50%;
			width: 400px;
			height: auto;
			margin-left: -200px;
			background: lightGreen;
			text-align: center;
			min-height: 50px;
			height: 500px;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		#ems input{
			height: 25px;
			margin-top: 10px;
		}
		#list{
			background: lightBlue;
		}
		#list li{
			text-align: left;
		}
	</style>
	
</head>
<body>
<div id="ems">
	<div>
		<input type="text" id="code">
		<input type="button" value="查询" id="btn">
	</div>
	<div id="list">
	</div>
</div>
<script type="text/javascript">

		//创建ajax
		function ajax(data) {
			var xhr = null;
			try {
				xhr = new XMLHttpRequest();
			} catch (e) {
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			//第二步：准备发送前的一些配置参数
			//1.type
			var type = data.type == 'get'?'get':'post';
			//2.url
			var url = '';
			if (data.url) {
				url = data.url;
				if (type == 'get') {
					url += "?" + data.data + "&_t=" + new Date().getTime();
				}
			}
			//3.flag
			var flag = data.asyn == 'true' ? 'true' : 'false';

			xhr.open(type, url, flag);

			//第三步：执行发送的动作
//			xhr.send(null);
			if (type == 'get') {
				xhr.send(null);
			} else if (type == 'post') {
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.send(data.data);
			}


			//第四步：指定回调函数
			xhr.onreadystatechange = function () {
				
				if(this.readyState == 4){
					if(this.status == 200){
						if(typeof data.success == 'function'){
							var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
							data.success(d);
						}
					}else{
						if(typeof data.failure == 'function'){
							data.failure();
						}
					}
				}
			}
		}
		window.onload = function() {
			/*data = {
				data: "",
				dataType: "xml/json",
				type: "get/post",
				url: "",
				async: "true/false",
				success: function () {
				},
				failure: function () {
				}
			};*/

		var param={
			url:"00data.php",
			success:function(data){
				alert(data);
			},
			failure:function(){
				console.log("you wrong")
			},
			type:'get',
			dataType:'json'


		};
		ajax(param);

	}


		
		
		
		
		
		

				



</script>
</body>
</html>