XMLHttpRequest Level 2 使用指南

paulwong — Fri, 07 Aug 2015 04:24:00 GMT

分��n按钮

作者：阮一�?/a>

日期�Q?nbsp;2012�q?�?8�?/a>

XMLHttpRequest是一个浏览器接口�Q��得Javascript可以�q�行HTTP(S)通信�?/p>

最早，微��Y在IE 5引进了这个接口。因为它太有用，其他��览器也模仿部��v了，ajax操作因此得以诞生�?/p>

但是�Q�这个接口一直没有标准化�Q�每家浏览器的实现或多或��有点不同。HTML 5的概念�Ş成后�Q�W3C开始考虑标准化这个接口�?008�q?月，��提��Z��XMLHttpRequest Level 2 草案�?/p>

�q�个XMLHttpRequest的新版本�Q�提��Z��很多有用的新功能�Q�将大大推动互联�|�革新。本文就对这个新版本�q�行详细介绍�?/p>

一、老版本的XMLHttpRequest对象

在介�l�新版本之前�Q�我们先回顾一下老版本的用法�?/p>

首先�Q�新��Z��个XMLHttpRequest的实例�?/p>

　　var xhr = new XMLHttpRequest();

然后�Q�向�q�程��L��发出一个HTTP��h��?/p>

　　xhr.open('GET', 'example.php');
　　xhr.send();

接着�Q�就�{�待�q�程��L��做出回应。这旉��要监控XMLHttpRequest对象的状态变化，指定回调函数�?/p>

　　xhr.onreadystatechange = function(){
　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
　　　　　　alert( xhr.responseText );
　　　　} else {
　　　　　　alert( xhr.statusText );
　　　　}
　　};

上面的代码包含了老版本XMLHttpRequest对象的主要属性：

　　* xhr.readyState�Q�XMLHttpRequest对象的状态，�{�于4表示数据已经接收完毕�?/p>
　　* xhr.status�Q�服务器�q�回的状态码�Q�等�?00表示一切正常�?/p>
　　* xhr.responseText�Q�服务器�q�回的文本数�?/p>
　　* xhr.responseXML�Q�服务器�q�回的XML格式的数�?/p>
　　* xhr.statusText�Q�服务器�q�回的状态文本�?/p>

二、老版本的�~�点

老版本的XMLHttpRequest对象有以下几个缺点：

　　* 只支持文本数据的传送，无法用来��d��和上传二�q�制文�g�?/p>
　　* 传送和接收数据�Ӟ��没有�q�度信息�Q�只能提�C�有没有完成�?/p>
　　* 受到"同域限制"�Q�Same Origin Policy�Q�，只能向同一域名的服务器��h��数据�?/p>

三、新版本的功�?/span>

新版本的XMLHttpRequest对象�Q�针对老版本的�~�点�Q�做��Z��大幅改进�?/p>

　　* 可以讄��HTTP��h��的时限�?/p>
　　* 可以使用FormData对象��理表单数据�?/p>
　　* 可以上传文�g�?/p>
　　* 可以��h��不同域名下的数据�Q�跨域请求）�?/p>
　　* 可以获取服务器端的二�q�制数据�?/p>
　　* 可以获得数据传输的进度信息�?/p>

下面�Q�我��׃��一介绍�q�些新功能�?/p>

四、HTTP��h��的时�?/span>

有时�Q�ajax操作很耗时�Q�而且无法预知要花多少旉��。如果网速很慢，用户可能要等很久�?/p>

新版本的XMLHttpRequest对象�Q�增加了timeout属性，可以讄��HTTP��h��的时限�?/p>

　　xhr.timeout = 3000;

上面的语句，��最长等待时间设�?000毫秒。过了这个时限，��p��动停止HTTP��h��。与之配套的�q�有一个timeout事�g�Q�用来指定回调函数�?/p>

　　xhr.ontimeout = function(event){
　　　　alert('��h��时�Q?);
　　}

目前�Q�Opera、Firefox和IE 10支持该属性，IE 8和IE 9的这个属性属于XDomainRequest对象�Q�而Chrome和Safari�q�不支持�?/p>

五、FormData对象

ajax操作往往用来传递表单数据。�ؓ了方便表单处理，HTML 5新增了一个FormData对象�Q�可以模拟表单�?/p>

首先�Q�新��Z��个FormData对象�?/p>

　　var formData = new FormData();

然后�Q��ؓ它添加表单项�?/p>

　　formData.append('username', '张三');
　　formData.append('id', 123456);

最后，直接传送这个FormData对象。这与提交网��表单的效果�Q�完全一栗��?/p>

　　xhr.send(formData);

FormData对象也可以用来获取网��表单的倹{�?/p>

　　var form = document.getElementById('myform');
　　var formData = new FormData(form);
　　formData.append('secret', '123456'); // ��d��一个表单项
　　xhr.open('POST', form.action);
　　xhr.send(formData);

六、上传文�?/span>

新版XMLHttpRequest对象�Q�不仅可以发送文本信息，�q�可以上传文件�?/p>

假定files是一�?选择文�g"的表单元素（input[type="file"]�Q�，我们��它装入FormData对象�?/p>

　　var formData = new FormData();
　　for (var i = 0; i < files.length;i++) {
　　　　formData.append('files[]', files[i]);
　　}

然后�Q�发送这个FormData对象�?/p>

　　xhr.send(formData);

七、跨域资源共享（CORS�Q?/span>

新版本的XMLHttpRequest对象�Q�可以向不同域名的服务器发出HTTP��h��。这叫做"跨域资源�׃�n"�Q�Cross-origin resource sharing�Q�简�U�CORS�Q��?/p>

使用"跨域资源�׃�n"的前提，是浏览器必须支持�q�个功能�Q�而且服务器端必须同意�q�种"跨域"。如果能够满��上面的条�g�Q�则代码的写法与不跨域的��h��完全一栗��?/p>

　　xhr.open('GET', 'http://other.server/and/path/to/script');

目前�Q�除了IE 8和IE 9�Q�主��浏览器都支持CORS�Q�IE 10也将支持�q�个功能。服务器端的讄��Q�请参�?a target="_blank" style="margin: 0px; padding: 0px; list-style-type: none; border: none; color: #112233;">《Server-Side Access Control�?/a>�?/p>

八、接收二�q�制数据�Q�方法A�Q�改写MIMEType�Q?/span>

老版本的XMLHttpRequest对象�Q�只能从服务器取回文本数据（否则它的名字��׃��用XML起首了）�Q�新版则可以取回二进制数据�?/p>

�q�里又分成两�U�做法。较老的做法是改写数据的MIMEType�Q�将服务器返回的二进制数据伪装成文本数据�Q��ƈ且告诉浏览器�q�是用户自定义的字符集�?/p>

　　xhr.overrideMimeType("text/plain; charset=x-user-defined");

然后�Q�用responseText属性接收服务器�q�回的二�q�制数据�?/p>

　　var binStr = xhr.responseText;

�׃��q�时�Q�浏览器把它当做文本数据�Q�所以还必须再一个个字节地还原成二进制数据�?/p>

　　for (var i = 0, len = binStr.length; i < len; ++i) {
　　　　var c = binStr.charCodeAt(i);
　　　　var byte = c & 0xff;
　　}

最后一行的位运��?c & 0xff"�Q�表�C�在每个字符的两个字节之中，只保留后一个字节，��前一个字节扔掉。原因是��览器解��d��W�的时候，会把字符自动解读成Unicode�?xF700-0xF7ff区段�?/p>

八、接收二�q�制数据�Q�方法B�Q�responseType属性）

从服务器取回二进制数据，较新的方法是使用新增的responseType属性。如果服务器�q�回文本数据�Q�这个属性的值是"TEXT"�Q�这是默认倹{��较新的��览器还支持其他��|��也就是说�Q�可以接收其他格式的数据�?/p>

你可以把responseType设�ؓblob�Q�表�C�服务器传回的是二进制对象�?/p>

　　var xhr = new XMLHttpRequest();
　　xhr.open('GET', '/path/to/image.png');
　　xhr.responseType = 'blob';

接收数据的时候，用浏览器自带的Blob对象卛_��?/p>

　　var blob = new Blob([xhr.response], {type: 'image/png'});

注意�Q�是��d��xhr.response�Q�而不是xhr.responseText�?/p>

你还可以��responseType设�ؓarraybuffer�Q�把二进制数据装在一个数�l�里�?/p>

　　var xhr = new XMLHttpRequest();
　　xhr.open('GET', '/path/to/image.png');
　　xhr.responseType = "arraybuffer";

接收数据的时候，需要遍历这个数�l��?/p>

　　var arrayBuffer = xhr.response;
　　if (arrayBuffer) {
　　　　var byteArray = new Uint8Array(arrayBuffer);
　　　　for (var i = 0; i < byteArray.byteLength; i++) {
　　　　　　// do something
　　　　}
　　}

更详�l�的讨论�Q�请�?a target="_blank" style="margin: 0px; padding: 0px; list-style-type: none; border: none; color: #112233;">Sending and Receiving Binary Data�?/p>

九、进度信�?/span>

新版本的XMLHttpRequest对象�Q�传送数据的时候，有一个progress事�g�Q�用来返回进度信息�?/p>

它分成上传和下蝲两种情况。下载的progress事�g属于XMLHttpRequest对象�Q�上传的progress事�g属于XMLHttpRequest.upload对象�?/p>

我们先定义progress事�g的回调函数�?/p>

　　xhr.onprogress = updateProgress;
　　xhr.upload.onprogress = updateProgress;

然后�Q�在回调函数里面�Q��用这个事件的一些属性�?/p>

　　function updateProgress(event) {
　　　　if (event.lengthComputable) {
　　　　　　var percentComplete = event.loaded / event.total;
　　　　}
　　}

上面的代码中�Q�event.total是需要传输的��d��节，event.loaded是已�l�传输的字节。如果event.lengthComputable不�ؓ真，则event.total�{�于0�?/p>

与progress事�g相关的，�q�有其他五个事�g�Q�可以分别指定回调函敎ͼ�

　　* load事�g�Q�传输成功完成�?/p>
　　* abort事�g�Q�传输被用户取消�?/p>
　　* error事�g�Q�传输中出现错误�?/p>
　　* loadstart事�g�Q�传输开始�?/p>
　　* loadEnd事�g�Q�传输结束，但是不知道成功还是失败�?/p>

十、阅��L��?/span>

　　1. Introduction to XMLHttpRequest Level 2�Q?新功能的�l�合介绍�?/p>

　　2. New Tricks in XMLHttpRequest 2�Q�一些用法的介绍�?/p>

　　3. Using XMLHttpRequest�Q�一些高�U�用法，主要针对Firefox��览器�?/p>

　　4. HTTP Access Control�Q�CORS�l�D��?/p>

　　5. DOM access control using cross-origin resource sharing�Q�CORS�?�U�HTTP头信�?/p>

　　6. Server-Side Access Control�Q�服务器端CORS讄��?/p>

　　7. Enable CORS�Q�服务端CORS讄��?/p>

�Q�完�Q?/p>

paulwong 2015-08-07 12:24 发表评论

理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据�c�d��

paulwong — Fri, 07 Aug 2015 04:08:00 GMT

摘要: 一、XMLHttpRequest 2.0的家臣们我大学那会儿�Q�一个称为Ajax的东西对前端行业造成了深�q�媄响，不仅是JS语言�Q�而包括前端地位、职位兴起以及工作分工等。抛开IE6��览器不谈，其他��览器的Ajax实际上都是借助XMLHttpRequest实现的。然后，好多�q�过��M��Q�XMLHttpRequest带着两位家臣�Q�DOMString和Document数据�c�d��d��略地�Q�几乎一�l�天下。然时代是发�?.. 阅读全文

paulwong 2015-08-07 12:08 发表评论

AJAX下蝲+监控�q�度+保存文�g

paulwong — Thu, 06 Aug 2015 11:17:00 GMT

全程用AJAX下蝲文�g�Q��ƈ昄��下蝲�q�度�Q�之后保存文件�?br />
HTML5文�g�Q?br />

DOCTYPE html>
<html>
<head>
    <title>XMLHttpRequest Download Progresstitle>
head>
<body>
    <progress id="p">progress>
    <input type="button" onclick="downloadAndSave();" value="Download"/>
    <script>
        function downloadAndSave()
        {
            var progressBar = document.getElementById('p'), xhr = new XMLHttpRequest();
            xhr.open('GET', '2');
            xhr.responseType = "arraybuffer";
            xhr.onprogress = function(event) {
                if(event.lengthComputable) {
                    progressBar.max = event.total;
                    progressBar.value = event.loaded;
                }
            };
            xhr.onloadend = function(event) {
                progressBar.value = event.loaded;
                saveByeToFile('2', xhr.response);
            };
            xhr.send();
        }

        function saveByeToFile(name, arrayBuffer) {
            var byteArray = new Uint8Array(arrayBuffer);
            var a = window.document.createElement('a');

            a.href = window.URL.createObjectURL(new Blob([ byteArray ], {
                type : 'application/octet-stream'
            }));
            a.download = name;

            // Append anchor to body.
            document.body.appendChild(a)
            a.click();

            // Remove anchor from body
            document.body.removeChild(a)
        }
    script>
body>
<html>

paulwong 2015-08-06 19:17 发表评论

色婷婷亚洲十月十月色天,亚洲最新黄色网址,国产亚洲精品自在线观看

XMLHttpRequest Level 2 使用指南

理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据�c�d��

AJAX下蝲+监控�q�度+保存文�g

HTML5资源