XMLHttpRequest和AJAX知识

AJAX概念

AJAX（Asynchronouse Javascript And Xml），浏览器使用JavaScript和服务器进行数据交互，是一种在无需重新加载整个网页的情况下，能够更新网页数据的技术。

AJAX步骤

1. 创建XMLHttpRequest对象 :

var xmlhttp=new XMLHttpRequest();
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

2. 配置XMLHttpRequest对象

xmlhttp.open("GET","/ajax.xhtml?page=1",true);

3. 发送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;
}

参考文献：https://www.kancloud.cn/dennis/tgjavascript/241825 （Ajax部分）