摘要：并且這個(gè)對(duì)象屬性和方法允許指定請(qǐng)求細(xì)節(jié)和提取響應(yīng)數(shù)據(jù)。此請(qǐng)求不會(huì)被緩存。在發(fā)送完成請(qǐng)求以后，下一步將會(huì)取得響應(yīng)。

腳本化HTTP
下面將會(huì)用js代碼操縱HTTP
下面將會(huì)說明在沒有導(dǎo)致web瀏覽器重新加載任何窗口或者窗體的情況下，腳本實(shí)現(xiàn)web瀏覽器和服務(wù)器之間的通信。
ajax：為一種找早起避免頁面重載而動(dòng)態(tài)更新頁面的方式，不過現(xiàn)在是直接數(shù)據(jù)驅(qū)動(dòng)，或者類似于vue的單頁應(yīng)用
comet：這個(gè)和ajax正好相反，為推送消息到web瀏覽器端

ps；ajax和comet都為一個(gè)美國的洗滌日用品牌，╮(╯▽╰)╭

img元素有一個(gè)src屬性，當(dāng)腳本設(shè)置img元素的src屬性，且把信息作為圖片的url的查詢字符串部分，即能把經(jīng)過編碼的信息椽筆給web服務(wù)器，web服務(wù)器實(shí)際上必須返回一個(gè)圖片作為結(jié)果。
事實(shí)上，使用一個(gè)空的js腳本也可完成此操作
一個(gè)百度統(tǒng)計(jì)的js腳本如下

(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d2539dae35b4dcf0e7814c110ecefa9f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();

分析，一個(gè)采用es5編寫的一個(gè)閉包，動(dòng)態(tài)加載一個(gè)script標(biāo)簽，向https://hm.baidu.com/hm.js?d2...，并且查詢的字符串為？后面的參數(shù)，服務(wù)器只需要統(tǒng)計(jì)？后面的get請(qǐng)求數(shù)目，即可完成一次次的統(tǒng)計(jì)任務(wù)。用戶的頁面停留，直接計(jì)算兩次加載的時(shí)間差即可。數(shù)據(jù)庫完成統(tǒng)計(jì)即可。一個(gè)最簡(jiǎn)單的頁面統(tǒng)計(jì)完成。

一個(gè)淘汰的標(biāo)簽。
下面是舊的ajax方式
使用iframe完成一次ajax，腳本先把要發(fā)送給web服務(wù)器的信息編碼到url中，服務(wù)器在動(dòng)態(tài)的創(chuàng)建一個(gè)html文檔，將其內(nèi)容返回給web，在iframe中顯示，這種方式受道同源的限制。
上方的方式以及放棄。

通過script元素的src屬性設(shè)置url發(fā)起http get請(qǐng)求，即一種基于script的ajax傳輸，服務(wù)器使用json編碼，執(zhí)行腳本的時(shí)候，將其轉(zhuǎn)碼，這種的ajax同時(shí)也稱為jsonp
即這種的跨域可以不受到同源的限制

ajax中的x為xml為一種可選的通信方式，也可以使用JSON完成通信。

一些更多的通信協(xié)議，包括rpc（遠(yuǎn)程過程調(diào)用）允許運(yùn)行于一臺(tái)計(jì)算機(jī)的程序調(diào)用另一臺(tái)計(jì)算機(jī)程序的子程序。如果面向?qū)ο缶幊蹋瑒t遠(yuǎn)程過程調(diào)用為遠(yuǎn)程調(diào)用，遠(yuǎn)程方法調(diào)用。

一種設(shè)計(jì)模式，有兩種，一種是觀察者模式，一種是發(fā)布訂閱模式，
即，消息推送使用的是發(fā)布/訂閱事件系統(tǒng)

意圖：定義對(duì)象間的一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象狀態(tài)發(fā)生改變時(shí)，所有依賴它的對(duì)象都得到通知，并進(jìn)行更新
解決：一個(gè)對(duì)象狀態(tài)給其他對(duì)象通知的問題，
舉例應(yīng)用：有個(gè)天氣中心的目標(biāo)A，專門監(jiān)聽天氣的變化，而有個(gè)顯示天氣的觀察者B，B把自己注冊(cè)到A里，當(dāng)A觸發(fā)天氣變化的時(shí)候，調(diào)度B更新方法，并帶上自己的上下文。

訂閱者把自己想注冊(cè)的事件注冊(cè)到調(diào)度中心，當(dāng)該事件觸發(fā)時(shí)，發(fā)布者發(fā)布事件到調(diào)度中心，由調(diào)度中心統(tǒng)一調(diào)度訂閱者注冊(cè)到調(diào)度中心的處理代碼。
舉例：有個(gè)界面實(shí)時(shí)顯示天氣，它就訂閱天氣事件（注冊(cè)到調(diào)度中心），當(dāng)天氣變化時(shí)定時(shí)獲取數(shù)據(jù)，作為發(fā)布者到調(diào)度中心，調(diào)度中心調(diào)度訂閱者的天氣處理程序。

一個(gè)為點(diǎn)對(duì)點(diǎn)，一個(gè)為中間有一個(gè)過渡的，僅此而已。

ps 有一本書js的設(shè)計(jì)模式，推薦看看 http://shop.oreilly.com/produ...  以及 https://addyosmani.com/resour...
購買 https://www.amazon.com/_/dp/1...
很想知道有木有中文版的。吐槽 28美元，合計(jì)120多元，書怎么那么貴呢。好貴，建議注冊(cè)一下

瀏覽器在CMLHttpRequest類上定義了其HTTP 的API 這個(gè)類的每個(gè)實(shí)例都表示一個(gè)獨(dú)立請(qǐng)求/響應(yīng)對(duì)。并且這個(gè)對(duì)象屬性和方法允許指定請(qǐng)求細(xì)節(jié)和提取響應(yīng)數(shù)據(jù)。

同java類似，使用這個(gè)api的第一件事實(shí)例化XMLHttpRequest對(duì)象

ps：能重用已存在的XMLHttpRequest 但是之前的對(duì)象將會(huì)被掛起

http請(qǐng)求方法或者動(dòng)作

正在請(qǐng)求的URL

一個(gè)可選的請(qǐng)求頭集合，其中可能包含身份驗(yàn)證信息

一個(gè)可選的請(qǐng)求主題

一個(gè)數(shù)字和文字組合成的狀態(tài)碼，如404（表示不存在）

一個(gè)響應(yīng)頭集合

響應(yīng)主體

在本地寫js的時(shí)候，必須搭建一個(gè)服務(wù)器其AJAX才能工作
原因：因?yàn)槲募膮f(xié)議為file而本地的請(qǐng)求的協(xié)議為http，由于同源策略的影響，導(dǎo)致無法使用http協(xié)議的文件，故本地?zé)o法直接使用ajax

解決方法，chrome的瀏覽器訪問https://chrome.google.com/web... 安裝chrome官方提供的本地測(cè)試服務(wù)器，用于在本地搭建服務(wù)器。
或者，編寫Node.js 使用Express框架，加載Static 模塊，完成本地的靜態(tài)服務(wù)器搭建。

指定請(qǐng)求使用的是request.open()，此方法將會(huì)初始化一個(gè)請(qǐng)求從js代碼中調(diào)用。
第一個(gè)參數(shù)指定HTTP方法或動(dòng)作，字符串不區(qū)分大小寫，通常用大寫字母匹配HTTP協(xié)議，GET用于常規(guī)請(qǐng)求，適用于當(dāng)URL完全指定請(qǐng)求資源。當(dāng)請(qǐng)求對(duì)服務(wù)器沒有任何副作用以及當(dāng)服務(wù)器的響應(yīng)可緩存的時(shí)候，使用GET。對(duì)于POST來說，常常用于HTML表單，它在請(qǐng)求主體中包含額外數(shù)據(jù)，即表單數(shù)據(jù)，且這些數(shù)據(jù)常常儲(chǔ)存到服務(wù)器的數(shù)據(jù)庫中。此請(qǐng)求不會(huì)被緩存。
同樣的，還允許其他的一些請(qǐng)求，例如DELETE，HEAD，OPTIONS，PUT等請(qǐng)求。
第二個(gè)參數(shù)為URL，為請(qǐng)求的主體，相對(duì)于文檔的URL，這個(gè)文檔包含調(diào)用open()的腳本，這個(gè)不能跨域，請(qǐng)求必須為同域的

request.setRequestHeader("Content-type", "text/plain");

下面將會(huì)設(shè)置請(qǐng)求頭，上方設(shè)置請(qǐng)求頭為Content-type的內(nèi)容為text/plain

有些請(qǐng)求頭由于瀏覽器的安全問題，被禁止請(qǐng)求，所以有些不能請(qǐng)求。

如果請(qǐng)求一個(gè)受到密碼保護(hù)的url，此時(shí)不需要設(shè)置Authorization頭，只需要直接在open的第三四個(gè)參數(shù)，傳入即可。

由于get請(qǐng)求不包括主體，則直接send方法即可完成一個(gè)包的發(fā)送，

在http://1.197.156.53/編寫js如下

// 編寫請(qǐng)求頭GET并完成發(fā)送
var request = new XMLHttpRequest();    // 設(shè)置請(qǐng)求的類
request.open("GET", "https://www.baidu.com/");    // 設(shè)置請(qǐng)求的鏈接和方式
request.setRequestHeader("Content-Type", "text/plain");    // 設(shè)置請(qǐng)求頭
request.send(null);    // 發(fā)送包

跨域請(qǐng)求被攔截。
由于不是同源，同源被攔截

// 編寫請(qǐng)求頭GET并完成發(fā)送
var request = new XMLHttpRequest();    // 設(shè)置請(qǐng)求的類
request.open("GET", "./index.js");    // 設(shè)置請(qǐng)求的鏈接和方式
request.setRequestHeader("Content-Type", "text/plain");    // 設(shè)置請(qǐng)求頭
request.send(null);    // 發(fā)送包

完成一次發(fā)包操作

HTTP請(qǐng)求的各個(gè)部分有指定的順序，請(qǐng)求方法和URL會(huì)首先到達(dá)，然后接著請(qǐng)求頭，最后請(qǐng)求主體。最后調(diào)用send()方法，完成發(fā)送。
順序問題:必須先調(diào)用open后調(diào)用send()才方可。

function postMessage(msg) {
    var request = new XMLHttpRequest();    // 新請(qǐng)求
    request.open("post", "/log.php");    // 用POST向服務(wù)器端發(fā)送腳本
    // 用請(qǐng)求主體發(fā)送純文本消息
    request.setRequestHeader("Content-Type", "text.plain;charset=utf-8");    // 請(qǐng)求主體將是純文本

    request.send(msg);
    // 請(qǐng)求完成，我們將忽略任何響應(yīng)和任何錯(cuò)誤
}

即上方定義了一個(gè)post請(qǐng)求，完成其發(fā)送，等待其服務(wù)器響應(yīng)

send()發(fā)送以后將會(huì)等待服務(wù)器響應(yīng)，此時(shí)將不會(huì)阻塞。
在HTTP發(fā)送完成請(qǐng)求以后，下一步將會(huì)取得響應(yīng)。
下面編寫函數(shù)獲取HTTP響應(yīng)的onreadystatechange

// 發(fā)出一個(gè)HTTP GET請(qǐng)求獲取指定的URL的內(nèi)容
// 當(dāng)響應(yīng)成功到達(dá)，驗(yàn)證它是否是純文本
// 如果是，將會(huì)把它傳遞給指定的回調(diào)函數(shù)
function getText(url, callback) {
    var request = new XMLHttpRequest();    // 創(chuàng)建一個(gè)新請(qǐng)求
    request.open("GET", url);    // 創(chuàng)建一個(gè)指定待獲取的url
    request.onreadystatechange = () => {    // 當(dāng)GRT請(qǐng)求完成以后，觸發(fā)該事件，產(chǎn)生回調(diào)函數(shù)
        // 如果請(qǐng)求完成，則它是成功的
        if (request.readyState === 4 && request.status === 200){    // 如果下載操作完成，即為4，并且http狀態(tài)碼為200
            var type = request.getResponnseHeader("Content-Type");    // 獲取HTTP頭部信息
            if (type.match(/^text/))    //正則匹配，確定響應(yīng)為文本
                callback(request.responseText);    // 回調(diào)函數(shù),將返回的DOM樹，傳遞給回調(diào)函數(shù)
        }
    };

    request.send(null);    // 發(fā)送
}

注意，該方式為異步的，send方法不會(huì)阻塞其他操作

由于其下載的問題，一般異步處理HTTP響應(yīng)，但是同步也可以，不過由于客戶端js為單線程的，當(dāng)send()方法阻塞以后，將會(huì)導(dǎo)致瀏覽器的ui被凍結(jié)，如果連接的服務(wù)器過慢，將會(huì)導(dǎo)致用戶的操作出現(xiàn)問題。

方法直接open使用第三個(gè)參數(shù)為false

當(dāng)服務(wù)器響應(yīng)的為XML文檔的時(shí)候，其返回的值為document對(duì)象，能使用操作節(jié)點(diǎn)的方式，對(duì)其進(jìn)行操作
當(dāng)服務(wù)器發(fā)送對(duì)象或者數(shù)組的結(jié)構(gòu)化數(shù)據(jù)，如JSON，

使用JSON.parse 對(duì)結(jié)構(gòu)化數(shù)據(jù)進(jìn)行解析

下方書寫一個(gè)函數(shù)，進(jìn)行結(jié)構(gòu)化數(shù)據(jù)的解析

// 發(fā)起HTTP GET響應(yīng)，獲得指定的URL內(nèi)容
// 當(dāng)響應(yīng)到達(dá)時(shí)，把他們解析后的XML Document對(duì)象，解析后的JSON對(duì)象
// 或者字符串形式傳遞給回調(diào)函數(shù)
function get(url, callback){
    var request = new XMLHttpRequest();
    request.open("GET", url);    // 指定url
    request.onreadystatechange = () => {    // 監(jiān)聽器
        // 如果請(qǐng)求完成且成功
        if (request.readyState === 4 && request.status === 200) {
            // 獲得響應(yīng)請(qǐng)求
            var type = request.getResponseHeader("Content-Type");
            // 檢查類型
            // 當(dāng)為xml的時(shí)候
            if (type.indexOf("xml") !== -1 && request.responseXML)    // 確認(rèn)是否為xml
                calback(request.responseXML);    // 回調(diào)函數(shù)
            else if (type === "application/json")    // 如果頭部的信息為JSON
                callback(JSON.parse(request.responseText));    // 將結(jié)果JSON格式解析
            else 
                callback(request.responseText);    // 如果是字符串響應(yīng)
        }
    };
    request.send(null);    // 立即發(fā)送請(qǐng)求
}

對(duì)兩種數(shù)據(jù)解析，一種為JSON格式，一種為XML格式

ps 不建議使用eval
ps 由于跨域的問題，只能讀取同源的數(shù)據(jù)，通過script腳本操縱HTTP腳本并實(shí)現(xiàn)加載并執(zhí)行腳本
script 元素能發(fā)起跨域的HTTP請(qǐng)求

能使用request.overrideMimeType能夠?qū)崿F(xiàn)對(duì)MIME類型的更改