学习Ajax小记

　　AJAX指异步的JavaScript和XML。AJAX是基于JavaScript和HTTP请求的。当初学习Java Web的时候，对于HTTP协议是下了一些功夫去学习的，基础的东西还是挺重要。闲话少说，赶紧进入正题。

　　XMLHttpRequest是AJAX的基础，所有现代浏览器均支持XMLHttpRequest对象，除了IE5和IE6使用ActiveXObject控件。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。好的，接下来看看如何使用纯的JavaScript来实现AJAX。

　　基于GET方式进行请求：

　　

var xmlHttpRequest = null;//声明一个null对象用于接收XMLHttpRequest对象
function ajaxSubmit()
{
	if (window.ActiveXObject)//IE5和IE6的实现
	{
		xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest)//IE7+, Firefox, Chrome, Opera, Safari的实现
	{
		xmlHttpRequest = new XMLHttpRequest();
	}
	if (null != xmlHttpRequest)
	{
		//当使用异步方式发送请求时，规定处于onreadystatechange事件内的就绪状态执行的函数
		xmlHttpRequest.onreadystatechange = function()
		{
			if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status)
			{
				document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
			}
		}
		xmlHttpRequest.open("GET", "../AjaxServlet", true);//规定请求的类型（这里是GET），请求的服务器资源，以及是否异步请求
		//为了得到的是缓存的结果，可向URL添加唯一的ID
		//xmlHttpRequest.open("GET", "../AjaxServlet?t=" + Math.random(), true);
		xmlHttpRequest.send(null);//然后向服务器发送数据
	}
}

 　　基于POST方式进行请求：

　　

var xmlHttpRequest = null;//声明一个null对象用于接收XMLHttpRequest对象
function ajaxSubmit()
{
	if (window.ActiveXObject)//IE5和IE6的实现
	{
		xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest)//IE7+, Firefox, Chrome, Opera, Safari的实现
	{
		xmlHttpRequest = new XMLHttpRequest();
	}
	if (null != xmlHttpRequest)
	{
		//当使用异步方式发送请求时，规定处于onreadystatechange事件内的就绪状态执行的函数
		xmlHttpRequest.onreadystatechange = function()
		{
			if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status)
			{
				document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
			}
		}
		//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
		//然后在 send() 方法中规定您希望发送的数据：
		xmlHttpRequest.open("POST","../AjaxServlet",true);
		xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttpRequest.send("fname=Bill&lname=Gates");
	}
}