Ajax技术小结

Ajax的英文全称为:Asynchronized JavaSccipt and XML，技术组成由JavaScript、DOM、CSS和XMLHttpRequest/ActiveXObj对象组成，其中
XMLHttpRequest为高版本浏览器对应的Ajax核心类对象，ActiveXObj为低版本浏览器对应的Ajax核心类对象。Ajax属于点上通讯，变动的只有
页面的部分，它本质有JS单开一个局部线程来进行操作，独立于整个页面系线程。

Ajax代码演示：

<span style="color:#33cc00;">function checkForPOST(obj){
		var xhr = null;
		//根据浏览器版本new一个核心内对象
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			xhr = new ActiveXObj("Microsoft.XMLHttp");
		}
		var url = "/ajaxWeb/LoginServlet";
		xhr.open("post",url,true);
		//写一个回调函数
		xhr.onreadystatechange = function(){
			//数据接收完毕
			if(xhr.readyState==4){		
				//服务器正常响应
				if(xhr.status==200)
					var txt = xhr.responseText;
					alert(txt);
					succ(txt);
				}
			};
		//注意：提交方式为post方式时，这句是必加的
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send("name="+obj.value);
		function succ(txt){
			div1.innerHTML = txt;
		}
}


function checkForGET(obj){
		var xhr = null;
		//根据浏览器版本new一个核心内对象
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			xhr = new ActiveXObj("Microsoft.XMLHttp");
		}
		var url = "/ajaxWeb/LoginServlet?name="+obj.value;
		xhr.open("get",url,true);//true代表异步方式(send之后不用等到ajax数据接收完成后才执行)
		//写一个回调函数
		xhr.onreadystatechange = function(){
			//数据接收完毕
			if(xhr.readyState==4){		
				//服务器正常响应
				if(xhr.status==200)
					var txt = xhr.responseText;
					alert(txt);
					succ(txt);
				}
			};
		};
		xhr.send(null);
		function succ(txt){
			div1.innerHTML = txt;
		}
}</span>

自制Ajax工具类(Ajax封装)代码演示：

function Ajax() {
	this.post = function(url, data, succ, failure) {
		var xhr = null;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObj("Microsoft.XMLHttp");
		}
		xhr.open("POST", url, true);
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				var txt = xhr.responseText;
				if (xhr.status == 200) {
					succ(txt);
				} else {
					failure(xhr.status);
				}
			}
		};
		xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xhr.send(data);
	};

	this.get = function(url, succ, failure) {
		var xhr = null;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObj("Microsoft.XMLHttp");
		}
		xhr.open("GET", url, true);
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				var txt = xhr.responseText;
				if (xhr.status == 200) {
					succ(txt);
				} else {
					failure(xhr.status);
				}
			}
		};
		xhr.send(null);
	};
}

调用:
function checkForGET(obj) {
	var ajax = new Ajax();
	var url = "/ajaxWeb/LoginServlet?name=" + obj.value;
	ajax.get(url, succ, failure);

}
function checkForPOST(obj) {
	var ajax = new Ajax();
	var url = "/ajaxWeb/LoginServlet?name=" + obj.value;
	var data = "name=" + obj.value;
	ajax.post(url, datat ,succ, failure);
}

function succ(txt) {
	div1.innerHTML = txt;
}
function failure(txt) {
	alert(txt);
}