摘要：導(dǎo)讀全稱即異步與它最早在中被使用然后由推廣開來典型的代表應(yīng)用有以及現(xiàn)代網(wǎng)頁中幾乎無不歡前后端分離也正是建立在異步通信的基礎(chǔ)之上瀏覽器為做了什么現(xiàn)代瀏覽器中雖然幾乎全部支持但它們的技術(shù)方案卻分為兩種標(biāo)準(zhǔn)瀏覽器通過對象實(shí)現(xiàn)了的功能只需要通過一行

Ajax 全稱 Asynchronous JavaScript and XML, 即異步JS與XML. 它最早在IE5中被使用, 然后由Mozilla, Apple, Google推廣開來. 典型的代表應(yīng)用有 Outlook Web Access, 以及 GMail. 現(xiàn)代網(wǎng)頁中幾乎無ajax不歡. 前后端分離也正是建立在ajax異步通信的基礎(chǔ)之上.

現(xiàn)代瀏覽器中, 雖然幾乎全部支持ajax, 但它們的技術(shù)方案卻分為兩種:

① 標(biāo)準(zhǔn)瀏覽器通過 XMLHttpRequest 對象實(shí)現(xiàn)了ajax的功能. 只需要通過一行語句便可創(chuàng)建一個用于發(fā)送ajax請求的對象.

var xhr = new XMLHttpRequest();

② IE瀏覽器通過 XMLHttpRequest 或者 ActiveXObject 對象同樣實(shí)現(xiàn)了ajax的功能.

鑒于IE系列各種 "神級" 表現(xiàn), 我們先來看看IE瀏覽器風(fēng)騷的走位.

IE下的使用環(huán)境略顯復(fù)雜, IE7及更高版本瀏覽器可以直接使用BOM的 XMLHttpRequest 對象. MSDN傳送門: Native XMLHTTPRequest object. IE6及更低版本瀏覽器只能使用 ActiveXObject 對象來創(chuàng)建 XMLHttpRequest 對象實(shí)例. 創(chuàng)建時需要指明一個類似"Microsoft.XMLHTTP"這樣的ProgID. 而實(shí)際呢, windows系統(tǒng)環(huán)境下, 以下ProgID都應(yīng)該可以創(chuàng)建XMLHTTP對象:

Microsoft.XMLHTTP
Microsoft.XMLHTTP.1.0
Msxml2.ServerXMLHTTP
Msxml2.ServerXMLHTTP.3.0
Msxml2.ServerXMLHTTP.4.0
Msxml2.ServerXMLHTTP.5.0
Msxml2.ServerXMLHTTP.6.0
Msxml2.XMLHTTP
Msxml2.XMLHTTP.3.0
Msxml2.XMLHTTP.4.0
Msxml2.XMLHTTP.5.0
Msxml2.XMLHTTP.6.0

簡言之, Microsoft.XMLHTTP 已經(jīng)非常老了, 主要用于提供對歷史遺留版本的支持, 不建議使用.對于 MSXML4, 它已被 MSXML6 替代; 而 MSXML5 又是專門針對office辦公場景, 在沒有安裝 Microsoft Office 2003 及更高版本辦公軟件的情況下, MSXML5 未必可用. 相比之下, MSXML6 具有比 MSXML3 更穩(wěn)定, 更高性能, 更安全的優(yōu)勢, 同時它也提供了一些 MSXML3 中沒有的功能, 比如說 XSD schema. 唯一遺憾的是, MSXML6 只在 vista 系統(tǒng)及以上才是默認(rèn)支持的; 而 MSXML3 在 Win2k SP4及以上系統(tǒng)就是可用的. 因此一般情況下, MSXML3 可以作為 MSXML6 的優(yōu)雅降級方案, 我們通過指定 PorgID 為 Msxml2.XMLHTTP 即可自動映射到 Msxml2.XMLHTTP.3.0. 如下所示:

var xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3,等同于如下語句
var xhr = new ActiveXObject("MSXML2.XMLHTTP.3.0");

MSDN有篇文章專門講解了各個版本的MSXML. 傳送門: Using the right version of MSXML in Internet Explorer.

親測了 IE5, IE5.5, IE6, IE7, IE8, IE9, IE10, IE edge等瀏覽器, IE5及之后的瀏覽器均可以通過如下語句獲取xhr對象:

var xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3
var xhr = new ActiveXObject("Microsoft.XMLHTTP");// 很老的api,雖然瀏覽器支持,功能可能不完善,故不建議使用

以上, 思路已經(jīng)很清晰了, 下面給出個全兼容的方法.

function getXHR(){
  var xhr = null;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { 
        alert("您的瀏覽器暫不支持Ajax!");
      }
    }
  }
  return xhr;
}

對于這個問題, 我們先看下瀏覽器線程機(jī)制. 一般情況下, 瀏覽器有如下四種線程:

GUI渲染線程

javascript引擎線程

瀏覽器事件觸發(fā)線程

HTTP請求線程

那么這么多線程, 它們究竟是怎么同js引擎線程交互的呢?

通常, 它們的線程間交互以事件的方式發(fā)生, 通過事件回調(diào)的方式予以通知. 而事件回調(diào), 又是以先進(jìn)先出的方式添加到任務(wù)隊(duì)列 的末尾 , 等到j(luò)s引擎空閑時, 任務(wù)隊(duì)列 中排隊(duì)的任務(wù)將會依次被執(zhí)行. 這些事件回調(diào)包括 setTimeout, setInterval, click, ajax異步請求等回調(diào).

瀏覽器中, js引擎線程會循環(huán)從 任務(wù)隊(duì)列 中讀取事件并且執(zhí)行, 這種運(yùn)行機(jī)制稱作 Event Loop (事件循環(huán)).

對于一個ajax請求, js引擎首先生成 XMLHttpRequest 實(shí)例對象, open過后再調(diào)用send方法. 至此, 所有的語句都是同步執(zhí)行. 但從send方法內(nèi)部開始, 瀏覽器為將要發(fā)生的網(wǎng)絡(luò)請求創(chuàng)建了新的http請求線程, 這個線程獨(dú)立于js引擎線程, 于是網(wǎng)絡(luò)請求異步被發(fā)送出去了. 另一方面, js引擎并不會等待 ajax 發(fā)起的http請求收到結(jié)果, 而是直接順序往下執(zhí)行.

當(dāng)ajax請求被服務(wù)器響應(yīng)并且收到response后, 瀏覽器事件觸發(fā)線程捕獲到了ajax的回調(diào)事件 onreadystatechange (當(dāng)然也可能觸發(fā)onload, 或者 onerror等等) . 該回調(diào)事件并沒有被立即執(zhí)行, 而是被添加到 任務(wù)隊(duì)列 的末尾. 直到j(luò)s引擎空閑了, 任務(wù)隊(duì)列 的任務(wù)才被撈出來, 按照添加順序, 挨個執(zhí)行, 當(dāng)然也包括剛剛append到隊(duì)列末尾的 onreadystatechange 事件.

在 onreadystatechange 事件內(nèi)部, 有可能對dom進(jìn)行操作. 此時瀏覽器便會掛起js引擎線程, 轉(zhuǎn)而執(zhí)行GUI渲染線程, 進(jìn)行UI重繪(repaint)或者回流(reflow). 當(dāng)js引擎重新執(zhí)行時, GUI渲染線程又會被掛起, GUI更新將被保存起來, 等到j(luò)s引擎空閑時立即被執(zhí)行.

以上整個ajax請求過程中, 有涉及到瀏覽器的4種線程. 其中除了 GUI渲染線程 和 js引擎線程 是互斥的. 其他線程相互之間, 都是可以并行執(zhí)行的. 通過這樣的一種方式, ajax并沒有破壞js的單線程機(jī)制.

通常, ajax 和 setTimeout 的事件回調(diào)都被同等的對待, 按照順序自動的被添加到 任務(wù)隊(duì)列 的末尾, 等待js引擎空閑時執(zhí)行. 但請注意, 并非xhr的所有回調(diào)執(zhí)行都滯后于setTImeout的回調(diào). 請看如下代碼:

function ajax(url, method){
  var xhr = getXHR();
  xhr.onreadystatechange = function(){
      console.log("xhr.readyState:" + this.readyState);
  }
  xhr.onloadstart = function(){
      console.log("onloadStart");
  }
  xhr.onload = function(){
      console.log("onload");
  }
  xhr.open(method, url, true);
  xhr.setRequestHeader("Cache-Control",3600);
  xhr.send();
}
var timer = setTimeout(function(){
  console.log("setTimeout");
},0);
ajax("http://louiszhai.github.io/docImages/ajax01.png","GET");

上述代碼執(zhí)行結(jié)果如下圖:

由于ajax異步, setTimeout回調(diào)本應(yīng)該最先被執(zhí)行, 然而實(shí)際上, 一次ajax請求, 并非所有的部分都是異步的, 至少"readyState==1"的 onreadystatechange 回調(diào)以及 onloadstart 回調(diào)就是同步執(zhí)行的. 因此它們的輸出排在最前面.

首先在Chrome console下創(chuàng)建一個 XMLHttpRequest 實(shí)例對象xhr. 如下所示:

試運(yùn)行以下代碼.

var xhr = new XMLHttpRequest(),
    i=0;
for(var key in xhr){
    if(xhr.hasOwnProperty(key)){
       i++;
   }
}
console.log(i);//0
console.log(XMLHttpRequest.prototype.hasOwnProperty("timeout"));//true

可見, XMLHttpRequest 實(shí)例對象沒有自有屬性. 實(shí)際上, 它的所有屬性均來自于 XMLHttpRequest.prototype .

追根溯源, XMLHttpRequest 實(shí)例對象具有如下的繼承關(guān)系. (下面以a<

xhr << XMLHttpRequest.prototype << XMLHttpRequestEventTarget.prototype << EventTarget.prototype << Object.prototype

由上, xhr也具有Object等原型中的所有方法. 如toString方法.

xhr.toString();//"[object XMLHttpRequest]"

通常, 一個xhr實(shí)例對象擁有10個普通屬性+9個方法.

只讀屬性, readyState屬性記錄了ajax調(diào)用過程中所有可能的狀態(tài). 它的取值簡單明了, 如下:

注意, readyState 是一個只讀屬性, 想要改變它的值是不可行的.

onreadystatechange事件回調(diào)方法在readystate狀態(tài)改變時觸發(fā), 在一個收到響應(yīng)的ajax請求周期中, onreadystatechange 方法會被觸發(fā)4次. 因此可以在 onreadystatechange 方法中綁定一些事件回調(diào), 比如:

xhr.onreadystatechange = function(e){
  if(xhr.readystate==4){
    var s = xhr.status;
    if((s >= 200 && s < 300) || s == 304){
      var resp = xhr.responseText;
      //TODO ...
    }
  }
}

注意: onreadystatechange回調(diào)中默認(rèn)會傳入Event實(shí)例, 如下:

只讀屬性, status表示http請求的狀態(tài), 初始值為0. 如果服務(wù)器沒有顯式地指定狀態(tài)碼, 那么status將被設(shè)置為默認(rèn)值, 即200.

只讀屬性, statusText表示服務(wù)器的響應(yīng)狀態(tài)信息, 它是一個 UTF-16 的字符串, 請求成功且status==20X時, 返回大寫的 OK . 請求失敗時返回空字符串. 其他情況下返回相應(yīng)的狀態(tài)描述. 比如: 301的 Moved Permanently , 302的 Found , 303的 See Other , 307 的 Temporary Redirect , 400的 Bad Request , 401的 Unauthorized 等等.

onloadstart事件回調(diào)方法在ajax請求發(fā)送之前觸發(fā), 觸發(fā)時機(jī)在 readyState==1 狀態(tài)之后, readyState==2 狀態(tài)之前.

onloadstart方法中默認(rèn)將傳入一個ProgressEvent事件進(jìn)度對象. 如下:

ProgressEvent對象具有三個重要的Read only屬性.

lengthComputable 表示長度是否可計算, 它是一個布爾值, 初始值為false.

loaded 表示已加載資源的大小, 如果使用http下載資源, 它僅僅表示已下載內(nèi)容的大小, 而不包括http headers等. 它是一個無符號長整型, 初始值為0.

total 表示資源總大小, 如果使用http下載資源, 它僅僅表示內(nèi)容的總大小, 而不包括http headers等, 它同樣是一個無符號長整型, 初始值為0.

onprogress事件回調(diào)方法在 readyState==3 狀態(tài)時開始觸發(fā), 默認(rèn)傳入 ProgressEvent 對象, 可通過 e.loaded/e.total 來計算加載資源的進(jìn)度, 該方法用于獲取資源的下載進(jìn)度.

注意: 該方法適用于 IE10+ 及其他現(xiàn)代瀏覽器.

xhr.onprogress = function(e){
  console.log("progress:", e.loaded/e.total);
}

onload事件回調(diào)方法在ajax請求成功后觸發(fā), 觸發(fā)時機(jī)在 readyState==4 狀態(tài)之后.

想要捕捉到一個ajax異步請求的成功狀態(tài), 并且執(zhí)行回調(diào), 一般下面的語句就足夠了:

xhr.onload = function(){
  var s = xhr.status;
  if((s >= 200 && s < 300) || s == 304){
    var resp = xhr.responseText;
    //TODO ...
  }
}

onloadend事件回調(diào)方法在ajax請求完成后觸發(fā), 觸發(fā)時機(jī)在 readyState==4 狀態(tài)之后(收到響應(yīng)時) 或者 readyState==2 狀態(tài)之后(未收到響應(yīng)時).

onloadend方法中默認(rèn)將傳入一個ProgressEvent事件進(jìn)度對象.

timeout屬性用于指定ajax的超時時長. 通過它可以靈活地控制ajax請求時間的上限. timeout的值滿足如下規(guī)則:

通常設(shè)置為0時不生效.

設(shè)置為字符串時, 如果字符串中全部為數(shù)字, 它會自動將字符串轉(zhuǎn)化為數(shù)字, 反之該設(shè)置不生效.

設(shè)置為對象時, 如果該對象能夠轉(zhuǎn)化為數(shù)字, 那么將設(shè)置為轉(zhuǎn)化后的數(shù)字.

xhr.timeout = 0; //不生效
xhr.timeout = "123"; //生效, 值為123
xhr.timeout = "123s"; //不生效
xhr.timeout = ["123"]; //生效, 值為123
xhr.timeout = {a:123}; //不生效

ontimeout方法在ajax請求超時時觸發(fā), 通過它可以在ajax請求超時時做一些后續(xù)處理.

xhr.ontimeout = function(e) {
  console.error("請求超時!!!")
}

均為只讀屬性, response表示服務(wù)器的響應(yīng)內(nèi)容, 相應(yīng)的, responseText表示服務(wù)器響應(yīng)內(nèi)容的文本形式.

只讀屬性, responseXML表示xml形式的響應(yīng)數(shù)據(jù), 缺省為null, 若數(shù)據(jù)不是有效的xml, 則會報錯.

responseType表示響應(yīng)的類型, 缺省為空字符串, 可取 "arraybuffer" , "blob" , "document" , "json" , and "text" 共五種類型.

responseURL返回ajax請求最終的URL, 如果請求中存在重定向, 那么responseURL表示重定向之后的URL.

withCredentials是一個布爾值, 默認(rèn)為false, 表示跨域請求中不發(fā)送cookies等信息. 當(dāng)它設(shè)置為true時, cookies , authorization headers 或者 TLS客戶端證書 都可以正常發(fā)送和接收. 顯然它的值對同域請求沒有影響.

注意: 該屬性適用于 IE10+, opera12+及其他現(xiàn)代瀏覽器.

abort方法用于取消ajax請求, 取消后, readyState 狀態(tài)將被設(shè)置為?0?(UNSENT). 如下, 調(diào)用abort 方法后, 請求將被取消.

getResponseHeader方法用于獲取ajax響應(yīng)頭中指定name的值. 如果response headers中存在相同的name, 那么它們的值將自動以字符串的形式連接在一起.

console.log(xhr.getResponseHeader("Content-Type"));//"text/html"

getAllResponseHeaders方法用于獲取所有安全的ajax響應(yīng)頭, 響應(yīng)頭以字符串形式返回. 每個HTTP報頭名稱和值用冒號分隔, 如key:value, 并以rn結(jié)束.

xhr.onreadystatechange = function() {
  if(this.readyState == this.HEADERS_RECEIVED) {
    console.log(this.getAllResponseHeaders());
  }
}
//Content-Type: text/html"

以上, readyState === 2 狀態(tài)時, 就意味著響應(yīng)頭已接受完整. 此時便可以打印出完整的 response headers.

既然可以獲取響應(yīng)頭, 那么自然也可以設(shè)置請求頭, setRequestHeader就是干這個的. 如下:

//指定請求的type為json格式
xhr.setRequestHeader("Content-type", "application/json");
//除此之外, 還可以設(shè)置其他的請求頭
xhr.setRequestHeader("x-requested-with", "123456");

onerror方法用于在ajax請求出錯后執(zhí)行. 通常只在網(wǎng)絡(luò)出現(xiàn)問題時或者ERR_CONNECTION_RESET時觸發(fā)(如果請求返回的是407狀態(tài)碼, chrome下也會觸發(fā)onerror).

upload屬性默認(rèn)返回一個 XMLHttpRequestUpload 對象, 用于上傳資源. 該對象具有如下方法:

onloadstart

onprogress

onabort

onerror

onload

ontimeout

onloadend

上述方法功能同 xhr 對象中同名方法一致. 其中, onprogress 事件回調(diào)方法可用于跟蹤資源上傳的進(jìn)度.

xhr.upload.onprogress = function(e){
  var percent = 100 * e.loaded / e.total |0;
  console.log("upload: " + precent + "%");
}

overrideMimeType方法用于強(qiáng)制指定response 的 MIME 類型, 即強(qiáng)制修改response的 Content-Type . 如下, 服務(wù)器返回的response的 MIME 類型為 text/plain .

xhr.getResponseHeader("Content-Type");//"text/plain"
xhr.responseXML;//null

通過overrideMimeType方法將response的MIME類型設(shè)置為 text/xml;charset=utf-8 , 如下所示:

xhr.overrideMimeType("text/xml; charset = utf-8");
xhr.send();

此時雖然 response headers 如上圖, 沒有變化, 但 Content-Type 已替換為新值.

xhr.getResponseHeader("Content-Type");//"text/xml; charset = utf-8"

此時, xhr.responseXML 也將返回DOM對象, 如下圖.

XHR1 即 XMLHttpRequest Level 1. XHR1時, xhr對象具有如下缺點(diǎn):

僅支持文本數(shù)據(jù)傳輸, 無法傳輸二進(jìn)制數(shù)據(jù).

傳輸數(shù)據(jù)時, 沒有進(jìn)度信息提示, 只能提示是否完成.

受瀏覽器 同源策略 限制, 只能請求同域資源.

沒有超時機(jī)制, 不方便掌控ajax請求節(jié)奏.

XHR2 即 XMLHttpRequest Level 2. XHR2針對XHR1的上述缺點(diǎn)做了如下改進(jìn):

支持二進(jìn)制數(shù)據(jù), 可以上傳文件, 可以使用FormData對象管理表單.

提供進(jìn)度提示, 可通過 xhr.upload.onprogress 事件回調(diào)方法獲取傳輸進(jìn)度.

依然受 同源策略 限制, 這個安全機(jī)制不會變. XHR2新提供 Access-Control-Allow-Origin 等headers, 設(shè)置為 * 時表示允許任何域名請求, 從而實(shí)現(xiàn)跨域CORS訪問(有關(guān)CORS詳細(xì)介紹請耐心往下讀).

可以設(shè)置timeout 及 ontimeout, 方便設(shè)置超時時長和超時后續(xù)處理.

這里就H5新增的FormData對象舉個例.

//可直接創(chuàng)建FormData實(shí)例
var data = new FormData();
data.append("name", "louis");
xhr.send(data);
//還可以通過傳入表單DOM對象來創(chuàng)建FormData實(shí)例
var form = document.getElementById("form");
var data = new FormData(form);
data.append("password", "123456");
xhr.send(data);

目前, 主流瀏覽器基本上都支持XHR2, 除了IE系列需要IE10及更高版本. 因此IE10以下是不支持XHR2的.

那么問題來了, IE7, 8,9的用戶怎么辦? 很遺憾, 這些用戶是比較尷尬的. 對于IE8,9而言, 只有一個閹割版的 XDomainRequest 可用,IE7則沒有. 估計IE7用戶只能哭暈在廁所了.

XDomainRequest 對象是IE8,9折騰出來的, 用于支持CORS請求非成熟的解決方案. 以至于IE10中直接移除了它, 并重新回到了 XMLHttpRequest 的懷抱.

XDomainRequest 僅可用于發(fā)送 GET 和 POST 請求. 如下即創(chuàng)建過程.

var xdr = new XDomainRequest();

xdr具有如下屬性:

timeout

responseText

如下方法:

open: 只能接收Method,和url兩個參數(shù). 只能發(fā)送異步請求.

send

abort

如下事件回調(diào):

onprogress

ontimeout

onerror

onload

除了缺少一些方法外, XDomainRequest 基本上就和 XMLHttpRequest 的使用方式保持一致.

必須要明確的是:

XDomainRequest 不支持跨域傳輸cookie.

只能設(shè)置請求頭的Content-Type字段, 且不能訪問響應(yīng)頭信息.

$.ajax是jquery對原生ajax的一次封裝. 通過封裝ajax, jquery抹平了不同版本瀏覽器異步http的差異性, 取而代之的是高度統(tǒng)一的api. jquery作為js類庫時代的先驅(qū), 對前端發(fā)展有著深遠(yuǎn)的影響. 了解并熟悉其ajax方法, 不可謂不重要.

$.ajax() 只有一個參數(shù), 該參數(shù)為key-value設(shè)置對象. 實(shí)際上, jq發(fā)送的所有ajax請求, 都是通過調(diào)用該ajax方法實(shí)現(xiàn)的. 它的詳細(xì)參數(shù)如下表:

$.ajax() 方法返回jqXHR對象(jq1.5起), 如果使用的不是XMLHttpRequest對象時, 如jsonp請求, 返回的jqXHR對象將盡可能模擬原生的xhr. 從jq1.5起, 返回的jqXHR對象實(shí)現(xiàn)了promise接口, 具有如下新方法.

從jq1.6開始, done, fail, always按照FIFO隊(duì)列可以分配多個回調(diào).

$.ajax() 的轉(zhuǎn)換器可以將支持的數(shù)據(jù)類型映射到其它數(shù)據(jù)類型. 如果需要將自定義數(shù)據(jù)類型映射到已知的類型. 需要使用 contents 選項(xiàng)在響應(yīng)的 "Content-Type" 和實(shí)際數(shù)據(jù)類型之間添加一個轉(zhuǎn)換函數(shù).

$.ajaxSetup({
  contents: {
    myContentType: /myContentType/
  },
  converters: {
    "myContentType json": function(data) {
      //TODO something
      return newData;
    }
  }
});

轉(zhuǎn)換一個支持的類型為自定義類型, 然后再返回. 如 text—>myContentType—>json.

$.ajaxSetup({
  contents: {
    myContentType: /myContentType/
  },
  converters: {
    "text myContentType": true,
    "myContentType json": function(data) {
      //TODO something
      return newData;
    }
  }
});

$.ajax()方法觸發(fā)的事件紛繁復(fù)雜, 有將近20個之多. 為了囊括最多的事件, 這里以一次成功的上傳請求為例, 以下是它們的調(diào)用順序(請求出現(xiàn)錯誤時的順序, 請自行對應(yīng)).

從jq1.8起, 對于函數(shù) ajaxStart, ajaxSend, ajaxSuccess, ajaxComplete, ajaxStop , 只能為document對象綁定事件處理函數(shù), 為其他元素綁定的事件處理函數(shù)不會起作用.

實(shí)際上, 如果你僅僅只是想要一個不錯的http庫, 相比于龐大臃腫的jquery, 短小精悍的Axios可能更加適合你. 原因如下:

Axios支持node, jquery并不支持.

Axios基于promise語法, jq3.0才開始全面支持.

Axios短小精悍, 更加適合http場景, jquery大而全, 加載較慢.

vue作者尤大放棄推薦vue-resource, 轉(zhuǎn)向推薦Axios. 以下為尤大原話.

"最近團(tuán)隊(duì)討論了一下, Ajax 本身跟 Vue 并沒有什么需要特別整合的地方, 使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果, vue-resource 提供的價值和其維護(hù)成本相比并不劃算, 所以決定在不久以后取消對 vue-resource 的官方推薦."

Axios大小僅12k, 目前最新版本號為:

語法上Axios基本就和promise一樣, 在then方法中處理回調(diào), 在catch方法中處理異常. 如下:

axios.get("https://api.github.com/users/louiszhai")
  .then(function(response){
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

除了get, 它還支持post, delete, head, put, patch, request請求. 具體使用攻略, 請戳這里: axios .

如需在網(wǎng)頁上引入 Axios, 可以鏈接CDN axios | Bootstrap中文網(wǎng)開源項(xiàng)目免費(fèi) CDN 服務(wù) 或者將其下載到本地.

說到ajax, 就不得不提及fetch, 由于篇幅較長, fetch已從本文中獨(dú)立出來, 請戳 Fetch進(jìn)階指南 .

CORS是一個W3C(World Wide Web)標(biāo)準(zhǔn), 全稱是跨域資源共享(Cross-origin resource sharing).它允許瀏覽器向跨域服務(wù)器, 發(fā)出異步http請求, 從而克服了ajax受同源策略的限制. 實(shí)際上, 瀏覽器不會攔截不合法的跨域請求, 而是攔截了他們的響應(yīng), 因此即使請求不合法, 很多時候, 服務(wù)器依然收到了請求.(Chrome和Firefox下https網(wǎng)站不允許發(fā)送http異步請求除外)

通常, 一次跨域訪問擁有如下流程:

當(dāng)前幾乎所有的桌面瀏覽器(Internet Explorer 8+, Firefox 3.5+, Safari 4+和 Chrome 3+)都可通過名為跨域資源共享的協(xié)議支持ajax跨域調(diào)用.

那么移動端兼容性又如何呢? 請看下圖:

可見, CORS的技術(shù)在IOS Safari7.1及Android webview2.3中就早已支持, 即使低版本下webview的canvas在使用跨域的video或圖片時會有問題, 也絲毫不影響CORS的在移動端的使用. 至此, 我們就可以放心大膽的去應(yīng)用CORS了.

1) HTTP Response Header(服務(wù)器提供):

Access-Control-Allow-Origin: 指定允許哪些源的網(wǎng)頁發(fā)送請求.

Access-Control-Allow-Credentials: 指定是否允許cookie發(fā)送.

Access-Control-Allow-Methods: 指定允許哪些請求方法.

Access-Control-Allow-Headers: 指定允許哪些常規(guī)的頭域字段, 比如說 Content-Type.

Access-Control-Expose-Headers: 指定允許哪些額外的頭域字段, 比如說 X-Custom-Header.

該字段可省略. CORS請求時, xhr.getResponseHeader() 方法默認(rèn)只能獲取6個基本字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma . 如果需要獲取其他字段, 就需要在Access-Control-Expose-Headers 中指定. 如上, 這樣xhr.getResponseHeader("X-Custom-Header") 才能返回X-Custom-Header字段的值.(該部分摘自阮一峰老師博客)

Access-Control-Max-Age: 指定preflight OPTIONS請求的有效期, 單位為秒.

2) HTTP Request Header(瀏覽器OPTIONS請求默認(rèn)自帶):

Access-Control-Request-Method: 告知服務(wù)器,瀏覽器將發(fā)送哪種請求, 比如說POST.

Access-Control-Request-Headers: 告知服務(wù)器, 瀏覽器將包含哪些額外的頭域字段.

3) 以下所有的header name 是被拒絕的:

Accept-Charset

Accept-Encoding

Access-Control-Request-Headers

Access-Control-Request-Method

Connection

Content-Length

Cookie

Cookie2

Date

DNT

Expect

Host

Keep-Alive

Origin

Referer

TE

Trailer

Transfer-Encoding

Upgrade

Via

包含以Proxy- 或 Sec- 開頭的header name

CORS請求分為兩種, ① 簡單請求; ② 非簡單請求.

滿足如下兩個條件便是簡單請求, 反之則為非簡單請求.(CORS請求部分摘自阮一峰老師博客)

1) 請求是以下三種之一:

HEAD

GET

POST

2) http頭域不超出以下幾種字段:

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type字段限三個值 application/x-www-form-urlencoded、multipart/form-data、text/plain

對于簡單請求, 瀏覽器將發(fā)送一次http請求, 同時在Request頭域中增加 Origin 字段, 用來標(biāo)示請求發(fā)起的源, 服務(wù)器根據(jù)這個源采取不同的響應(yīng)策略. 若服務(wù)器認(rèn)為該請求合法, 那么需要往返回的 HTTP Response 中添加 Access-Control-* 等字段.( Access-Control-* 相關(guān)字段解析請閱讀我之前寫的CORS 跨域訪問 )

對于非簡單請求, 比如Method為POST且Content-Type值為 application/json 的請求或者M(jìn)ethod為 PUT 或 DELETE 的請求, 瀏覽器將發(fā)送兩次http請求. 第一次為preflight預(yù)檢(Method: OPTIONS),主要驗(yàn)證來源是否合法. 值得注意的是:OPTION請求響應(yīng)頭同樣需要包含 Access-Control-* 字段等. 第二次才是真正的HTTP請求. 所以服務(wù)器必須處理OPTIONS應(yīng)答(通常需要返回20X的狀態(tài)碼, 否則xhr.onerror事件將被觸發(fā)).

以上請求流程圖為:

http-equiv 相當(dāng)于http的響應(yīng)頭, 它回應(yīng)給瀏覽器一些有用的信息,以幫助正確和精確地顯示網(wǎng)頁內(nèi)容. 如下html將允許任意域名下的網(wǎng)頁跨域訪問.

通常, 圖片允許跨域訪問, 也可以在canvas中使用跨域的圖片, 但這樣做會污染畫布, 一旦畫布受污染, 將無法讀取其數(shù)據(jù). 比如無法調(diào)用 toBlob(), toDataURL() 或 getImageData()方法. 瀏覽器的這種安全機(jī)制規(guī)避了未經(jīng)許可的遠(yuǎn)程服務(wù)器圖片被濫用的風(fēng)險.(該部分內(nèi)容摘自 啟用了 CORS 的圖片 - HTML（超文本標(biāo)記語言） | MDN)

因此如需在canvas中使用跨域的圖片資源, 請參考如下apache配置片段(來自HTML5 Boilerplate Apache server configs).

    
        
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        
    

ajax實(shí)現(xiàn)文件上傳非常簡單, 這里我選取原生js, jq, angular 分別來比較下, 并順便聊聊使用它們時的注意事項(xiàng).(ajax文件上傳的代碼已上傳至github, 請戳這里預(yù)覽效果: ajax 文件上傳 demo | louis)

1) 為了上傳文件, 我們得先選中一個文件. 一個type為file的input框就夠了.

2) 然后用FormData對象包裹?選中的文件.

var input = document.getElementById("input"),
    formData = new FormData();
formData.append("file",input.files[0]);//key可以隨意定義,只要后臺能理解就行

3) 定義上傳的URL, 以及方法. github上我搭建了一個 node-webserver, 根據(jù)需要可以自行克隆下來npm start后便可調(diào)試本篇代碼.

var url = "http://localhost:10108/test",
    method = "POST";

4.1) 封裝一個用于發(fā)送ajax請求的方法.

function ajax(url, method, data){
  var xhr = null;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { 
        alert("您的瀏覽器暫不支持Ajax!");
      }
    }
  }
  xhr.onerror = function(e){
    console.log(e);
  }
  xhr.open(method, url);
  try{
    setTimeout(function(){
      xhr.send(data);
    });
  }catch(e){
    console.log("error:",e);
  }
  return xhr;
}

4.2) 上傳文件并綁定事件.

var xhr = ajax(url, method, formData);
xhr.upload.onprogress = function(e){
  console.log("upload progress:", e.loaded/e.total*100 + "%");
};
xhr.upload.onload = function(){
  console.log("upload onload.");
};
xhr.onload = function(){
  console.log("onload.");
}

上傳結(jié)果如下所示:

5) fetch只要發(fā)送一個post請求, 并且body屬性設(shè)置為formData即可. 遺憾的是, fetch無法跟蹤上傳的進(jìn)度信息.

fetch(url, {
  method: method,
  body: formData
  }).then(function(res){
  console.log(res);
  }).catch(function(e){
  console.log(e);
});

jq提供了各式各樣的上傳插件, 其原理都是利用jq自身的ajax方法.

6) jq的ajax提供了xhr屬性用于自定義各種事件.

$.ajax({
  type: method,
  url: url,
  data: formData,
  processData : false,
  contentType : false ,//必須false才會自動加上正確的Content-Type
  xhr: function(){
    var xhr = $.ajaxSettings.xhr();//實(shí)際上就是return new window.XMLHttpRequest()對象
    if(xhr.upload) {
      xhr.upload.addEventListener("progress", function(e){
        console.log("jq upload progress:", e.loaded/e.total*100 + "%");
      }, false);
      xhr.upload.addEventListener("load", function(){
        console.log("jq upload onload.");
      });
      xhr.addEventListener("load", function(){
        console.log("jq onload.");
      });
      return xhr;
    }
  }
});

jq上傳結(jié)果如下所示:

有關(guān)jq ajax更多的api, 請參考中文文檔 jQuery.ajax() | jQuery API 中文文檔 .

7.1) angular提供了$http方法用于發(fā)送http請求, 該方法返回一個promise對象.

$http({
  method: method,
  url: url,
  data: formData,
}).success(function(res) {
  console.log(res);
}).error(function(err, status) {
  console.log(err);
});

angular文件上傳的代碼已上傳至github, 請戳這里預(yù)覽效果: angular 文件上傳 demo | louis.

低版本angular中文件上傳的功能并不完整, 直到angular1.5.5才在$http中加入了eventHandler和uploadEventHandlers等方法, 使得它支持上傳進(jìn)度信息. 如下:

$http({
  method: method,
  url: url,
  eventHandlers: {
    progress: function(c) {//下載進(jìn)度
      console.log("Progress -> " + c);
    }
  },
  uploadEventHandlers: {
    progress: function(e) {//上傳進(jìn)度
      console.log("UploadProgress -> " + e);
    }
  },
  data: formData,
}).success(function(res) {
  console.log(res);
}).error(function(err, status) {
  console.log(err);
});

angular1.5.5以下低版本中, 請參考成熟的實(shí)現(xiàn)方案 angular-file-upload 以及它提供的demo Simple example .

處理二進(jìn)制文件主要使用的是H5的FileReader.

PC支持性如下:

Mobile支持性如下:

以下是其API:

var xhr = new XMLHttpRequest(),
    url = "http://louiszhai.github.io/docImages/ajax01.png";
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.onload = function(){
  if(this.status == 200){
    var blob = this.response;
    var img = document.createElement("img");
    //方案一
    img.src = window.URL.createObjectURL(blob);//這里blob依然占據(jù)著內(nèi)存
    img.onload = function() {
      window.URL.revokeObjectURL(img.src);//釋放內(nèi)存
    };
    //方案二
    /*var reader = new FileReader();
    reader.readAsDataURL(blob);//FileReader將返回base64編碼的data-uri對象
    reader.onload = function(){
      img.src = this.result;
    }*/
    //方案三
    //img.src = url;//最簡單方法
    document.body.appendChild(img);
  }
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:8080/Information/download.jsp?data=node-fetch.js");
xhr.responseType = "blob";
xhr.onload = function(){
  if(this.status == 200){
    var blob = this.response;
    var reader = new FileReader();
    reader.readAsBinaryString(blob);//該方法已被移出標(biāo)準(zhǔn)api,建議使用reader.readAsText(blob);
    reader.onload=function(){
      document.body.innerHTML = "
" + this.result + "
";
    }
  }
}
xhr.send();

有關(guān)二進(jìn)制文件的讀取, 請移步這篇博客 HTML5新特性之文件和二進(jìn)制數(shù)據(jù)的操作 .

原生js可以使用ES6新增的Promise. ES6的Promise基于 Promises/A+ 規(guī)范(該部分 Fetch入門指南 一文也有提及).

這里先提供一個解析responses的函數(shù).

function todo(responses){
  responses.forEach(function(response){
    response.json().then(function(res){
      console.log(res);
    });
  });
}

原生js使用 Promise.all 方法. 如下:

var p1 = fetch("http://localhost:10108/test1"),
    p2 = fetch("http://localhost:10108/test2");
Promise.all([p1, p2]).then(function(responses){
  todo(responses);
  //TODO do somethings
});
//"test1"
//"test2"

jquery可以使用$.when方法. 該方法接受一個或多個Deferred對象作為參數(shù), 只有全部成功才調(diào)用resolved狀態(tài)的回調(diào)函數(shù), 但只要其中有一個失敗，就調(diào)用rejected狀態(tài)的回調(diào)函數(shù). 其實(shí), jq的Deferred是基于 Promises/A規(guī)范實(shí)現(xiàn), 但并非完全遵循. (傳送門: jQuery 中的 Deferred 和 Promises (2) ).

var p1 = $.ajax("http://localhost:10108/test1"),
    p2 = $.ajax("http://localhost:10108/test2");
$.when(p1, p2).then(function(res1, res2){
  console.log(res1);//["test1", "success", Object]
  console.log(res2);//["test2", "success", Object]
  //TODO do somethings
});

如上, $.when默認(rèn)返回一個jqXHR對象, 可以直接進(jìn)行鏈?zhǔn)秸{(diào)用. then方法的回調(diào)中默認(rèn)傳入相應(yīng)的請求結(jié)果, 每個請求結(jié)果的都是數(shù)組, 數(shù)組中依次是responseText, 請求狀態(tài), 請求的jqXHR對象.

angular中可以借助 $q.all() 來實(shí)現(xiàn). 別忘了, $q 需要在controller中注入. 此外, $q 相關(guān)講解可參考 AngularJS: ng.$q 或 Angular $q service學(xué)習(xí)筆記 .

var p1 = fetch("http://localhost:10108/test1"),
    p2 = fetch("http://localhost:10108/test2");
$q.all([p1, p2]).then(function(responses){
  todo(responses);
  //TODO do somethings
});
//"test1"
//"test2"

$q.all() 實(shí)際上就是對 Promise.all 的封裝.

ajax的一大痛點(diǎn)就是無法支持瀏覽器前進(jìn)和后退操作. 因此早期的Gmail 采用 iframe, 來模擬ajax的前進(jìn)和后退.

如今, H5普及, pjax大行其道. pajax 就是 ajax+history.pushState 組合的一種技術(shù). 使用它便可以無刷新通過瀏覽器前進(jìn)和后退來改變頁面內(nèi)容.

先看下兼容性.

可見IE8,9并不能使用 H5的history. 需要使用墊片 HTML5 History API expansion for browsers not supporting pushState, replaceState .

pjax簡單易用, 僅需要如下三個api:

history.pushState(obj, title, url) 表示往頁面history末尾新增一個歷史項(xiàng)(history entry), 此時history.length會+1.

history.replaceState(obj, title, url) 表示替換當(dāng)前歷史項(xiàng)為新的歷史項(xiàng). 此時history.length保持不變.

window.onpopstate 僅在瀏覽器前進(jìn)和后退時觸發(fā)(history.go(1), history.back() 及l(fā)ocation.href="xxx" 均會觸發(fā)), 此時可在history.state中拿到剛剛?cè)M(jìn)去的state, 即obj對象(其他數(shù)據(jù)類型亦可).

我們注意到, 首次進(jìn)入一個頁面, 此時 history.length 值為1, history.state 為空. 如下:

1) 為了在onpopstate事件回調(diào)中每次都能拿到 history.state , 此時需要在頁面載入完成后, 自動替換下當(dāng)前url.

history.replaceState("init", title, "xxx.html?state=0");

2) 每次發(fā)送ajax請求時, 在請求完成后, 調(diào)用如下, 從而實(shí)現(xiàn)瀏覽器history往前進(jìn).

history.pushState("ajax請求相關(guān)參數(shù)", title, "xxx.html?state=標(biāo)識符");

3) 瀏覽器前進(jìn)和后退時, popstate 事件會自動觸發(fā), 此時我們手動取出 history.state , 構(gòu)建參數(shù)并重新發(fā)送ajax請求或者直接取用state值, 從而實(shí)現(xiàn)無刷新還原頁面.

window.addEventListener("popstate", function(e) {
    var currentState = history.state;
    //TODO 拼接ajax請求參數(shù)并重新發(fā)送ajax請求, 從而回到歷史頁面
      //TODO 或者從state中拿到關(guān)鍵值直接還原歷史頁面
});

popstate 事件觸發(fā)時, 默認(rèn)會傳入 PopStateEvent 事件對象. 該對象具有如下屬性.

如有不懂, 更詳細(xì)講解請移步 : ajax與HTML5 history pushState/replaceState實(shí)例 ? 張鑫旭-鑫空間-鑫生活 .

js中的http緩存沒有開關(guān), 受制于瀏覽器http緩存策略. 原生xhr請求中, 可通過如下設(shè)置關(guān)閉緩存.

xhr.setRequestHeader("If-Modified-Since","0");
xhr.setRequestHeader("Cache-Control","no-cache");
//或者 URL 參數(shù)后加上  "?timestamp=" + new Date().getTime()

jquery的http緩存是否開啟可通過在settings中指定cache.

$.ajax({
  url : "url",
  dataType : "xml",
  cache: true,//true表示緩存開啟, false表示緩存不開啟
  success : function(xml, status){    
  }
});

同時jquery還可以全局設(shè)置是否緩存. 如下將全局關(guān)閉ajax緩存.

$.ajaxSetup({cache:false});

除此之外, 調(diào)試過程中出現(xiàn)的瀏覽器緩存尤為可惡. 建議開啟隱私瀏覽器或者勾選??控制臺的 Disable cache 選項(xiàng). (這里以Chrome舉例, 其他瀏覽器類似)

前面已經(jīng)提過, 通常只要是ajax請求收到了http狀態(tài)碼, 便不會進(jìn)入到錯誤捕獲里.(Chrome中407響應(yīng)頭除外)

實(shí)際上, $.ajax 方法略有區(qū)別, jquery的ajax方法還會在類型解析出錯時觸發(fā)error回調(diào). 最常見的便是: dataType設(shè)置為json, 但是返回的data并非json格式, 此時 $.ajax 的error回調(diào)便會觸發(fā).

有關(guān)調(diào)試, 如果接口只是做小部分修改. 那么可以使用charles(Mac) 或者fiddler(Windows), 做代理, 將請求的資源替換為本地文件, 或者使用其斷點(diǎn)功能, 直接編輯response.

如果是新增接口的調(diào)試, 可以本地搭建node服務(wù). 利用hosts文件配置dns + nginx將http請求轉(zhuǎn)發(fā)到本地node服務(wù)器. 簡易的node調(diào)試服務(wù)器可參考我的 node-webserver . 如下舉一個栗子?:

假設(shè)我們要調(diào)試的是 www.test.com 的GET接口. 以下所有步驟以Mac為例, 其他系統(tǒng), 請自行搜索?文件路徑.

1) hosts配置.

sudo vim /etc/hosts
#新增一行 127.0.0.1 www.test.com

2) nginx 配置

brew install nginx #安裝
#安裝成功后進(jìn)入目標(biāo)目錄
cd /usr/local/etc/nginx/
cd servers #默認(rèn)配置入口為nginx.conf.同時servers目錄下*.conf文件已自動加入到配置文件列表中
vim test.conf
#粘貼如下內(nèi)容
server {
  listen       80;
  server_name  www.test.com;
  index index.html;
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   html;
  }
  location / {
    proxy_pass http://localhost:10108/;
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header        X-Read-IP       $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
#:wq保存并退出
#啟動nginx
sudo nginx -s reload #如果啟動了只需重啟即可
sudo nginx #如果沒有啟動,便啟動之

3) node-webServer 配置

參考 node-webserver . 啟動服務(wù)前只需更改index.js, 在第9行后插入如下內(nèi)容:

"get": {
  "/": {
      getKey : "Welcome to Simple Node  WebServer!"
  },
  "接口api": "你的response內(nèi)容"http://插入的代碼                               
},

如需在nginx中配置CORS, 請看這里: Nginx通過CORS實(shí)現(xiàn)跨域.

XMLHttpRequest 返回的數(shù)據(jù)默認(rèn)的字符編碼是utf-8, post方法提交數(shù)據(jù)默認(rèn)的字符編碼也是utf-8. 若頁面編碼為gbk等中文編碼, 那么就會產(chǎn)生亂碼.

通常, 如果后端接口開發(fā)OK了, 前端同學(xué)需要通過一些手段來確認(rèn)接口是能正常訪問的.

curl -I -X OPTIONS -H "Origin: http://example.com" http://localhost:10108/
# response
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/json;charset=UTF-8
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: x-requested-with,Content-Type
Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS
Access-Control-Allow-Origin: http://example.com
Access-Control-Max-Age: 3600
Server: Node WebServer
Website: https://github.com/Louiszhai/node-webserver
Date: Fri, 21 Oct 2016 09:00:40 GMT
Connection: keep-alive
Transfer-Encoding: chunked

以上, http狀態(tài)碼為200, 表示允許OPTIONS請求.

GET, POST 請求與GET類似, 其他請求亦然.

curl -I -X GET -H "Origin: http://example.com" http://localhost:10108/
#HTTP/1.1 200 OK
curl -I -X POST -H "Origin: http://example.com" http://localhost:10108/test
#HTTP/1.1 200 OK

除此之外, 我們還可以通過chrome的postman擴(kuò)展進(jìn)行測試. 請看postman素潔的界面:

postman支持所有類型的http請求, 由于其向chrome申請了cookie訪問權(quán)限及所有http(s)網(wǎng)站的訪問權(quán)限. 因此可以放心使用它進(jìn)行各種網(wǎng)站api的測試.

同時, 強(qiáng)烈建議閱讀本文的你升級postman的使用技巧, 這里有篇: 基于Postman的API自動化測試 , 拿走不謝.

移動端的支持性比較弱, 使用需謹(jǐn)慎. 看表.

	IOS Safari	Opera Mini	Android Browser	Android Chrome	Android UC
XMLHttpRequest	8.4	-	4.4.4	53 GPU云服務(wù)器 云服務(wù)器 知識體系 服務(wù)器知識體系 人工智能知識體系 大數(shù)據(jù)構(gòu)造體系 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81998.html 上一篇：設(shè)計模式：發(fā)布訂閱模式 下一篇：前端實(shí)例練習(xí) - 任務(wù)清單 To do list 相關(guān)文章 前端開發(fā)收集 - 收藏集 - 掘金 摘要：責(zé)編現(xiàn)代化的方式開發(fā)一個圖片上傳工具前端掘金對于圖片上傳，大家一定不陌生。之深入事件機(jī)制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說種目前，在本人目前的研究中，只有兩種半兩種半還有半種的且聽我道來。 Ajax 與數(shù)據(jù)傳輸 - 前端 - 掘金背景 在沒有ajax之前，前端與后臺傳數(shù)據(jù)都是靠表單傳輸，使用表單的方法傳輸數(shù)據(jù)有一個比較大的問題就是每次提交數(shù)據(jù)都會刷新頁面，用... ygyooo 2019-08-20 17:15 評論0 收藏0 Deep in JS - 收藏集 - 掘金 摘要：今天同學(xué)去面試，做了兩道面試題全部做錯了，發(fā)過來給道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 排序算法 -- JavaScript 標(biāo)準(zhǔn)參考教程（alpha） - 前端 - 掘金來自《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》，by 阮一峰 目錄 冒泡排序 簡介 算法實(shí)現(xiàn) 選擇排序 簡介 算法實(shí)現(xiàn) ... 圖例詳解那道 setTimeout 與循環(huán)閉包的經(jīng)典面... enali 2019-08-20 16:36 評論0 收藏0 javasscript - 收藏集 - 掘金 摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題... Rango 2019-08-20 17:15 評論0 收藏0 查漏補(bǔ)缺 - 收藏集 - 掘金 摘要：醞釀許久之后，筆者準(zhǔn)備接下來撰寫前端面試題系列文章，內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識前端掘金基礎(chǔ)智商劃重點(diǎn)在實(shí)際開發(fā)中，已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合，我在認(rèn)識了兩位同是10年工作經(jīng)驗(yàn)的阿里前端開發(fā)小伙伴，不但要向前輩學(xué)習(xí)，我有時候還會選擇另一種方法逗逗他們，拿了網(wǎng)上一道經(jīng)典面試題，可能我連去阿里面試的機(jī)會都沒有，但是我感受到了一次面試1... YuboonaZhang 2019-08-29 12:56 評論0 收藏0 HTML-CSS 摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 ... xiaokai 2019-08-01 18:21 評論0 收藏0 發(fā)表評論 登陸后可評論 0條評論 Aomine 男|高級講師 我要關(guān)注 我要私信 TA的文章 閱讀更多 作為一名Java程序員，因?yàn)橥低到铀交畋?.. 閱讀 3912·2021-11-17 09:33 從“搬磚小哥”到軟件測試工程師：這一次的選擇，讓我實(shí)現(xiàn)了月薪飛躍 閱讀 1213·2021-10-09 09:44 給自己的頁面添加點(diǎn)樂趣 閱讀 412·2019-08-30 13:59 擁有漂亮UI的flutter學(xué)習(xí)項(xiàng)目，持續(xù)更新中喲 閱讀 3487·2019-08-30 11:26 浮動的label 閱讀 2190·2019-08-29 16:56 HTML、CSS筆記 閱讀 2862·2019-08-29 14:22 前端實(shí)例練習(xí) - 加載動效按鈕 閱讀 3157·2019-08-29 12:11 探索發(fā)現(xiàn)：CSS實(shí)現(xiàn)中文兩端對齊 閱讀 1283·2019-08-29 10:58 最新活動 閱讀需要支付1元查看 支付并查看 <strike id="wagsw"><input id="wagsw"></input></strike>