JavaScript必备知识点之XMLHttpRequest请求

• XMLHttpRequest 对象用于在后台与服务器交换数据。
• 使用XMLHttpRequest能够:在不重新加载页面的情况下更新网页、在页面已加载后从服务器请求数据、在页面已加载后从服务器接收数据、在后台向服务器发送数据。

创建XMLHttpRequest对象：
xml = new XMLHttpRequest();

open()： 初始化请求，接收参数有请求的类型、URL、是否异步。
send(): 向服务器发送请求，参数为需要发送的数据。
onreadystatechange: on ready state change (当 准备 状态 改变)，它是一个函数，当XMLHttpRquest状态发送改变时会触发，状态（readyState）由0到4变化。

• 0：初始状态xhr对象刚创建完
• 1：连接到服务区
• 2：发送请求- 刚刚send完
• 3：接收完成- header接收完了
• 4：接收完成- body接收完了
  只有当readyState状态等于4的时候我们才认为一次请求完成了。

status: 服务器状态码。

• 2xx [200,300)区间请求成功。
  1）200：请求成功，正常响应
  2）201：请求已完成，新的资源创建
  3）202：已经接受请求，等待接受处理
  4）203：服务器已成功处理了请求，但返回的信息可能来自另一来源
  5）204：请求已被处理，但没有任何内容返回
  6）205：没有新的内容，但浏览器应该重置它所显示的内容
  7）206：服务器成功处理了部分 GET 请求
  8）207：XML消息，可以包含一系列独立的响应
  9）208：以前返回的结果
  10）226：请求已完成，响应是实例操作
• 3xx 重定向
  1）300：客户请求的文档可以在多个位置找到
  2）301：客户请求的文档已经被永久移动到其他地方
  3）302：客户请求的文档被临时移动到其他地方
  4）303：对应当前请求的响应可以在另一个URI上被找到
  5）304：请求资源从上次请求以来未被修改
  6）305：客户请求的文档应该通过指定的代理服务器提取
  7）307：请求的资源现在临时从不同的URI响应请求
  8）308：使用相同的方法再次连接到不同的uri

ajax1.0

btn.onclick = function(){
    var xhr = new XMLHttpRequest();
    xhr.open('get','1.php?a=12&b=6',true); // 异步
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            console.log(xhr.status)
            if((xhr.status>=200 && xhr.status<300)||xhr.status === 304){
                console.log(xhr.responseText)
            }
        }else{
            alert('error')
        }
    }
}

ajax2.0

FormData对象用以将数据编译成键值对，append()方法用来添加字段。一般写原生js请求的时候可以使用FormData上传文件。

• upload 上传过程
• onload 成功完成时触发
• onprogress 接收数据开始周期触发

btn.onclick = function(){
    var formData = new FormData();    // 容器
    formData.set('a',12);
    formData.set('b',1);
    formData.append('a',5)
    formData.set('fileName',idFile) // 文件

    var xhr = new XMLHttpRquest();

    xhr.upload.onload = function(){
        console.log('上传完成')
    }
    xhr.upload.onprogress = function(ev){   //进度变化
        console.log(ev.loaded, ev.total)
    }

    xhr.open('post','1.php?a=12&b=6',true); // post
    xhr.send(formData);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            console.log(xhr.status)
            if((xhr.status>=200 && xhr.status<300)||xhr.status === 304){
                console.log(xhr.responseText)
            }
        }else{
            alert('error')
        }
    }
}

<input type="file" name="fileName" id="XXX">