文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)...

文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)

 

一、文档间的通信    postMessage对象
    //不跨域
        1、iframe：obj.contentWindow  [iframe中的window对象]      iframe拿到父级页面的window：  parent(上一层window)  top(最顶层window)
        2、window.open()  返回值是新窗口的window对象   拿到父级window ： window.opener

    //跨域
        3.  目标域的window.postMessage("xxx","目标域");  目标域：监听message事件，在ev.data中拿到发送过来的消息
        4.ajax需要服务端配合：允许我跨域访问
        5.jsonp

    //无刷新上传文件
        obj.fiels  //获取文件列表

        var FD = new FormData();  
        FD.append('name',files[0])   //构建二进制对象

        //ajax发送二进制数据给后台
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if( xhr.status == 200 ){
                    var res = JSON.parse(xhr.response);
                    alert(res.msg);
                }
            }
        }
        //ajax发送源文件
        xhr.open('post','post_file.php',true);
        xhr.setRequestHeader('X-Request-with','XMLHttpRequest');
        xhr.send(FD);

        xhr.upload       //上传进度对象
            事件：
                onprogress: 上传事件(上传过程中连续触发)
            属性：
                ev.total(要发送的总量)
                ev.loaded(已发送的总量)


二、websocket:通信协议  -> 与 http类似 （参考阮一峰2012‘互联网协议入门篇’）
    1.nodejs搭建前后端
    2.使用websocket实现时时传输：
        a].安装socket.io：npm install socket.io  引入sokit.io包


        //服务端
            a].var io = require('socket.io');
               var soket = io.listen(httpServer);
            b].soket.sokets.on('connection',function(socket){
                //socket -> 每个人进来都会产生一个socket
            });  //有人进来的事件监听，执行回掉
            e]. 服务端->客户端：socket.emit('hello','数据');
            h]. 监听客户端'hellohello'事件：socket.on('hellohello',function(data){
                //data  客户端过来的数据(数据1)
            });
            i]. socket.broadcast.emit('a','有新人进来了'); //广播(除了当前的人(刚刚进来的人)接收不到)

        //客户端
            c].客户端需要发送tcp链接，引入client.socket.js文件 [提供一个io对象。
            d]. var socket = null;socket = io.connect('url');发送tcp请求
            f]. 客户端监听hello事件: socket.on('hello',function(data){
                //data  服务端过来的数据
            });
            g]. 客户端 -> 服务端：socket.emit('hellohello','数据1');

三、applicationCache 离线存储
    1、搭建离线应用程序
        //服务器设置头信息
            AddType text/cache-manifest .manifest  //http.comfig中加  nodeJs: 'AddType': 'text/cache-manifest .manifest'
        //html标签添加属性：
            manifest='cache.manifest'  //xxx就是离线存储的清单列表
        //新建cache.manifest文件
            先写：
            -CACHE MANIFEST
                -2.png    //就会缓存2.png图片
            -FALLBACK
            -styl1.css  style2.css //第一个网络地址没有获取到，就走第二个缓存
            -NETWORK：无论缓存是否有，都从网络获取
四、web worker  [开启多线程
    1.使用：
        //主js中:
            var w1 = new Worker('worker1.js');  //开启多线程
            w1.postMessage('wenwen');           //用于传递数据
        //worker1.js中:
            self.onmessage = function(ev){  //self == w1 引用此文件的返回值
                ev.data
            }
        <!-- 
                console.time(1);
                .
                .
                console.timeEnd(1);   
                //计算执行中间的代码使用的时间，在控制台打印出来
         -->
    2.运行环境：
            navigator:appName appVersion userAgent platform
            location:所有属性只读
            self: 只想全局worker对象
            所有的ECMA对象：Objec...
            XMLHttpRequest
            setTimeout setIntercal
            self.close()方法：内部立即停止worker运行  worker.terminate()//外部结束进程
            importScripts('xxx.js')方法引入其他js文件
五、小功能：
    1、标签可编辑属性：contenteditable='true'

posted @ 2017-10-06 22:59 DaivdAndLemon 阅读( ...) 评论( ...) 编辑 收藏