• 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)

  • 相关阅读:
    python_tkinter弹出对话框2
    python_tkinter弹出对话框1
    python生成图片二维码(利用pillow)
    nginx配置ssl证书流程及常见问题
    Django app安装,配置mysql,时区,模板,静态文件,媒体,admin
    使用Git Flow规范!
    python快速生成验证码
    json&pickle模块
    sys模块
    常用模块
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10550368.html
Copyright © 2020-2023  润新知