http知识模块详尽梳理

Posted xudengwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了http知识模块详尽梳理相关的知识,希望对你有一定的参考价值。

/**
* 目录结构
*
*/
—— Ajax规避浏览器同源策略methods
    |—— 图片ping
    |—— comet
    |—— 服务器发送事件
    |—— window.name+iframe
    |—— window.postMessage()
    |—— 修改document.domain跨子域
    |—— 服务器代理
    |—— JSONP
    |—— WebSocket
    |—— SSE与WebSocket
    |—— CORS
        |—— 简单请求
       |——非简单请求
—— http协议8种请求类型介绍

 

 正文: 

一、Ajax规避同源策略方法纵览

  1、图片ping

图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的,而且响应可以是任意内容,但通常是像素图或204响应。通过图像ping,浏览器得不到任何具体的数据,但通过侦听load和error事件,可以知道响应是什么时候接收到的。


     var img = new Image();
     img.onload = function(){
         console.log(‘success...‘);
     }
     img.onerror = function(){
         console.log(‘failed...‘);
     }
     img.src = ‘xxxxxxxxx‘;

      图像ping最常用于跟踪用户点击页面或动态广告曝光次数,图像ping有两个主要缺点:1、只能监听服务端是否相应,不能访问响应的文本;2、只能发送get请求。

      应用demo:利用图像ping可以初略检测网络延迟:


     function ping(){
        var statrt = (new Date()).getTime();
        var img = new Image();
        var calcueTime = function(){
            var overtime = (new Date()).getTime() - statrt;
            console.log(‘ping img的时长:‘ + overtime);
        }
        img.onload = img.onerror = function(){
            calcueTime();
        }
        img.src = ‘https://www.baidu.com?=‘ + new Date().getTime().toString();
     }

     

     2、Comet(以下释义主要参考《js高程》)

          Comet是Alex Russell发明的一个技术名词,指的是一种基于服务器推送的更高级的Ajax技术,与普通Ajax从页面向服务器请求数据相比,Comet则是由服务器向页面推送数据。

          Comet的实现方式有长轮询和流两种:

    #长轮询:

          长轮询类似于传统轮询(短轮询)的升级,浏览器定时发送数据请求,只有有更新的数据时,服务端才会返回数据(如下图21-1,21-2分别为短轮询和长轮询示意图)。

       技术分享图片 技术分享图片

         # http流:

流不同于长轮询,因为在页面的整个生命周期,只使用一个HTTP连接,就是浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据。

在Firefox、safari、opera和chrome中,通过侦听readyStatechange事件及检测readyState的值是否为3,就可以利用xhr对象实现HTTP流。在上述浏览器环境中,随着不断从服务器接收数据,readyState的值会周期性地变为3。当readyState值变为3时,responseText属性中就会保存接收到的所有数据。此时,就需要比较之前接收到的数据,决定从什么位置开始取得最新的数据,code如下:

    
     function createStreamingClient(url, progress, finished){
        var xhr = new XMLHttpRequest(),
            received = 0;
        xhr.open(‘get‘, url, true);
        xhr.onreadystatechange = function(){
            var result;
            if(xhr.readyState === 3){
                result = xhr.responseText.substring(received);
                received += result.length;
                // 调用progress回调函数
                progress(result);
            }else if(xhr.readyState === 4){
                finished(xhr.responseText);
            }
        }
        xhr.send(null);
        return xhr;
    }
    // begin call
    var api = ‘http://baidu.com/xxxxx.xml‘;
    var client = createStreamingClient(api, function(res){
        console.log(res);
    }, function(res){
        console.log(res);
    });

     3、SSE(服务器发送事件,以下释义主要参考《js高程》):

SSE是围绕只读Comet交互推出的API或模式。SSE API用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是test/event-stream。而且是浏览器中的javascript API能解析格式输出。SSE支持短轮询、长轮询和http流。而且能在断开连接时自动确定何时重新连接。

         支持SSE的浏览器有Firefox6+、Safari5+、Opera11+、Chrome和ios4+版Safari。

         1、SSE API

         SSE的javascript api与其他传递消息的javascript api很相似。要预定新的时间流,首先要创建一个新的EventSource(‘myevents.php‘);

         备注:传入的url必须与创建对象的页面同源(url模式、域及端口均相同)。EventSource实例有一个readyState属性,值为0表示正链接到服务器,值为1表示打开了连接,值为2表示关闭了连接。

         实例有以下三个事件:

         open:在建立连接时触发。

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

         error:在无法建立连接时触发。


    source.onmessage = function(event){
        var data = event.data;
        // 数据处理
    }

         EventSource默认会保持与服务器的活动连接,如果连接断开,还会重新连接。如果需要强制断开连接且不再重新连接,可以调用close()方法。


    source.close();

         2、事件流

          服务器事件会通过一个持久的HTTP响应发送,找个响应的MIME类型为text/event-stream。响应的格式是纯文本,最简单的情况是每个数据项都带有前缀data:。例如

          data:foo

          data:bar

 

          data:foo

          data:bar

以上响应中,事件流的第一个message事件返回的event.data值为“foo”,第二个message事件返回的event.data值为“bar”,第三个message事件返回的event.data值为“foo\\nbar”(注意中间的换行符)。对于多个连续的以data:开头的数据行,将作为多段数据解析,每个值之间以一个换行符分隔。只有在包含data:的数据行后面有空行时,才会触发message事件,因此在服务器上生成事件流时不能忘记多添加这一行。

          通过id:前缀可以给特定的事件指定一个关联的ID,找个id行位于data:行前面或后面皆可:

          data:foo

          id:1

设置了id后,EventSource对象会跟踪上一次触发的事件。如果连接断开,会向服务器发送一个包含名为last-event-id的特殊http头部请求,以便服务器知道下一次该触发哪个事件。在对此连接的事件流中,这种机制可以确保浏览器以正确的顺序收到连接的数据段。

 

         

二、http协议8种请求类型

  1、OPTIONS

   返回服务器针对

  2、HEAD

  3、GET

  4、POST

  5、PUT

  6、DELETE

  7、RTACE

  8、CONNECT

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

footer

 

以上是关于http知识模块详尽梳理的主要内容,如果未能解决你的问题,请参考以下文章

iOS-多线程:『GCD』详尽总结

npm重要知识点梳理

Spring知识梳理

python 知识梳理

Spring知识梳理

Baidu ECharts知识梳理