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>

来自为知笔记(Wiz)