GET和POST请求的分别,也不用通过

即选取了 https 也并非通过 query strings 传敏感数据

2017/10/16 · 基本功技术 ·
HTTPS

本文由 伯乐在线 –
xiaoheike
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:HttpWatch。欢迎出席翻译组。

劳动器端的 log 将公开记下完整 url;浏览器上的造访历史也会当面记下完整
url;Referrer headers 里也忠实记下一体化 url,然后在别人家的 谷歌Analytics 上展现。

大家常常听到的一个广大难题是:“URL
中的参数是还是不是可以安全地传递到安全网站?”这一个标题时常现身在客户看了
HttpWatch 捕获的 HTTPS 请求后,想驾驭还有何人可以看到那一个数据。

 

比如,假若在一个询问中,使用如下安全的 URL 传递密码字符串:

HttpWatch 可以浮现安全请求的内容,因为它与浏览器集成,由此它亦可在
HTTPS 请求的 SSLGET和POST请求的分别,也不用通过。
连接对数码加密往日查看数据。皇家赌场手机版 1

设若您选用互联网嗅探器查看,例如
Network Monitor,对于同一个伸手,你只可以够查阅加密从此的数据。在数额包跟踪中没有可知的网址,标题或内容:

皇家赌场手机版 2

你可以信任 HTTPS 请求是高枕无忧的,只要:

  • 未忽略任何SSL证书警告
  • Web 服务器用于启动 SSL 连接的私钥在 Web 服务器本身之外不可用。

从而,在互连网范围,URL 参数是平安的,可是还有局地任何按照 URL
泄漏数据的方式:

  1. URL 存储在 Web 服务器日志中–日常每个请求的全部 URL
    都被存放在在服务器日志中。那代表 URL
    中的任何敏感数据(例如密码)会以公开方式保留在服务器上。以下是接纳查询字符串通过
    HTTPS 发送密码时存储在 httpwatch.com 服务器日志中的条目:
    **2009-02-20 10:18:27 W3SVC4326 WWW 208.101.31.210 GET
    /Default.htm password=mypassword 443 …
    日常认为就是是在服务器上,储存明文密码从来都不是好想法
    2.URLs are stored in the browser history – browsers save URL
    parameters in their history even if the secure pages themselves are
    not cached. Here’s the IE history displaying the URL parameter:
  2. URL 存储在浏览器历史记录中–即便安全网页本身未缓存,浏览器也会将
    URL 参数保存在其历史记录中。以下是 IE 的历史记录,呈现了 URL
    的哀求参数:皇家赌场手机版 3

借使用户创造书签,查询字符串参数也将被积存。

  1. URLReferrer 请求头中被传送–要是一个有惊无险网页使用资源,例如
    javascript,图片或者分析服务,URL 将通过 Referrer
    请求头传递到每一个放置对象。有时,查询字符串参数可能被传送并存放在第三方站点。在
    HttpWatch 中,你可以见到大家的密码字符串正被发送到
    Google Analytics皇家赌场手机版 4

结论

化解这几个标题亟需两步:

  • 除非在相对少不了的情状下传递敏感数据。一旦用户被验证,最好使用所有有限生命周期的会话
    ID 来标识它们。

动用会话层级的 cookies 传递音讯的独到之处是:

  • 它们不会蕴藏在浏览器历史记录中或磁盘上
  • 它们平日不存储在服务器日志中
  • 它们不会传递到嵌入式资源,例如图片或 JavaScript
  • 它们仅适用于请求它们的域和路径

以下是我们的在线公司中,用于识别用户的 ASP.NET 会话 cookie 示例:

皇家赌场手机版 5

请注意,cookie 被限制在域
store.httpwatch.com,并且在浏览器会话截止时过期(即不会蕴藏到磁盘)。

您本来可以透过 HTTPS
传递查询字符串,不过不要在可能出现安全题材的景观下行使。例如,你可以高枕无忧的接纳它们显示部分数字依然项目,像
accountview 或者
printpage,可是不要选取它们传递密码,信用卡号码或者此外不该公开的音讯。

1 赞 收藏
评论

h5新特性总览

Http方法:Get请求与Post请求的区分

iOS开发中,对服务器举办数据请求,最常被用到的法子是:GET和POST。

关于作者:xiaoheike

皇家赌场手机版 6

简介还没赶趟写 :)
个人主页 ·
我的篇章 ·
10 ·
   GET和POST请求的分别,也不用通过。  

皇家赌场手机版 7

<a name=”t1″></a><a target=”_blank” name=”t1″ style=”color:rgb(12,137,207)”></a>移除的元素

纯表现的要素:

basefont、big、center、font等

对可用性暴发负面影响的元素:

frame、frameset、noframes

Get是向服务器发索取多少的一种请求,而Post是向服务器交由数据的一种请求。

GET方法

GET方法,常用于从指定的资源请求数据。
询问字符串(键/值对)是在GET请求的URL中发送的:

.../test/demo_form.asp?name1=value1&name2=value2

有关GET请求的片段特性:

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被珍藏为书签
GET 请求不应在处理敏感数据时利用
GET 请求有长度限制
GET 请求只应当用于取回数据

<a name=”t2″></a><a target=”_blank” name=”t2″ style=”color:rgb(12,137,207)”></a>新增的API

语义:

可见让您更恰当地描述您的情节是哪些。

连通性:

可以让你和服务器之间通过立异的新技巧措施开展通讯(web sockets等)。

离线 & 存储:

可以让网页在客户端本地存储数据以及更高速地离线运行(离线资源、在线和离线事件、DOM存储、IndexDB、自web应用程序中选拔文件[FileReader])。

多媒体:

使 video 和 audio 成为了在所有 Web 中的一等老百姓。

2D/3D 绘图 & 效果:

提供了一个一发差别范围的表现选用(canvas、webGL)。

性能 & 集成:

提供了丰富显明的习性优化和更使得的电脑硬件应用(WebWorkers、XMLHttpRequest2、HistoryAPI、拖放、requestAnimationFrame、全屏API、指针锁定API、在线和离线事件)。

配备访问 Device Access:

可见处理各类输入和输出设备(触控事件touch、使用地理地点一定、检测设施方向)。

Get是获取信息,而不是修改新闻,类似数据库查询功用雷同,数据不会被改动。

POST方法

POST方法,常用来向指定的资源提交要被拍卖的多寡。
查询字符串(键/值对)是在POST请求的HTTP新闻主体中发送的:

POST /test/demo_form.asp HTTP/1.1
Host: ...
name1=value1&name2=value2

关于POST请求的局地特色:

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不可以被珍藏为书签
POST 请求对数据长度没有必要

<a name=”t3″></a><a target=”_blank” name=”t3″ style=”color:rgb(12,137,207)”></a>部分API详述

鉴于篇幅较长,可以拔取感兴趣的一对阅读
存储机制
File
API
Web
Worker
history对象
2D绘图(canvas和svg)
H5的包容性

Get恳请适用于安然的竞相行为就是那一个你可以频繁发起呼吁而不会牵动副功效的央求。**Post请求适用于不安全的互建设银行为*趣味是每一个呼吁都会导致服务器端暴发某种变化,而再一次请求可能会带来难题。*

POST于GET对比

比较类型 GET POST
后退按钮/刷新 无害 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。
书签 可收藏为书签 不可收藏为书签
缓存 能被缓存 不能缓存
编码类型 application/x-www-form-urlencoded application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史 参数保留在浏览器历史中。 参数不会保存在浏览器历史中。对数据长度的限制 是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。 无限制。
对数据类型的限制 只允许 ASCII 字符。 没有限制。也允许二进制数据。
安全性 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ! POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性 数据在 URL 中对所有人都是可见的。 数据不会显示在 URL 中。

参考小说:
http://www.w3school.com.cn/tags/html\_ref\_httpmethods.asp

<a name=”t4″></a><a target=”_blank” name=”t4″ style=”color:rgb(12,137,207)”></a>web存储机制

Web
Storage的目标是克服由cookie带来的有些范围,当数码需求被严峻控制在客户端上时,无需不断地将数据发回服务器。Web
Storage的四个重大对象是:提供一种在cookie之外存储会话数据的路线;提供一种存储大批量得以跨会话存在的多少机制。最初的Web
Storage规范包蕴了三种对象的概念:sessionStorage和globalStorage。那多个目的在扶助的浏览器中都是以windows对象属性的款式存在的。

Get请求的参数会跟在url后开展传递,请求的数量会附在URL之后,以?分割URL和传输数据,参数之间以&相连,%XX中的XX为该符号以16进制表示的ASCII,假若数额是英文字母/数字,原样发送,即使是空格,转换为+,假使是粤语/其余字符,则直接把字符串用BASE64加密。

POST于GET的选择

在上文的表格中,可以看出,POST相比较GET安全性更高,但也不难。甚至说它们都是当众传输的也没怎么大题目。
而是有一个细节,就是GET的URL会被WEB服务器的日志记录。
为此一旦把第一数据放在GET里面,WEB服务器被侵犯日志被人导去了,基本败露可能性100%。而POST来说,日志没有记录,只要数据库服务器不被侵袭,基本仍然安全的。
只要被抓了包,那所有都未曾什么卵用,所以,HTTPS该用仍然得用。

<a target=”_blank” name=”t5″ style=”color:rgb(12,137,207)”></a>sessionStorage对象

sessionStorage对象存储特定于某个会话的数额,也就是该数量只维系到浏览器关闭。这些目的就好像会话cookie,也会在浏览器关闭后消退。存储在sessionStorage中的数据可以当先页面刷新而留存,同时假诺浏览器扶助,浏览器崩溃仁同一视启之后依旧可用(FireFox和WebKit都接济,IE不帮忙)
因为sessionStorage对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的,存储在sessionStorage中的数据只可以由最初给目的存储数据的野蛮访问到,所以对多页面使用有限制。
sessionStorage对象可以使用setItem()或者直接设置新的性质来储存数据

//使用sessionStorage方法存储数据
sessionStorage.setitem('name','Nicholas');
//使用属性存储数据
sessionStorage.book = 'Profession JavaScript';

今非昔比浏览器写入数据方面略有差异。FireFox和WebKit达成了一道写入,所以添加到存储空间中的数据时立刻被交给的。而IE的兑现则是异步写入数据,所以在安装数据和将数据实际上写入磁盘之间或者有部分延迟。对于少量数码而言,那么些距离是可以忽略的。对于大气数额,IE要比其余浏览器更快的死灰复燃执行,因为它会跳过其实的磁盘写入过程
在IE8中可以强制把数据写入磁盘:在安装新数据以前使用begin()方法,并且在具备安装完毕后调用commit()方法

sessionStorage.begin();//确保在这段代码执行的时候不会发生其他磁盘写入操作
sessionStorage.setitem('name','Nicholas');
sessionStorage.book = 'Profession JavaScript';
sessionStorage.commit();

sessionStorage中有数据时,能够利用getItem()或者经过平素访问属性名来获取数据。

//使用方法读取数据
var name = sessionStorage.getItem('name');
//使用属性读取数据
var book = sessionStorage.book;

还是能通过整合length属性和key()方法来迭代sessionStorage的值。

for(var i = 0,len = sessionStorage.length; i < len; i++){
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

要从sessionStorage中剔除数据足以接纳delete操作符删除对象属性,也可以调用removeItem()方法。

delete sessionStorage.name;
sessionStorge.removeItem('book');

Get传输的数额有大大小小限制,因为GET是由此URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了,差距的浏览器对URL的长短的范围是差别的。

GET 相对 POST最大的优势是,GET 的持有音讯都在URL,所以很便利的记录下来重复使用。

总的来说,假诺只是获取数据,并且参数公开也不会造成安全性难点的话,推荐应用GET。

ps:其实所谓的HTTP协议并不是传输级其余协商,而是选择级其他磋商。有其对应的“增删改查”作用:POST是丰硕,DELETE是剔除,PUT是修改,GET是询问,至于增删改查的具体内容每个应用都差别,可是她们都得以用URL定位,内容在HTTP里叫做“资源”,所以URL叫“统一资源一定符”。RESTful
API 正是坚守那种形式来定义的,大家都用 HTTP 协议提供 API
不是偶尔,而是就是为此而布置的。

<a target=”_blank” name=”t6″ style=”color:rgb(12,137,207)”></a>globalStorage对象

sessionStorage对象应当紧要用于针对会话的小段数据的囤积。若是须要跨越花花存储数据,那么globalStorage或者localStorage更为合适
要采纳globalStorage,首先要制订哪些域可以访问该数额。可以经过方括号标记使用品质来兑现。

//保存数据
globalStorage['wrox.com'].name = 'Nicholas';
//获取数据
var name = globalStorage['wrox.com].name;

在此间,访问的是针对域名wrox.com的存储空间。那些蕴藏空间对于wrox.com及其所有子域都是可以访问的。
对globalStorage空间的走访,是根据发起呼吁的页面的域名、协议和端口来界定的(类似于ajax请求的同源策略)。即使达成不能确定域名,那么使用location.host作为属性名相比较安全

globalStorage[location.host].name = 'Nicholas';
var book = globalStorage[location.host].getItem('book');

假定不利用removeItem()或者delete删除,或者用户为清除浏览器缓存,存储在globalStorage属性中的数据会平素保存在磁盘上。那让globalStorage卓殊适合在客户端存储文档或者长期保留用户偏好设置

*GET请求的数额会被浏览器缓存起来用户名和密码将公开现身在URL上,其余人能够查到历史浏览记录,**多少不太安全**。在服务器端,用Request.QueryString来收获Get方式提交来的数量。*

<a target=”_blank” name=”t7″ style=”color:rgb(12,137,207)”></a>localStorage对象

localStorage对象在修订过的HTML5正规中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage分化,不可以给localStorage指定其他访问规则;规则完结就设定好了。要拜访同一个localStorage对象,页面必须来自同一个域名,使用同样种协议,在同一个端口上。这一定于globalStorage[location.host]
皇家赌场手机版,由于localStorage是Storage的实例,所以可以像使用sessionStorage一样来行使它。

//使用方法存储数据
localStorage.setItem('name','Nichoalas');
//使用属性存储数据
localStorage.book = 'Professional JavaScript';
//使用方法读取数据
var name = localStorage.getItem('name')
//使用属性读取数据
var book = localStorage.book;

储存在localStorage中的数据和仓储在globalStorage中的数据一致,都坚守平等的条条框框:数据保存到通过JavaScript
删除或者是用户清除浏览器缓存

*Post伸手则作为http音信的实在内容发送给web服务器,数据放置在HTML
Header内提交,Post没有范围提交的数据。Post比Get安全*,当数码是中文或者不敏感的数额,则用get,因为运用get,参数会展现在地方,对中国“氢弹之父”感数据和不是华语字符的数据,则用post。

<a name=”t5″></a><a target=”_blank” name=”t8″ style=”color:rgb(12,137,207)”></a>File API

File
API在表单中的文件输入字段的底子上,又添加了一些一直访问文件音信的接口。H5在DOM中为文件输入元素添加了一个files集合,在经过文件输入字段选用了一或四个公文时,files集合上将包括一组File对象,每个File对象对应着一个文书。每个File对象都有下列只读属性

  • name: 本地文件系统的文件名
  • size: 文件的字节大小
  • type:字符串,文件的MIME类型。
  • lastModifiedDate:字符串,文件上三遍被修改的风浪(唯有chrome完结了那个特性)

近期大家获取id为‘files-list’的input为file的元素,将该因素中上传的文本输出到控制台

var filesList = document.getElementById('files-list');
        EventUtil.addHandler(filesList,'change',funciton(e){
            var files = EventUtil.getTarget(e).files,
                i = 0,
                len = files.length;
            while(i<len){
                console.log(files[i].name + '('+files[i].type+','+files[i].size +'bytes)');
                i++;

            }
        })

POST表示可能修改变服务器上的资源的央求,在服务器端,用Post形式提交的数码只好用Request.Form来得到

<a target=”_blank” name=”t9″ style=”color:rgb(12,137,207)”></a>FileReader类型

FlieReader类型完成的是一种异步文件读取机制。可以把FileReader想象成XMLHttpRequest,分裂只是它读取的是文本心痛,而不是远程服务器。为了读取文件中的数据,FileReader提供了之类多少个艺术:

  • readAsText(file,
    encoding):以纯文本的样式读取文件,将读取到的文件保存在result属性中。
  • readAsDataURL(file):读取文件并将文件一数额URI的样式保留在result属性中
  • readAsBinaryString(file)(已抛弃):读取文件并将一个字符串保存在result属性中,字符串中的每一个字符表示一字节
  • readAsArrayBuffer(file):读取文件并将一个分包文件内容的ArrayBuffer保存在result属性中。

是因为读取进度是异步的,由此FileReader也提供了多少个事件。其中最可行的三个事件是progress、error和load,分别表示是不是又读取了新数据,是或不是发生了不当以及是不是读完了总体文件。

var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
    var info = "",
        output = document.getElementById("output"),
        progress = document.getElementById("progress"),
        files = EventUtil.getTarget(event).files,
        type = "default",
        reader = new FileReader();

    if (/image/.test(files[0].type)){
        reader.readAsDataURL(files[0]);
        type = "image";
    } else {
        reader.readAsText(files[0]);
        type = "text";
    }

    reader.onerror = function(){
        output.innerHTML = "Could not read file, error code is " + reader.error.code;
    };

    reader.onprogress = function(event){
        if (event.lengthComputable){
            progress.innerHTML = event.loaded + "/" + event.total;
        }
    };

    reader.onload = function(){

        var html = "";

        switch(type){
            case "image":
                html = "<img src=\"" + reader.result + "\">";
                break;
            case "text":
                html = reader.result;
                break;

        }
        output.innerHTML = html;
    };
});

<a target=”_blank” name=”t10″ style=”color:rgb(12,137,207)”></a>读取部分情节

File对象接济一个slice()方法以促成读取文件的一有的而不是全体内容,那一个方法在FireFox中的已毕叫mozSlice(),在chrome中的完毕是webkitSlice(),Safiri的5.1及前边的本子不支持那些办法。Slice()方法接收五个参数:初步字节及要读取的字节数。那几个主意重临一个Blob实例,Blob是File类型的父类型。上面是一个通用的函数,可以在不一样实践中动用slice()方法:

function blobSlice(blob,startByte,length){
    if(blob.slice){
        return blob.slice(startByte,length);
    } else if(blob.webkitSlice){
        return blob.webkitSlice(startByte,length);
    } else if(blob.webkitSlice){
        return blob.webkitSlice(startByte,length);
    } else {
     return null;
    }
}

blob类型有一个size属性和一个type属性,而且它也支撑slice()方法,以便进一步切割数据。通过FileReader也可以从Blob中读取数据。上面那个例子只读取文件的32B内容

var filesList = document.getElementById('files-list');
EventUtil.addHandler(filesList, "change", function(event){
         var info = "",
              output = document.getElementById("output"),
              progress = document.getElementById("progress"),
              files = EventUtil.getTarget(event).files,
              type = "default",
              reader = new FileReader();
              blob = blobSlice(files[0],0,32);

          if (blob){
              reader.readAsText(blob);
              reader.onerror = function(){
               outpit.innerHTML = 'could not read file,error code is' + reader.error.code;
           }
           reader.onload = function(){
            output.innerHTML = reader.result;
        };
     } else {
         alert('your browser does not support slice()');

          }

          reader.onerror = function(){
              output.innerHTML = "Could not read file, error code is " + reader.error.code;
          };

只读取文件的一部分可以节省时间,极度适合只关切数据中某个特定部分(如请求尾部)的场馆

<a target=”_blank” name=”t11″ style=”color:rgb(12,137,207)”></a>对象URL

目的URL也被称之为blob
URL,指的是引用保存在File或Blob中多少的URL。使用对象URL的裨益是足以无需把公文内容读取到JavaScript中而直接使用文件内容。为此,只要在急需文件内容的地点提供对象URL即可。要成立对象URL,能够动用window.URL.createObjectURL()方法,并传到File或Blob对象。这么些格局在Chrome中的落成叫window.webkitURL.createObjectURL(),由此可以通过如下函数来废除命名的歧异:

function createObjectURL(blob){
    if(window.URL){
        return window.URL.createObjectURL(blob);
    } else if (window.webkitURL) {
        return window.webkitURL.createObjectURL(blob);
    } else {
        return null;
    }
}

以此函数的重临值是一个字符串,指向一块内存的地点。因为那些字符串是URL,所以在DOM中也能利用。例如,以下代码可以在页面中显得一个图像文件:

var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
      var info = "",
          output = document.getElementById("output"),
          progress = document.getElementById("progress"),
          files = EventUtil.getTarget(event).files,
          type = "default",
          reader = new FileReader();
          url = createObjectURL(files[0]);
      if(url) {

       if (/image/.test(files[0].type)){
           output.innerHTML="<img src =\"" + url + "\">"
       } else {
           output.innerHTML = 'not an image';
       }
    } else {
     output.innerHTML = "your browser doesn't support object URLs";
 }
});

      reader.onerror = function(){
          output.innerHTML = "Could not read file, error code is " + reader.error.code;
      };

      reader.onprogress = function(event){
          if (event.lengthComputable){
              progress.innerHTML = event.loaded + "/" + event.total;
          }
      };

<a target=”_blank” name=”t12″ style=”color:rgb(12,137,207)”></a>读取拖放的文本

围绕读取文件音信,结合使用Html5拖放API和文件API,可以创设出令人瞩目标用户界面:在页面上创制了自定义的放置目标后,可以从桌面上把文件拖放到该对象。与拖放一张图纸或者一个链接类似,从桌面上把文件拖放到浏览器中也会触发drop事件。而且能够在e.dataTransfer.files中读到被放置的公文,当然此时它是一个File对象,与童年过文件输入字段取得的File对象一样。

var droptarget = document.getElementById('droptarget');

function handleEvent(e){
    var info = '';
    var output = document.getElementById('output');
    var files, i, len;
    e.preventDefault();
    if(e.type == 'drop') {
        files = e.dataTransfer.files;
        i = 0;
        len = files.length;
        while(i < len){
            info += files[i].name + '(' + files[i].type + ',' + files[i].size + 'bytes<br>';
            i++;
        }
        output.innerHTML = info;
    }
}
droptarget.addHandler('dragenter',handleEvent,false);
droptarget.addHandler('drageover',handleEvent,false);
droptarget.addHandler('drop',handleEvent,false);

<a name=”t6″></a><a target=”_blank” name=”t13″ style=”color:rgb(12,137,207)”></a>Web Workers

专用Web
Worker提供可一个简便的措施使的web内容可以在后台运行脚本。一旦worker成立后,它可以向由它的开创者指定的轩然大波监听函数传递信息,那样改worker生成的具备义务就都会收下到这么些新闻。worker线程可以在不干扰UI的情形下实施职务。

<a target=”_blank” name=”t14″ style=”color:rgb(12,137,207)”></a>生成worker

创造一个新的worker非凡不难。就是调用Worker()构造函数,指定一个要在worker线程内运行的脚本的URI,借使指望可以吸纳worker的布告,可以将worker的onmessage属性设置成一个特定的事件处理函数,假若愿意可以发送音讯到worker,可以应用postmessage方法

var myWorker = new Worker("my_task.js");

myWorker.onmessage = function (oEvent) {
  console.log("Called back by the worker!\n");
};

myWorker.postMessage(""); // start the worker.

<a target=”_blank” name=”t15″ style=”color:rgb(12,137,207)”></a>传递数据

在主页面与worker之间传递的多少是由此拷贝,而不是共享来成功的。传递给worker的靶子急需经过连串化,接下去在另一端还需求反体系化。页面与worker不会共享同一个实例,最后的结果就是在历次通讯甘休时生成了数据的一个副本。大多数浏览器采取结构化拷贝来完结该特性。
example.html(主页面)

var myWorker = new Worker("my_task.js");

myWorker.onmessage = function (oEvent) {
  console.log("Worker said : " + oEvent.data);
};

myWorker.postMessage("ali");

my_task.js(worker)

postMessage("I\'m working before postMessage(\'ali\').");

onmessage = function (oEvent) {
  postMessage("Hi " + oEvent.data);
};

<a target=”_blank” name=”t16″ style=”color:rgb(12,137,207)”></a>Worker全局效率域

关于Web
Worker,最要害的是要知道它所实施的JavaScript代码完全在另一个成效域,与近年来网页中的代码不共享成效域。在Web
Worker中,同样有一个大局对象和其它对象以及艺术。可是Web
Worker中的代码不可能访问DOM,也无力回天透过任何方式影响页面的外观
Web
Worker中的全局对象是worker对象自我。也就是说,在这几个特殊的大局意义域中,this和sele引用的都是worker对象。为便于处理多少,Web
Worker本身也是一个最小化的周转环境

  • 最小化的navgator对象 :
    online、appName、appVersion、userAgent、platform
  • 只读的location对象 : 所有属性都是只读的
  • self : 指向全局 worker 对象
  • 所有的ECMA对象,Object、Array、Date等
  • XMLHttpRequest构造器
  • setTimeout、setInterval、clearTimeout()和clearInterval()方法

在worker内部,调用close()方法也可以告一段落工作。Worker停止工作后就不会再有事件发生。
除此以外,Worker的全局功效域中提供了importScripts()方法。那些方法接收一个或三个指向JavaScript文件的URL。每个加载进度都是异步进行的,因而根本的脚本加载并执行到位之后,importScripts()才会进行

importScripts('file1.js','file2.js');

尽管file2.js先于file1.js下载完,执行的时候如故会根据先后顺序进行。而且,这一个脚本是在Worker的全局功用域中执行,假如脚本中含有与页面香瓜你的JavaScript代码,那么脚本可能依旧不能正确运行。

<a name=”t7″></a><a target=”_blank” name=”t17″ style=”color:rgb(12,137,207)”></a>history对象

history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。
使用Go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。那个艺术接受一个参数,表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于单击浏览器的‘后退’按钮),正数表示向前跳转(类似于单击浏览器的“前进”按钮)

history.go(-1);//后退一页
history.go(1);//前进一页
history.go(2);//前进两页

也可以给go()方法传递一个字符串参数,此时浏览器会跳转到历史记录中包罗该字符串的第三个职位–可能后退,也可能升高,具体看那些地点近来。如果历史记录中不含有该字符串,那么这些点子什么也不做

history.go('wrox.com');//跳到最近的wrox.com页面

别的,还足以选用四个简写方法back()和forward()来取代go()。那三个章程都足以萧规曹随浏览器的‘后退’和‘前进’按钮。

history.back();//后退一页
history.forward();//前进一页

history对象还有一个length属性,保存着历史记录的多少。这几个数额蕴含持有的历史记录,即怀有向后和前进的笔录。

<a target=”_blank” name=”t18″ style=”color:rgb(12,137,207)”></a>history在h5中新增的特性和格局

h5中的history对象新增了八个新办法:history.pushState()和history.replaeState();
三种方法都同意我们添加和翻新历史记录,它们的做事规律相同并且能够添加数量同样的参数。但是pushState()是在history栈中添加一个新的条文,replaceState()是替换当前的记录值。除了艺术之外,还有popstate
事件
pushState(data,title[,url])和replaceState(data,title[,url])参数一样,参数表明如下:

  • data:一个意味着意况的目的,json格式数据
  • title:一个string格式的标题(半数以上浏览器不接济或忽略这些参数,最好用null代替)
  • url:一个url(用于替换当前URL)

当浏览会话记录的时候,不管点击前进或者后退按钮,依然利用history.go和history.back方法,popstate事件都会被触发。当事件时有暴发时,浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也得以获取history.state
内需验证的是pushState只是将眼前页面保存到history的历史记录中(并视作近来的一个记下),并且将如今浏览器的地方栏改为参数url指定的值,但并不会加载它。这一点与平常的通过链接打开或浏览器地址输入url完全不均等。所以只要想在url改变的时候须求监听popstate事件。

运用history可以弥补ajax不能回退的缺点。如下方法是模仿ajax操作的兑现格局。

<input type="button" value="加1" onclick="add()" />
   <div id="info" style="border:red 1px solid;width:200px;padding:10px;">0</div>
<script>
    var info = document.getElementById('info');
    var i = 1;
    function add() {
        var data = {
            param : i,
            func : func
        };
        info.innerHTML = i;
        document.title = i;
        History.push(data);
        i++;
    }

    function func(i) {
        info.innerHTML = i;
        document.title = i;
    }

    History = function() {  
            var 
               list = [],
               index = 1,

               func, scope;

            function push(data) {
                if(typeof data !== 'object') return;

                if(typeof data.param == undefined || typeof data.func !== 'function') return;

                func = data.func;
                scope = data.scope;

                history.pushState({param: data.param}, index, '#' + index);
                index++;
            }

            window.onpopstate = function(e) {
                if(e.state) {
                    var state = e.state,
                        param = state.param;
                    if(param) {
                        func.call(scope, param);
                    }
                }
                else{
                    if(func){
                        func.call(scope, 0);
                    }

                }

            }

            return {
                push : push
            };
        }();
</script>

<a name=”t8″></a><a target=”_blank” name=”t19″ style=”color:rgb(12,137,207)”></a>2D绘图(canvas和svg)

<a target=”_blank” name=”t20″ style=”color:rgb(12,137,207)”></a>SVG

SVG 是一种采纳 XML 描述 2D 图形的语言。
SVG 基于 XML,那表示 SVG DOM
中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。倘使 SVG
对象的特性暴发变化,那么浏览器可以自动再次出现图形。

<a target=”_blank” name=”t21″ style=”color:rgb(12,137,207)”></a>canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas
中,一旦图形被绘制落成,它就不会继续得到浏览器的关心。如若其岗位暴发变化,那么所有场地也急需再行绘制,包涵其余可能已被图形覆盖的对象。

<a target=”_blank” name=”t22″ style=”color:rgb(12,137,207)”></a>Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一对分裂之处。
Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用

<a name=”t9″></a><a target=”_blank” name=”t23″ style=”color:rgb(12,137,207)”></a>h5的兼容性难题

IE6/IE7/IE8援助通过document.createElement方法暴发的竹签,可以接纳这一特色让这几个浏览器协助HTML5新标签。不过浏览器协助新标签后,还亟需添加标签默许的体制。

Leave a Comment.