AJAX--XHR对象

介绍：

   XHR是XMLHttpRequest的简写，XMLHttpRequest用于在后台与服务器交换数据（在不重新加载整个网页的情况下，对网页的某部分进行更新）。

   现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

创建XHR对象

function createXmlHttp(){
var xmlhttp;  
if (window.XMLHttpRequest)  
  {// code for IE7+, Firefox, Chrome, Opera, Safari  
      xmlhttp=new XMLHttpRequest();  
  }  
else  
  {// code for IE6, IE5  
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
  }  
    return xmlhttp;
}

向服务器发送请求：

   需要将请求发送到服务器，使用XHR对象的open()和send()方法  

  function getList(p){ 
        // 1.创建异步交互对象
        var xhr = createXmlHttp();
        // 2.打开连接
        xhr.open("GET","${pageContext.request.contextPath}/hotpage?time="+new Date().getTime()+"&page="+p,true);
        // 3.发送
        xhr.send(null);
        // 4.设置监听
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    //SpringMVC返回的是一个对象，通过@Response转换成json字符串，
                    var pb =eval('('+xhr.responseText+')');
                    alert(pb.totalCount);
                }else{
                        alert("error");
                     }
            }
        }
     
    }

方法：
open(method,url,async)

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

•  无法使用缓存文件（更新服务器上的文件或数据库）
•  向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

三个重要属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

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

 

readyState属性存有XMLHttpRequest的状态信息。

当readyState等于4且状态为200时，表示响应已就绪

status：响应状态码 比较常见的有：

· 200  “OK” 
· 304  该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。 
· 403 （禁止） 服务器拒绝请求。 
· 404 （未找到） 服务器找不到请求的网页。 
· 408 （请求超时） 服务器等候请求时发生超时。 
· 500 （服务器内部错误） 服务器遇到错误，无法完成请求。

ajax详细教程