关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest

系列文章

关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(三) ----- FormData
关于前端上传文件全面基础扫盲贴(四) ----- FileReader
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

XMLHttpRequest 对象(知识点主要来源于XMLHttpRequest)(已经熟悉的人也直接跳过这一章节吧)

XMLHttpRequest 对象用于在后台与服务器交换数据。您可以：
在不从新加载页面的状况下更新网页
在页面已加载后从服务器请求/接收数据
在后台向服务器发送数据
而且全部现代的浏览器都支持 XMLHttpRequest 对象。（简直程序员的梦想ヾ(≧O≦)〃嗷~）

一如既往先看兼容性

由于全部现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。建立 XMLHttpRequest 对象只须要这样

var xmlhttp=new XMLHttpRequest();

旧的浏览器也有办法拯救!!!

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // 括号里面的是ActiveX插件的名字.

客服端请求

open(string method, string url, boolean asynch, String username, string password):

参数	描述
Method	表示http请求方法，通常使用"GET","POST"
url	表示请求的服务器的地址
asynch	表示是否采用异步方法，true为异步表示脚本会在 send() 方法以后继续执行，而不等待来自服务器的响应。false为同步能够省去额外的 onreadystatechange 代码。若是在请求失败时是否执行其他的代码可有可无，那么可使用这个参数
username(能够不指定)	提供http认证机制须要的用户名
password(能够不指定)	提供http认证机制须要的密码

getRequestHeader(name)

获取指定的相应头部信息

setRequestHeader(name,value)

自定义HTTP头部信息。需在open()方法以后和send()以前调用，才能成功发送请求头部信息。

头部	描述
Accept	浏览器可以处理的媒体类型
Accept-Charset	浏览器申明本身接收的字符集
Accept-Encoding	浏览器申明本身接收的编码方法，一般指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate）
Host	客户端指定要请求的WEB服务器的域名/IP 地址和端口号
Referer	发出请求的页面的URI
Content-Type	标明发送或者接收的实体的MIME类型
X-Requested-With	非标准HTTP头，只为firefox3标注是否为ajax异步请求，null表示为同步请求

send(content)

向服务器发出请求，若是采用异步方式，该方法会当即返回。content能够指定为null表示不发送数据，其内容能够是DOM对象，输入流或字符串。

abort()

调用此方法可取消异步请求，调用后，XHR对象中止触发事件，不容许访问任何与响应相关的属性；

服务端响应

onreadystatechange事件

能够传递一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化. 事件使代码复杂化了。可是这是在没有获得服务器响应的状况下，防止代码中止的最安全的方法。

readyState状态

表示XMLHttpRequest对象的状态：

状态	描述
0	未初始化。对象已建立，未调用open
1	open方法成功调用，但send方法未调用
2	send方法已经调用，还没有开始接受数据
3	正在接受数据。Http响应头信息已经接受，但还没有接收完成
4	完成，即响应数据接受完成

status状态

表示服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。
总的来讲有几部分:

状态	描述
1xx	信息提示
2xx	成功
3xx	重定向
4xx	客户端错误
5xx	服务器错误

详情查阅请狠狠地点击服务器返回的各类HTTP状态码介绍

responseText信息

服务器响应的文本内容.

responseXML对象

服务器响应的XML内容对应的DOM对象.

statusText

服务器返回状态的文本信息。

responseBody（只有微软的IE支持）

将响应信息正文以unsigned byte数组形式返回(二进制数据).

responseStream（只有IE的某些版本支持）

以Ado Stream对象(二进制流)的形式返回响应信息.

getResponseHeader(name)

从响应信息中获取指定的http头.

getAllResponseHeaders

获取响应的全部http头.

overrideMimeType

一般用于重写服务器响应的MIME类型。
Eg，正常状况下XMLHttpRequest只接收文本数据，但咱们能够重写MIME为“text/plain; charset=x-user-defined”，以欺骗浏览器避免浏览器格式化服务器返回的数据，以实现接收二进制数据。

完整例子

下面基本跟来源教程同样,只是部分写法有点区别

var xmlhttp;

function loadXMLDoc(url) {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    } else {
        xmlhttp = null;
        alert('Your browser does not support XMLHTTP.');
    }

    if (xmlhttp) {
        xmlhttp.onreadystatechange = state_Change;
        xmlhttp.open('GET', url, true);
        xmlhttp.send(null);
    }

    //post
    /*if(xmlhttp) {
        xmlhttp.onreadystatechange = state_Change;
        xmlhttp.open(''POST'', url);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send(null);
    }*/
}

function state_Change() {
    if (xmlhttp.readyState === 4) { // 4 = "loaded"
        if (xmlhttp.status === 200) { // 200 = OK
            // ...our code here...
        } else {
            alert("Problem retrieving XML data");
        }
    }
}

看着挺强大,实际仍是有挺多缺点的,例如:

• 只支持文本数据的传送，没法用来读取和上传二进制文件。
• 传送和接收数据时，没有进度信息，只能提示有没有完成。
• 受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

因而后面就有了新版本.

XMLHttpRequest2 对象

新版本针对之前的缺点升级的新增功能主要有如下:

• 能够设置 HTTP 请求的时限。（部分浏览器兼容有问题）
• 可使用 FormData 对象管理表单数据。（后续文章会讲到）
• 下载和上载图像、视频和音频等二进制文件（无需使用插件）。（其实整个系列文章都是围绕这个需求才得出的）
• 能够请求不一样域名下的数据（跨域请求）。（前提是浏览器必须支持这个功能，并且服务器端必须赞成这种"跨域"。前端代码的写法与不跨域的请求彻底同样。）
• 能够获取服务器端的二进制数据。
• 能够得到数据传输的进度信息:

timeout

设置ajax请求超时时限，过了这个时限，就自动中止 HTTP 请求。

responseType

(默认：“text”)在发送请求前，根据您的数据须要，将xhr.responseType设置为“text”、“arraybuffer”、“blob”或“document”。（暂时不讲）

response: 响应

成功发送请求后，xhr的响应属性会包含DOMString、ArrayBuffer、Blob 或 Document 形式（具体取决于responseTyp的设置）的请求数据。

progress

传送数据的时候，用来返回进度信息。它分红上传和下载两种状况：

• 上传的progress事件属于XMLHttpRequest.upload对象
• 下载的progress事件属于XMLHttpRequest对象

里面有两个重要属性分别是

• total:须要传输的总字节，
• loaded:已经传输的字节。

(你们都应该猜到这就是实现进度条的东西了)

ontimeout事件

当ajax超过timeout 时限时触发的回调函数。

load事件：

传输成功完成。

error事件：

传输中出现错误。

loadstart()：

传输开始。

loadEnd()：

传输结束，可是不知道成功仍是失败。

修改版

还以上面的代码示例修改一下

var xmlhttp;

function loadXMLDoc(url) {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    } else {
        xmlhttp = null;
        alert('Your browser does not support XMLHTTP.');
    }

    if (xmlhttp) {
        xmlhttp.timeout = 3000;
        xmlhttp.ontimeout = time_Out;
        xmlhttp.onreadystatechange = state_Change;
        xmlhttp.upload.onprogress = load_Change;//未经测试
        xmlhttp.open('GET', url, true);
        xmlhttp.send(null);
    }
}

function time_Out() {
    alert('请求超时！');
}

function state_Change() {
    if (xmlhttp.readyState === 4) { // 4 = "loaded"
        if (xmlhttp.status === 200) { // 200 = OK
            // ...our code here...
        } else {
            alert("Problem retrieving XML data");
        }
    }
}

function load_Change(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        xx.value = percentComplete;
        xx.style.width = percentComplete + "%";
    }
}

实战须要后台代码配合,详情查阅请狠狠地点击关于XMLHttpRequest 对象

load_Change函数写着未经测试是须要传送后台返回数据才能拿到,我暂时没办法测试,只是给个思路给大家实现进度条,参考网上其余文章而后加进去的,有兴趣能够自行搜索,没兴趣就忽略吧,怕误人子弟就很差了(听说部分手机不支持),里面的evt通常是这样子的

详情查阅请狠狠地点击原生js上传文件 显示进度条

实话实说,这章看起来内容好少比较简单,其实你被误导了,是我写的简单了,实际有好多东西都没写出来,由于我也还在摸索没太搞懂,想作出一个完整实例须要后端配合能力,这是硬伤,我还没到这水平,就是让你们知道有这么一个东西,建议你们网上查看其它资料.