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