XHR简介及基本使用

XHR简介

XHR是XMLHttpRequest 的简写
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。XHR接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL，浏览器格式化请求并管理每个连接的完整生命周期，所以XHR仅仅允许应用自定义一些HTTP首部，但更多的首部是不能自己设定的，如：

Accept-Charset, Accept-Encoding, Access-Control-*
Host, Upgrade, Connection, Referer, Origin
Cookie, Sec-, Proxy-, 及其他首部
浏览器会拒绝绝对不安全的首部重写，以保证应用不能假扮用户代理、用户或请求来源，如Origin由浏览器自动设置，Access-Control-Allow-Origin由服务器设置，如果接受该请求，不包含该字段即可，浏览器发出的请求将作废。
CORS请求会省略cookie和HTTP认证等用户凭据；
客户端被限制只能发送“简单的跨域请求”，包括只能使用GET POSD HEAD三种方式，只能访问通过XHR发送并读取的HTTP首部。

创建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");
                     }
            }
        }
     
    }

GET 和POST区别？
GET比POST 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 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：响应状态码 比较常见的有：

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