ajax-jquery的使用

$(function(){
	$("button").click(function (ev1) {
		$.ajax({
			type: "get",
			url: "ajax-jquery.php",
			data: {
				"userName": "123",
				"userPwd": "abc"
			},
			timeout:3000,
			success: function (msg) {
				alert("Data Saved: " + msg);
			},
			error: function (msg) {
				alert(msg.status);
			}
		});
	})
});	

封装

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

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

window.onload = function (e) {
	var oBtn = document.querySelector("button");
	oBtn.onclick = function (ev1) {
		ajax({
			type: "get",
			url: "ajax-jquery.php",
			data: {
				"userName": "123",
				"userPwd": "abc"
			},
			timeout: 3000,
			success: function (msg) {
				alert(msg.responseText);
			},
			error: function (msg) {
				alert(msg.status);
			}
		});
	}
}