Ajax实现步骤和原理

1.获取ajax异步对象
IE4~IE12 : 使用new ActiveXObject(“microsoft.xmlhttp”);
非IE ： 使用new XMLHttpRequest();
2.ajax.open(method,url);
method是提交方式 有 get和post两种
url是提交路径
3.ajax.send()

4.ajax.onreadystatechange 这是一个监听函数

包括五种状态码：

0—ajax异步对象创建完毕，但是还未发送
1—ajax已经调用了open()方法，但是还未调用send()方法
2—已经调用send(),但是还未到达服务器端
3—表示请求已经到达服务端，正在服务端的处理，但是还未响应返回
4—ajax已经完全接收了服务器的响应信息，但是状态码未必是正确的
状态码有：
200：正确
404/500：错误

ps：
a.每个浏览器的0，1,2,3这四种状态显示的不一样，但是4这个状态码每个浏览器都有，所以我们只需要使用4即可
b. 0.1.2.3.4是ajax中的响应码，200/404/500是web中的状态码
5.ajax.readyState == 4

6.ajax.status == 200;
7.获取值 ajax.requestText或者ajax.requestXML

例1get：

    <script type="text/javascript">
    		//定位文本框，同时提供焦点失去事件
    		document.getElementById("usernameID").onblur = function(){
    			//获取文本框中输入的值
    			var username = this.value;
    			//如果用户没有填内容
    			if(username.length == 0){
    				//提示 
    				document.getElementById("resID").innerHTML = "用户名必填";
    			}else{
    				//对汉字进行UTF-8(U8)的编码
    				username = encodeURI(username);
    				//NO1)
    				var ajax = createAJAX();
    				//NO2)
    				var method = "GET";
    				var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
    				ajax.open(method,url);
    				//NO3)
    				ajax.send(null);
    				
    				//----------------------------------------等待
    				
    				//NO4)
    				ajax.onreadystatechange = function(){
    					if(ajax.readyState == 4){
    						if(ajax.status == 200){
    							//NO5)
    							var tip = ajax.responseText;
    							//NO6)
    							document.getElementById("resID").innerHTML = tip;
    						}
    					}
    				}
    			}
    		}
    	</script>

例2：post

    <script type="text/javascript">
    		document.getElementById("usernameID").onblur = function(){
    			var username = this.value;//杰克
    			//NO1)
    			var ajax = createAJAX();
    			//NO2)
    			var method = "POST";
    			var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
    			ajax.open(method,url);
    			//设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码
    			ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
    			//NO3)
    			var content = "username=" + username;
    			ajax.send(content);
    			
    			
    			//===========================================等待
    			
    			
    			//NO4)
    			ajax.onreadystatechange = function(){
    				if(ajax.readyState == 4){
    					if(ajax.status == 200){
    						//NO5)
    						var tip = ajax.responseText;
    					
    						//NO6)
    						//创建img标签
    						var imgElement = document.createElement("img");
    						//设置img标签的src/width/height的属性值
    						imgElement.src = tip;
    						imgElement.style.width = "12px";
    						imgElement.style.height = "12px";
    						//定位span标签
    						var spanElement = document.getElementById("resID");
    						//清空span标签中的内容
    						spanElement.innerHTML = "";
    						//将img标签加入到span标签中
    						spanElement.appendChild(imgElement);
    					}
    				}
    			}
    		}
    	</script>