AJAX详解

 AJAX不是编程语言,而是一种使用现有标准的新方法。是与服务器交换数据在不重新加载页面并更新局部网页的技术。AJAX可以实现异步更新,当服务器的数据返回,用Javascript来更新DOM。
 在传统的网站开发中不使用AJAX,则必须重新加载整个页面来更新。浪费了很大的带宽,增加了服务器的压力.
 在实际开发中使用AJAX:
 xhr对象创建:
 var xhr=new XMLHttpRequest();在所有的现代浏览器上均支持XMLHttpRequest对象
 var xhr=new ActiveXObject('"Microsoft.XMLHTTP"');只支持低版本IE5,IE6浏览器
 xhr发送请求:在发送请求里AJAX提供了两个方法open(),send()两个方法。
 xhr.open(method,url,async);
 method请求的类型:post或get。url:请求的地址. async是同步(false)还是异步(true)
 send请求发送:GET或POST
 GET: var xhr=new XMLHttpRequest(); xhr.open("GET","0.php?name=X&age=1",true);  xhr.send();
 POST:  例如:
 application/x-www-form-urlencoded: 在发送前窗体数据被编码为名称/值对。这是标准的编码格式。使用setRequestHeader(header,value)
 var xhr=new XMLHttpRequest();
 xhr.open("POST","0.php",true);
 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xhr.send("name='X'&age='1'"); 该参数的数据只支持post请求
 xhr响应:
 responseText 返回字符串形式的响应数据。
 responseXML	返回 XML 形式的响应数据。
 xhr事件:
  onreadystatechange当readyState 属性改变时,就会触发该事件,该事件就会调callback函数
  readyState有(0请求未初始化,1服务器连接已建立,2请求已接收,3请求处理中,4请求已完成,且响应已就绪)5个状态
  status状态码:200为成功  404未找到
例如实际应用:
   xhr.onreadystatechange=function(){
       if (xhr.readyState==4 && xhr.status==200){
            alert(xhr.responseText);
       }
   }
XMLHttpRequest2.0是XHR的新版本,添加了一些新的属性和方法
   onabort()       请求停止       
   ontimeout()    请求超时   
   onerrror()       请求报错     
   onloadend()    请求结束     
   onloadstart()   在接收到响应数据的第一个字节时触发
   onprogress()   在接收响应期间持续不断地触
例如
<script>
     var xhr = new XMLHttpRequest();
     btn.onclick = function(){
         xhr.abort();
     }
     xhr.onabort = function(){
       console.log("请求已终止");
    }
    xhr.ontimeout = function(){
       console.log('请求超时');
    }
    xhr.timeout = 3000;
    xhr.onerror = function(){
     console.log("请求报错"); 
    }
    xhr.onloadend = function(){
    console.log("请求结束"); 
    }
</script>
posted on 2018-03-05 15:39  (代码小工)  阅读(136)  评论(0编辑  收藏  举报