摘要：端口為只是通信接口部分用和協(xié)議替代。直接和通信，而使用所以是先和通信，再由和通信。

來(lái)一篇串通，一個(gè)http全過(guò)程的問(wèn)題，把所有HTTP相關(guān)知識(shí)點(diǎn)都帶過(guò)一遍

輸入域名(url)-->DNS映射為IP-->TCP三次握手-->HTTP請(qǐng)求-->HTTP響應(yīng)-->(瀏覽器跟蹤重定向地址)-->服務(wù)器處理請(qǐng)求-->服務(wù)器返回一個(gè)html響應(yīng)-->(視情況決定釋放TCP連接)-->客戶(hù)端解析HTML-->獲取嵌入在HTML中的對(duì)象重新發(fā)起http請(qǐng)求

在域名這里有很多可以聊的：
域名級(jí)數(shù)判別
域名服務(wù)器及域名這里有詳細(xì)解釋?zhuān)础坝?jì)算機(jī)網(wǎng)絡(luò)技術(shù)”的第九章Domain Name System
一個(gè)點(diǎn)分隔一級(jí)（域名由分量組成，一級(jí)為一個(gè)分量），通俗易懂如下：

...三級(jí)域名.二級(jí)域名.頂級(jí)域名
WWW.baidu.com  com為頂級(jí)域名(通常依據(jù)組織和地理分為兩類(lèi))，baidu為二級(jí)域名，WWW網(wǎng)站
www.pic.baidu.com pic為三級(jí)域名
所謂降域，如pic.baidu.com/a.txt  baidu.com/b.txt中a和b在不同的域下面，都降域?yàn)閎aidu.com..如下詳細(xì)解釋

同源策略
同源需滿(mǎn)足的條件：

協(xié)議相同

域名相同:a.b.c.com a.b.d.com域名相同嗎

端口相同

非同源受限制的行為：

cookie localStorage indexDB無(wú)法獲取

DOM無(wú)法獲得

ajax請(qǐng)求不能發(fā)送
跨域方法：

雙向跨域
1.降域(二級(jí)和以上有共同部分)

所謂降域就是尋找到最后面的域名相同的部分留下
a.b.c.com
d.b.c.com
降域后統(tǒng)統(tǒng)改為b.c.com或者c.com

存在的問(wèn)題：

安全性，當(dāng)一個(gè)站點(diǎn)被攻擊，相同域名的站點(diǎn)也會(huì)被攻擊

重復(fù)性，所有需要跨域的都要修改document.domain=""

ajax不受降域影響，還是需要iframe在一個(gè)頁(yè)面引入另一頁(yè)面的形式

不可更改性，一旦降域就無(wú)法回去

2.location.hash(FIM---fragment itentitier messaging)

a向b傳送數(shù)據(jù)
    baidu.com/a.html中的iframe的src="google.com/b.html#paco",b.html監(jiān)聽(tīng)到   url發(fā)生變化觸發(fā)相應(yīng)操作
b向a傳送數(shù)據(jù)
    google.com/b.html中隱藏一個(gè)iframe,設(shè)置src="baidu.com/proxy.html#data" data為要傳輸?shù)臄?shù)據(jù),proxy.html是和a.html同域名下的，是a b之間的代理，負(fù)責(zé)監(jiān)聽(tīng)utl變化就修改a的url，a監(jiān)聽(tīng)到url變化了就做出相應(yīng)操作

b.html:

try {  
    parent.location.hash = "data";  
} catch (e) {  
    // ie、chrome的安全機(jī)制無(wú)法修改parent.location.hash，  
    var ifrproxy = document.createElement("iframe");  
    ifrproxy.style.display = "none";  
    ifrproxy.src = "http://www.baidu.com/proxy.html#data";  
    document.body.appendChild(ifrproxy);  
}  

proxy.html:

//因?yàn)閜arent.parent（即baidu.com/a.html）和baidu.com/proxy.html屬于同一個(gè)域，所以可以改變其location.hash的值  
parent.parent.location.hash = self.location.hash.substring(1);  

問(wèn)題：數(shù)據(jù)暴露在URL中，數(shù)據(jù)大小格式受限

3.HTML5的postMessage方法

a向b發(fā)送數(shù)據(jù)

baidu.com/a.html

window.onload = function() {  
    var ifr = document.getElementById("ifr");  
    var targetOrigin = "http://www.google.com";  
    ifr.contentWindow.postMessage("hello world!", targetOrigin);  
}; 

google.com/b.html

var onmessage = function (event) {  
  var data = event.data;//消息  
  var origin = event.origin;//消息來(lái)源地址  
  var source = event.source;//源Window對(duì)象  
  if(origin=="http://www.baidu.com"){  
console.log(data);//hello world!  
  }  
};  
if (typeof window.addEventListener != "undefined") {  
  window.addEventListener("message", onmessage, false);  
} else if (typeof window.attachEvent != "undefined") {  
  //for ie  
  window.attachEvent("onmessage", onmessage);  
} 

同理可以b向a postMessage

單向跨域

1.jsonp

先看兩種用法

回調(diào)函數(shù)

參數(shù)

問(wèn)題：只支持get請(qǐng)求

2.服務(wù)器代理

服務(wù)器沒(méi)有同源策略，在數(shù)據(jù)提供方?jīng)]有jsonp,window.name協(xié)議的支持下，使用服務(wù)器代理。
在baidu.com下配置一個(gè)代理proxy即baidu.com/proxy/將ajax綁定到代理下發(fā)送http請(qǐng)求，此時(shí)http請(qǐng)求是在服務(wù)端進(jìn)行的，無(wú)同源限制

3.CORS

var url = "http://api.alice.com/cors";  
var xhr = createCORSRequest("GET", url);  
xhr.send();
//非簡(jiǎn)單請(qǐng)求
var url = "http://api.alice.com/cors";  
var xhr = createCORSRequest("PUT", url);  
xhr.setRequestHeader(  
    "X-Custom-Header", "value");
xhr.send(); 

另外：對(duì)于CORS的支持需要服務(wù)器和客戶(hù)端之間的協(xié)調(diào)

4.window.name

5.webSocket

需要服務(wù)器的支持，源在白名單

6.Access-Controll-Allow-Origin

http和https協(xié)議有什么區(qū)別，重點(diǎn)解釋https

http+加密+認(rèn)證+完整性保護(hù)=https

http:應(yīng)用層的無(wú)狀態(tài)，超文本傳輸協(xié)議。端口為80

HTTPS：只是http通信接口部分用SSL和TLS協(xié)議替代。http直接和TCP通信，而HTTPS使用SSL所以是先和SSL通信，再由SSL和TCP通信。端口為443

cookie sessionStorage localStorage有什么不同

cookie存儲(chǔ)在客戶(hù)端，可以發(fā)送給服務(wù)器，數(shù)據(jù)大小限制為4K

sessionStorage,localStorage存儲(chǔ)在本地，不可以發(fā)送給服務(wù)器，數(shù)據(jù)大小為5M

localStorage只能手動(dòng)清除數(shù)據(jù)

sessionStorage關(guān)閉會(huì)話(huà)窗，數(shù)據(jù)就被清除了

HTML5本地存儲(chǔ)分為

webStorage(localStorage,sessionStorage)

indexDB

瀏覽器緩存中找

系統(tǒng)緩存中找

路由器緩存中找

ISP DNS緩存中找

client----->server:SYN(發(fā)起一個(gè)TCP連接，同步報(bào)文)

server----->client:SYN+ACK(應(yīng)答報(bào)文，表示已創(chuàng)建連接)

client----->server:ACK(應(yīng)答報(bào)文，表示收到已連接)

四次揮手：
    由客戶(hù)端發(fā)起的關(guān)閉連接
        * client----->server:FIN(請(qǐng)求關(guān)閉連接)
        * server----->client:ACK(收到了連接，但不會(huì)立即關(guān)閉，等到報(bào)文都發(fā)送完再回復(fù)一個(gè)FIN)
        * server----->client:FIN
        * client----->server:ACK(收到關(guān)閉)

    由服務(wù)端發(fā)起的關(guān)閉連接
        * 當(dāng)http設(shè)置了keepalive定時(shí)關(guān)閉，服務(wù)端會(huì)在結(jié)束數(shù)據(jù)傳送后關(guān)閉TCP連接

請(qǐng)求行

請(qǐng)求頭

空行

請(qǐng)求包體(只有POST請(qǐng)求有包體)

get/post區(qū)別

請(qǐng)求參數(shù)：get參數(shù)附在URL后面?隔開(kāi)，POST參數(shù)放在包體中

大小限制：GET限制為2048字符，post無(wú)限制

安全問(wèn)題：GET參數(shù)暴露在URL中，不如POST安全

瀏覽器歷史記錄：GET可以記錄，POST無(wú)記錄

緩存：GET可被緩存，post無(wú)

書(shū)簽：GET可被收藏為書(shū)簽，post不可

數(shù)據(jù)類(lèi)型：GET只能ASCII碼，post無(wú)限制

狀態(tài)行

響應(yīng)頭

響應(yīng)包體

http狀態(tài)碼
1XX：表示可續(xù)發(fā)請(qǐng)求
2XX：表示成功

* 202成功
* 204成功 不返回實(shí)體主體
* 206成功 執(zhí)行了一個(gè)范圍請(qǐng)求

3XX：表示重定向

* 301永久重定向，增加SEO排名
* 302臨時(shí)重定向 禁止POST變?yōu)镚ET
* 303另外一個(gè)URI
* 304判斷是否要更新緩存 請(qǐng)求頭部攜帶if-modified-since自從上次更新距這次多久
* 307臨時(shí)重定向

4XX：表示客戶(hù)端錯(cuò)誤

* 400客戶(hù)端語(yǔ)法錯(cuò)誤
* 401請(qǐng)求未經(jīng)授權(quán)
* 403服務(wù)器拒絕服務(wù)
* 404請(qǐng)求資源不存在

5XX：服務(wù)端錯(cuò)誤

* 500不可預(yù)期的錯(cuò)誤
* 503此時(shí)不能提供服務(wù) 稍后恢復(fù)正常

header中的connecton:close

服務(wù)器主動(dòng)關(guān)閉TCP連接，客戶(hù)端被動(dòng)關(guān)閉連接

header中的connecton:keepalive

連接保持一段時(shí)間，可以連續(xù)發(fā)送http請(qǐng)求

onload ready區(qū)別：

ready表示文檔加載完畢，不包括圖片

onload表示都加載完畢