详解Ajax技术(三)

2014-11-23 22:59:00 · 作者: · 浏览: 1
; border:1px solid #ccc; background:#fff; font-size:14px; } #round .button { padding:5px 0; text-align:center; }
用户名:
密 码:

效果图 \ vcq9us1wb3N0t73Kvcfrx/PJ9dbBu7nT0LK/t9a0+sLrysfT0LrctPPH+LHwtcSjrMTH06bI57rOzai5/bT6wuu1xLe9yr3GwbHO1eLQqcf4sfDE2KOs1eLA787Sw8e3wtK7z8JqUXVlcnkgtcQkLmFqYXgoKSC3vbeooaMKPHByZSBjbGFzcz0="brush:java;">//封装ajax function ajax(obj) { var xhr = creatXmlHttpRequest(); obj.url = obj.url + ' rand=' + Math.random(); obj.data = params(obj.data); if (obj.method === 'get') obj.url += obj.url.indexOf(' ') == -1 ' ' + obj.data : '&' + obj.data; if (obj.async === true) { xhr.onreadystatechange = function () { if (xhr.readyState == 4) { callback(); } }; } xhr.open(obj.method, obj.url, obj.async); if (obj.method === 'post') { xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(obj.data); } else { xhr.send(null); } if (obj.async === false) { callback(); } function callback() { if (xhr.status == 200) { obj.success(xhr.responseText); //回调传递参数 } else { alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText); } } }
//名值对转换为字符串
function params(data) {
	var arr = [];
	for (var i in data) {
		arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
	}
	return arr.join('&');
}

调用我们封装的ajax方法
window.onload = function(){
	document.getElementById("username").onchange = function(){
		ajax({
			method : 'post',
			url : 'checkuserByJSON.jsp',
			data : {
				'username' : document.rgform.username.value,
				'password' : document.rgform.password.value
			},
			success : function (text) {
					var _ret = eva l('(' + text + ')'); 
					document.getElementById("msg").innerHTML = _ret.tip;
			},
			async : true
		});
	}
}

我们给ajax传的就是一个object对象,是不是已经很贴近jQuery的方式了呢。