前提

之前小编整理过关于AJAX的一些理论内容，其实在这些理论之后也做一些实战工作，可惜那时候的小编没有整理出来，随着项目结束，直到最近项目的使用，发现小编自己忘记怎么做了！！！惭愧啊，归根结底，理解不深，为了杜绝类似的情况，整理下，便于更加深入的理解，如有不对之处，恳请大家一定要不惜赐教啊！@H_301_7@

@H_301_7@

应用过程

1、创建xmlHttpRequest对象

为什么要创建？

XMLHttpRequest用于在后台于服务器交换数据。这意味着可以在不重新加载整个网页的前提下，对网页的部分内容刷新。而且现代浏览器都支持XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。@H_301_7@

function createXmlHttp(){
		var xmlHttp;
		if(window.ActiveXObject)//针对IE浏览器  
        {  
            try{  
                  xmlHttp = new ActiveXObject("Microsoft.XMLHttp");//针对IE高版本  
                }  
            catch(e){  
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对IE低版本  
                 }     
        }else if(window.XMLHttpRequest){ //针对非IE浏览器    
                    xmlHttp = new XMLHttpRequest();  
        }  
		return xmlHttp;
	}

2、配置XMLHttpRequest对象，向服务器发送请求

在配置过程中可以设置提交方式，提交地址，以及同异步提交@H_301_7@

xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。@H_301_7@

然而，在以下情况中，请使用 POST 请求：@H_301_7@

I、无法使用缓存文件（更新服务器上的文件或数据库）@H_301_7@

II、向服务器发送大量数据（POST 没有数据量限制）@H_301_7@

III、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠@H_301_7@

3、XMLHttpRequest服务器响应

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。@H_301_7@

每当readyState改变时，就会触发onreadystatechange事件。@H_301_7@

@H_301_7@

xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 ){
				if(xhr.status == 200 ){
					document.getElementById("span1").innerHTML = xhr.responseText;
				}
			}
		
		}

4、发送请求@H_301_7@

@H_301_7@

xhr.send(null);

完整Demo

	function checkUsername(){
		var username = document.getElementById("username").value;
		var xhr = createXmlHttp();//创建XMLHTTPRequest对象
		xhr.open("GET",true);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 ){
				if(xhr.status == 200 ){
					document.getElementById("span1").innerHTML = xhr.responseText;
				}
			}
		
		}xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 ){
				if(xhr.status == 200 ){
					document.getElementById("span1").innerHTML = xhr.responseText;
				}
			}
		
		}
		xhr.send(null);
	}
	
	function createXmlHttp(){
		var xmlHttp;
		if(window.ActiveXObject)//针对IE浏览器  
        {  
            try{  
                  xmlHttp = new ActiveXObject("Microsoft.XMLHttp");//针对IE高版本  
                }  
            catch(e){  
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对IE低版本  
                 }     
        }else if(window.XMLHttpRequest){ //针对非IE浏览器    
                    xmlHttp = new XMLHttpRequest();  
        }  
		return xmlHttp;
	}