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)