/*** 目录结构**/—— 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知识模块详尽梳理
原文地址：https://www.cnblogs.com/xudengwei/p/8479794.html