介绍:
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 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
三个重要属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
每当readyState改变时,就会触发onreadystatechange事件
readyState属性存有XMLHttpRequest的状态信息。
当readyState等于4且状态为200时,表示响应已就绪
status:响应状态码 比较常见的有:
· 200 “OK”
· 304 该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)。
· 403 (禁止) 服务器拒绝请求。
· 404 (未找到) 服务器找不到请求的网页。
· 408 (请求超时) 服务器等候请求时发生超时。
· 500 (服务器内部错误) 服务器遇到错误,无法完成请求。