zoukankan      html  css  js  c++  java
  • js-其他跨域技术(JSONP`Comet)

    ###1.  JSONP

      JSONP由两部分组成:回调函数和数据

      JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL

        eg:

          function handelResponse(response){

            alert('''......')

          }

          var script = document.createElement("script");

          script.src = "http://..../json/?handelResponse" ;

          document.body.insertBefore(script,document.body.firstChild);

      缺点:JSONP是从其他域中加载代码执行      要确定JSONP请求是否失败并不容易

    ###2. Comet(“服务器推送”)

      Comet 是一种服务器向页面推送数据的技术,它本含两种方法:长轮询和流

        1.)长轮询/短轮询,两者最大的区别在于服务器如何发送数据。短轮询是服务器立即发送响应,无论数据是否有效,而长轮询是等待发送响应。

          无论是长轮询或短轮询,浏览器都要在接收数据前先发起对服务器的链接,且服务器在浏览器打开状态下一直保持连接打开

        2.)HTTP流

          浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性的向浏览器发送数据

          eg:

            function fn(url, prog ,finish){

              var xhr = new XMLHttpRequest();

              var strNum = 0;

              xhr.open("get",url,true);

              xhr.onreadystatechange = function(){

                var resulet ;

                if(xhr.readyState == 3){

                  result = xhr.responseText.substring(strNum);

                  strNum += result.length;

                  prog(result);         

                }elset if(xhr.readyState == 4){

                  finish(xhr.responseText);

                } 

              }

              xhr.send(null);

              return xhr;

            }

            var a = fn("xxx.php",function(data){

                alert("Received:" +data)

              },function(data){

                alert("Done!");

              });

    ###3.新增两个Comet接口

      3.1)服务器发送事件(SSE)

        SSE API用于创建到服务器的单向链接,服务器可以通过这个链接发送任意数量的数据。服务器相应的MIME格式必须是text/event-stream

                       MIME类型: 每当浏览器请求一个页面时,web服务器会在发送实际页面内容之前,先发送一些头信息;任何资源都有自己的MIME类型;

                        eg:        Content-Type="text/event-stream"   /   <meta http-equiv="Content-Type" content="text/html";>

        3.1.1)SSE API

          JavaScript使用SSE:创建新的EventSource对象,并传入一个入口点:

            var source = new EventSource("xxx.php");

          传入的URL必须与创建对象的页面同源(相同的URL模式·域及端口)

          该source实例对象含一个readyState属性, 0 为正连接到服务器;1表示打开了链接;2表示关闭了链接

          及以下三个事件

            open:在建立连接时触发

            message:再从服务器接收到新事件时触发

              source.onmessage = function(event){

                var data = event.data;      //   服务器发回的数据以字符串形式保存在event.data中

              }

            error:在无法建立连接是触发

        强制断开链接:   source.close();

        3.1.2)事件流

      3.2)Web Sockets

        一个单独的持久连接上提供全双工·双向通信;

        使用标准的HTTP服务器无法实现Web Sockets;

      由于它使用了自定义的协议,所以URL模式也略有不同。未加密的不是http://   而是 ws://      ;    加密的不是https://  而是 wss://

        3.2.1)  创建实例对象

          var socket = new WebSocket("ws://www.xxx.com/abc.php");

          传入的URL必须为绝对的,同源策略对它不适用。

          实例化对象与XHR类似,websocket也有一个表示当前状态的readyState属性:

            WebSocket.OPENING(0):正在建立连接

            。。。.OPEN(1):已经建立连接

            .CLOSING(2):正在关闭连接

            .CLOSE(3):已经关闭

          socket.close();      // 在任何时候可以调用该方法,关闭连接

          3.2.2) 发送和接受数据

          socket.send("xxx");   // 可传入任意字符串

          WebSocket只能发送纯文本数据,因此在传送复杂数据之前,需进行序列化处理;

          eg:   // 传送一个json数据

          var msg = {

            "name" : "John",

            "age":  23

          }

          socket.send(JSON.stringify(msg));

          当服务器接收后并返回消息是,WebSocket对象会触发message事件,该事件与其他传递消息的协议类似,也将返回数据保存在event.data属性中

            socket.onmessage = function(event){

              event = event || window.event;

              var data = event.data;      

              // 注意:event.data保存的数据与send发送的数据相同,都为字符串格式

              ...

            }

        3.2.3) 其他事件

          open、erro、close(webCoean、code、reason)

  • 相关阅读:
    Windows 科研软件推荐
    有关Python 包 (package) 的基本知识
    《Using Python to Access Web Data》Week4 Programs that Surf the Web 课堂笔记
    Coursera助学金申请模板
    《Using Databases with Python》 Week2 Basic Structured Query Language 课堂笔记
    Jupyter 解决单个变量输出问题
    解决 pandas 中打印 DataFrame 行列显示不全的问题
    《Using Python to Access Web Data》 Week3 Networks and Sockets 课堂笔记
    缓存击穿及解决方案
    jvm垃圾收集器
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10550368.html
Copyright © 2011-2022 走看看