AJAX概念
AJAX（Asynchronouse Javascript And Xml），浏览器使用JavaScript和服务器进行数据交互，是一种在无需重新加载整个网页的情况下，能够更新网页数据的技术。
AJAX步骤
- 创建XMLHttpRequest对象 :
var xmlhttp=new XMLHttpRequest();
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- 配置XMLHttpRequest对象
xmlhttp.open("GET","/ajax.xhtml?page=1",true);
- 发送XMLHttpRequest对象
xmlhttp.send();
AJAX实例
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//在这里进行获得数据后的处理
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax.xhtml?page=1",true);
xmlhttp.send();
}
AJAX服务器状态码
//readyState
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
//status
200：服务器响应正常。
304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要意）。
400：无法找到请求的资源。
401：访问资源的权限不够。
403：没有权限访问资源。
404：需要访问的资源不存在。
405：需要访问的资源被禁止。
407：访问的资源需要代理身份验证。
414：请求的URL太长。
500：服务器内部错误。
XHR2的方法
除了使用readystatechange事件来探测HTTP请求的完成外，在XHR2中，还定义了多个有用的事件。
abort事件：当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。
error事件：由于错误导致资源无法加载时触发。
load事件：进度成功结束时触发。
loadstart事件：进度开始时触发。
loadend事件：进度停止时触发，发生顺序排在error事件\abort事件\load事件后面。
progress事件：当操作处于进度之中，由传输的数据块不断触发。
timeout事件：进度超过限时触发。
当调用send()时，触发单个loadstart事件。当正在加载服务器的响应时，XMLHttpRequest对象会发现progress事件，通常每隔50毫秒左右，可以使用这些事件给用户反馈请求的进度。当事件完成，会触发load事件。
HTTP请求无法完成有3种情况：
请求超时，会触发timeout事件
请求终止，会触发abort事件
请求发生错误，会触发error事件
注意：对于任何具体请求，浏览器将只会触发load、abort、timeout和error事件中的一个。一旦这些事件中的一个发生后，浏览器应该触发 loadend 事件。
//使用事件的两种方法
xhr.onload=function(){}
xhr.addEventListener('load',function(){})
关于上传
在XHR2中，也提供了用于监控HTTP请求上传的事件。在实现这些特性的浏览器中，XMLHttpRequest对象有一个upload属性，upload属性值是一个对象，它定义了addEventListener()方法和整个progress事件集合，比如onprogress和onload。
xhr.upload.onprogress = function(e){
var percentComplete = e.loaded / e.total;
}