一，开篇分析

Hi，大家好！大熊君又和大家见面了，(*^__^*) 嘻嘻……，这系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，

让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，好了，废话不多说，直接进入今天的主题，

今天主要讲的是“XMLHttpRequest Level 2 API”及在客户端浏览器中的作用，并且会引入一个实际的例子做为讲解的原型范例，让我们先来看看“XHR API”：

HTML5 世界中有这样一位无名英雄："XMLHttpRequest"。严格地说，XHR2 并不属于 HTML5。不过，它是浏览器供应商对于核心平台不断做出的改进中的一部分。

我之所以将" XHR2 "加入到"h5"系列中，就是因为它在如今复杂的网络应用中扮演了不可或缺的角色，引入了大量的新功能（例如跨源请求、上传进度事件以及对上传/下载二进制数据的支持等）。

　　　　　　

二，温故而知新

　　我们先来一个简单的回顾：

　　（1），XMLHttpRequest Level 1 对象创建

var xhr = new XMLHttpRequest() ;

　　（2），建立与Server主机的链接并且发出请求

xhr.open('GET', 'bb.jsp') ;

xhr.send() ;

　　（3），等待Server主机做出回应，监听XMLHttpRequest对象的状态变化，指定回调函数

xhr.onreadystatechange = function(){

    if( xhr.readyState == 4 && xhr.status == 200 ) {

　    alert( xhr.responseText ) ;

　}

    else{

　    alert( xhr.statusText ) ;

    }

} ;

　　

　总结一下：相对于新版本"XMLHttpRequest Level 2"来说有一些不足

　只支持文本数据的传送，无法用来读取和上传二进制文件。

　传送和接收数据时，没有进度信息，只能提示有没有完成。

　受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

　新版本的一些功能扩充：

　可以设置HTTP请求的时限。　

xhr.timeout = 3000 ;

xhr.ontimeout = function(event){

    alert('请求超时！');

} ;

　　（最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数。）

　　

可以使用FormData对象管理表单数据。（后面会有详细的介绍。）

　可以上传文件。（后面会有详细的介绍。）

　可以请求不同域名下的数据（跨域请求）。

　HTML 5 以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信，于是为了达到跨域通信的目的各种蛋疼的解决办法出现了，

常用的有：jsonp，使用代理文件，地址栏hash等等，这些办法的出现在达到解决跨域问题的同时，也增加了前端页面的性能开销和维护成本。

HTML5新的标准中，增加了” Cross-Origin Resource Sharing”特性，这个特性的出现使得跨域通信只需通过配置http协议头来即可解决。

　　（Cross-Origin Resource Sharing实现的最重要的一点就是对参数” Access-Control-Allow-Origin”的配置，即通过 次参数检查该跨域请求是否可以被通过。
如：Access-Control-Allow-Origin:http://a.com表示允许a.com下的域名跨域访问；
Access-Control-Allow-Origin:*表示允许所有的域名跨域访问。）

　　

　　如果需要读取读取cookie：
　　需要配置参数：Access-Control-Allow-Credentials:true
　　同时在xhr发起请求的时候设置参数withCredentials为true：
　　

　　　　

var xhr = new XMLHttpRequest() ;

xhr.open() ;

xhr.withCredentials = true ;  //这个放在xhr.open后面执行，否则有些浏览器部分版本会异常，导致设置无效。

　　以下为参考实例：

　　

　可以获取服务器端的二进制数据。

　　　老版本的XMLHttpRequest对象，只能从服务器取回文本数据，新版则可以取回二进制数据。分成两种做法。较老的做法是改写数据的MIMEType，

将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集。

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

　　新版本处理方式：

var xhr = new XMLHttpRequest() ;

xhr.open('GET', '/path/bb.png') ;

xhr.responseType = 'blob' ;

　　

可以获得数据传输的进度信息。

　　新版本的XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。

　　它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。

　　我们先定义progress事件的回调函数。

　　　　

xhr.onprogress = updateProgress ;

xhr.upload.onprogress = updateProgress ;

function updateProgress(event) {

    if (event.lengthComputable) {

　　　　　　var percentComplete = event.loaded / event.total ;

　 }

} ;

　　与progress事件相关的，还有其他五个事件，可以分别指定回调函数：

　　

    * load事件：传输成功完成。

　　* abort事件：传输被用户取消。

　　* error事件：传输中出现错误。

　　* loadstart事件：传输开始。

　　* loadEnd事件：传输结束，但是不知道成功还是失败。

　　

三，实例引入

　　

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8">

        <title>File Upload</title>

        <script src="jquery.min.js"></script>

    </head>

    <body>

        <form id="form">

            <input type="file" name="file" id="file" />

            <input type="text" name="name" id="" value="大熊君{{bb}}}}" />

            <input type="text" name="blog" id="" value="http://www.cnblogs.com/bigbearbb/" />

            <input type="submit" name="do" id="do" value="submit" />

        </form>

        <script>

        $("form").submit(function(e){

            e.preventDefault();

            //空对象然后添加

            var fd = new FormData();

            fd.append("name", "大熊君{{bb}}");

            fd.append("blog", "http://www.cnblogs.com/bigbearbb/");

            fd.append("file", document.getElementById("file"));

            //fd.append("file", $(":file")[0].files[0]); //jQuery 方式

            fd.append("do", "submit");

            //通过表单对象创建 FormData

            var fd = new FormData(document.getElementById("form"));

            //var fd = new FormData($("form:eq(0)")[0]); //jquery 方式

            //XMLHttpRequest 原生方式发送请求

            var xhr = new XMLHttpRequest();

            xhr.open("POST" ,"" , true);

            xhr.send(fd);

            xhr.onload = function(e) {

                if (this.status == 200) {

                   alert(this.responseText);

                };

            };

            return;

            //jQuery 方式发送请求

            $.ajax({

                type:"post",

                //url:"",

                data: fd,

                processData: false,

                contentType: false

            }).done(function(res){

                console.log(res);

            });

            return false;

        });

        </script>

    </body>

</html>

　　

　　

　　效果如下：

　　

　　

　　知识补充：”FormData“ 对象

　　　　初始化一个FormData对象

var oMyForm = new FormData();

oMyForm.append("username", "bigbear");

oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件

oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容

var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

　　　使用HTML表单来初始化一个FormData对象

var formElement = document.getElementById("myFormElement");

var oReq = new XMLHttpRequest();

oReq.open("POST", "submitform.php");

oReq.send(new FormData(formElement));

你还可以在已有表单数据的基础上,继续添加新的键值对,如下:

var formElement = document.getElementById("myFormElement");

formData = new FormData(formElement);

formData.append("nick","bb");

oReq.send(formData);

　

　　

（四），最后总结

　　（1），理解XMLHttpRequest Level 2 Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。

　　（2），XMLHttpRequest Level 2 与 之前老版本的不同之处在哪。

　　（3），熟练使用FormData对象，不断实践与重构文章中的栗子。

　　     　　　　　　　　　　　　哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)　　　　

大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）的更多相关文章

  1. 大熊君学习html5系列之------Online && Offline（在线状态检测）

    一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...

  2. 大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  3. 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  4. 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  5. 大熊君学习html5系列之------History API（SPA单页应用的必备）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  6. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ProcessBar）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  7. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  8. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  9. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了一个“Tab”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方 ...

随机推荐

  1. python 利用 setup.py 手动安装django_chartit

    手动安装django_chartit库 1 下载压缩包 2 解压到python安装目录下,文件夹名为django_chartit,并检查文件夹下是否有setup.py文件 3 在cmd中进入djang ...

  2. OpenStack 行业正进入拓展期：行业云将成为新一轮工业革命的基础设施和引擎

    一直在关注华为2016 Connect 大会,本来没票,后来找朋友搞到了一张,参加了大会第一天下午的会议,时间虽短,但非常有收获.本来出发前还带了纸和笔,但是到了现场才发现只带了笔记本,笔却丢下了,所 ...

  3. Workerman-文件监控-牛刀小试

    今天学习了workerman , 初次体验了定时器的效果,结合文档.弄了个文件监控. 好了 废话不多说 直接上代码 use Workerman\Worker; require_once __DIR__ ...

  4. 深入理解C++对象模型

    C++对象模型是比较重要的一个知识点,学习C++对象的内存模型,就可以明白C++中的多态原理.类的初始化顺序问题.类的大小问题等. 1 C++对象模型基础 1.1 C++对象中都有哪些东东 C++对象 ...

  5. 第11章 Java异常与异常处理

    1.Java异常简介 1.什么是异常异常出现的时候代码会无法正常运行下去,会产生各种问题2.捕捉异常的作用提早发现异常,方便查找问题,并给出解决方法3.Java中的异常1.Java中所有不正常的类都是 ...

  6. python的历史

    Python的诞生 Python的创始人吉多·范罗苏姆(Guido van Rossum),在1989年12月的圣诞节期间,为了打发时间,决定开发一种新的脚本解释程序,作为ABC语言的继承. 现在,p ...

  7. ThreadLocal实现方式&使用介绍—无锁化线程封闭

    原文出处: xieyu_zy 虽然现在可以说很多程序员会用ThreadLocal,但是我相信大多数程序员还不知道ThreadLocal,而使用ThreadLocal的程序员大多只是知道其然而不知其所以 ...

  8. c语言考前最后一天

    明天就是考验这1个多月学习c语言的总结了,所以今天是个重要的日子,明天是个神圣的日子. 但是我还很多地方不明白,特别是函数,循环,这两个都是c语言最重要的,但我却没学好,上课还 时不时走神所以现在学的 ...

  9. ajax给全局变量赋值问题解决示例

    今天在做项目时,遇到了一个问题.我用的是ajax,要在 ajax里面给一个全局变量赋值,结果死活赋值不上,纠结了好半天,后来上网查了查,才 知道,ajax默认是异步请求,(当要赋值时,此时的值没有拿到 ...

  10. JS截取字符串

    使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子:str=”jpg|bmp|gif|ico|png”;arr=theStr ...