ajax-get的使用

1.创建一个异步对象
2.设置请求方式和请求地址
3.发送请求
4.监听状态的变化
5.处理返回的结果

<script>
	window.onload = function(e){
	var oBtn = document.querySelector("button");
	oBtn.onclick = function(ev1){
		// 1.创建一个异步对象
		var xmlhttp;
		if(window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		// 2.设置请求方式和请求地址
		xmlhttp.open("GET","ajax-get.php",true);
		// 3.发送请求
		xmlhttp.send();
		// 4.监听状态的变化
		xmlhttp.onreadystatechange = function (ev2) {
			// 判断是否响应就绪
			if(xmlhttp.readyState === 4){
				// 判断是否请求成功
				if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
					// 5.处理返回的结果
					console.log("接收到服务器返回的数据");
					alert(xmlhttp.responseText);
				} else{
					// 5.处理返回的结果
					console.log("没有接收到服务器返回的数据");
				}
			}	
		}	
	}
}
</script>

在IE浏览器中，如果通过AJAX发送get请求，同一个url只有一个结果。
地址没有变化，不能实时拿到文件当中变化的数据的。
Math.random();
new Date().getTime();
xmlhttp.open(“GET”,“ajax-get.txt?t=” + (new Date().getTime()),true);

封装

function objToStr(obj){
	obj.t = new Date().getTime();
	var res = [];
	for(var key in obj){
		// 在url中是不可以出现中文的，如果出现了中文需要转码
		// url中只能出现数字/字母/下划线/ASCLL码
		res.push(encodeURIComponent(key) + "=" +encodeURIComponent(obj[key]));
	}
	return res.join("&");
}

function ajax(url,obj,timeout,success,error) {
	// 0. 将对象转换成字符串
	var str = objToStr(obj);
	// 1.创建一个异步对象
	var xmlhttp,timer;
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// 2.设置请求方式和请求地址
	xmlhttp.open("GET",url+"?"+str, true);
	// 3.发送请求
	xmlhttp.send();
	// 4.监听状态的变化
	xmlhttp.onreadystatechange = function (ev2) {
		// 判断是否响应就绪
		if (xmlhttp.readyState === 4) {
			// 判断是否请求成功
			if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
				// 5.处理返回的结果
				success(xmlhttp);
			} else {
				// 5.处理返回的结果
				error(xmlhttp);
			}
		}
	}
	// 判读外界是否传入了超时时间
	if(timeout){
		timer = setInterval(function(){
			// console.log("中断请求");
			xmlhttp.abort();
			clearInterval(timer);
		}, timeout);
	}
}

<script>
window.onload = function(e){
	var oBtn = document.querySelector("button");
	oBtn.onclick = function(ev1){
		// url?key=value&key=value;
		ajax("ajax-get.php",{
			"userName":"123",
			"userPwd":"abc"
			},
			3000,
			function(xhr){
				alert(xhr.responseText);
			},
			function(xhr){
				alert("请求失败");
			});
	}
}
</script>