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

var xhr = new XMLHttpRequest();

② IE瀏覽器通過 XMLHttpRequest 或者 ActiveXObject 對象同樣實現(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 對象實例. 創(chuàng)建時需要指明一個類似"Microsoft.XMLHTTP"這樣的ProgID. 而實際呢, 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;
}

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

GUI渲染線程

javascript引擎線程

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

HTTP請求線程

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

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

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

對于一個ajax請求, js引擎首先生成 XMLHttpRequest 實例對象, open過后再調(diào)用send方法. 至此, 所有的語句都是同步執(zhí)行. 但從send方法內(nèi)部開始, 瀏覽器為將要發(fā)生的網(wǎng)絡(luò)請求創(chuàng)建了新的http請求線程, 這個線程獨立于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ù)隊列 的末尾. 直到j(luò)s引擎空閑了, 任務(wù)隊列 的任務(wù)才被撈出來, 按照添加順序, 挨個執(zhí)行, 當(dāng)然也包括剛剛append到隊列末尾的 onreadystatechange 事件.

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

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

通常, ajax 和 setTimeout 的事件回調(diào)都被同等的對待, 按照順序自動的被添加到 任務(wù)隊列 的末尾, 等待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í)行, 然而實際上, 一次ajax請求, 并非所有的部分都是異步的, 至少"readyState==1"的 onreadystatechange 回調(diào)以及 onloadstart 回調(diào)就是同步執(zhí)行的. 因此它們的輸出排在最前面.

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

試運行以下代碼.

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 實例對象沒有自有屬性. 實際上, 它的所有屬性均來自于 XMLHttpRequest.prototype .

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

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

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

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

通常, 一個xhr實例對象擁有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實例, 如下:

只讀屬性, 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ā)時機在 readyState==1 狀態(tài)之后, readyState==2 狀態(tài)之前.

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

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 來計算加載資源的進度, 該方法用于獲取資源的下載進度.

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

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

onload事件回調(diào)方法在ajax請求成功后觸發(fā), 觸發(fā)時機在 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ā)時機在 readyState==4 狀態(tài)之后(收到響應(yīng)時) 或者 readyState==2 狀態(tài)之后(未收到響應(yīng)時).

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

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)方法可用于跟蹤資源上傳的進度.

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

overrideMimeType方法用于強制指定response 的 MIME 類型, 即強制修改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對象具有如下缺點:

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

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

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

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

XHR2 即 XMLHttpRequest Level 2. XHR2針對XHR1的上述缺點做了如下改進:

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

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

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

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

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

//可直接創(chuàng)建FormData實例
var data = new FormData();
data.append("name", "louis");
xhr.send(data);
//還可以通過傳入表單DOM對象來創(chuàng)建FormData實例
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è)置對象. 實際上, jq發(fā)送的所有ajax請求, 都是通過調(diào)用該ajax方法實現(xiàn)的. 它的詳細(xì)參數(shù)如下表:

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

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

$.ajax() 的轉(zhuǎn)換器可以將支持的數(shù)據(jù)類型映射到其它數(shù)據(jù)類型. 如果需要將自定義數(shù)據(jù)類型映射到已知的類型. 需要使用 contents 選項在響應(yīng)的 "Content-Type" 和實際數(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ù)不會起作用.

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

Axios支持node, jquery并不支持.

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

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

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

"最近團隊討論了一下, Ajax 本身跟 Vue 并沒有什么需要特別整合的地方, 使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果, vue-resource 提供的價值和其維護成本相比并不劃算, 所以決定在不久以后取消對 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)開源項目免費 CDN 服務(wù) 或者將其下載到本地.

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

CORS是一個W3C(World Wide Web)標(biāo)準(zhǔn), 全稱是跨域資源共享(Cross-origin resource sharing).它允許瀏覽器向跨域服務(wù)器, 發(fā)出異步http請求, 從而克服了ajax受同源策略的限制. 實際上, 瀏覽器不會攔截不合法的跨域請求, 而是攔截了他們的響應(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 的請求或者Method為 PUT 或 DELETE 的請求, 瀏覽器將發(fā)送兩次http請求. 第一次為preflight預(yù)檢(Method: OPTIONS),主要驗證來源是否合法. 值得注意的是: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()方法. 瀏覽器的這種安全機制規(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實現(xiàn)文件上傳非常簡單, 這里我選取原生js, jq, angular 分別來比較下, 并順便聊聊使用它們時的注意事項.(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無法跟蹤上傳的進度信息.

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();//實際上就是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等方法, 使得它支持上傳進度信息. 如下:

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

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

處理二進制文件主要使用的是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)二進制文件的讀取, 請移步這篇博客 HTML5新特性之文件和二進制數(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ù). 其實, jq的Deferred是基于 Promises/A規(guī)范實現(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對象, 可以直接進行鏈?zhǔn)秸{(diào)用. then方法的回調(diào)中默認(rèn)傳入相應(yīng)的請求結(jié)果, 每個請求結(jié)果的都是數(shù)組, 數(shù)組中依次是responseText, 請求狀態(tài), 請求的jqXHR對象.

angular中可以借助 $q.all() 來實現(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() 實際上就是對 Promise.all 的封裝.

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

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

先看下兼容性.

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

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

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

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

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

我們注意到, 首次進入一個頁面, 此時 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)用如下, 從而實現(xiàn)瀏覽器history往前進.

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

3) 瀏覽器前進和后退時, popstate 事件會自動觸發(fā), 此時我們手動取出 history.state , 構(gòu)建參數(shù)并重新發(fā)送ajax請求或者直接取用state值, 從而實現(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實例 ? 張鑫旭-鑫空間-鑫生活 .

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 選項. (這里以Chrome舉例, 其他瀏覽器類似)

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

實際上, $.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), 做代理, 將請求的資源替換為本地文件, 或者使用其斷點功能, 直接編輯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 #安裝
#安裝成功后進入目標(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實現(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擴展進行測試. 請看postman素潔的界面:

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

同時, 強烈建議閱讀本文的你升級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://m.hztianpu.com/yun/81998.html 上一篇：設(shè)計模式：發(fā)布訂閱模式 下一篇：前端實例練習(xí) - 任務(wù)清單 To do list 相關(guān)文章 前端開發(fā)收集 - 收藏集 - 掘金 摘要：責(zé)編現(xiàn)代化的方式開發(fā)一個圖片上傳工具前端掘金對于圖片上傳，大家一定不陌生。之深入事件機制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說種目前，在本人目前的研究中，只有兩種半兩種半還有半種的且聽我道來。 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 阮一峰 目錄 冒泡排序 簡介 算法實現(xiàn) 選擇排序 簡介 算法實現(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 查漏補缺 - 收藏集 - 掘金 摘要：醞釀許久之后，筆者準(zhǔn)備接下來撰寫前端面試題系列文章，內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識前端掘金基礎(chǔ)智商劃重點在實際開發(fā)中，已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合，我在認(rèn)識了兩位同是10年工作經(jīng)驗的阿里前端開發(fā)小伙伴，不但要向前輩學(xué)習(xí)，我有時候還會選擇另一種方法逗逗他們，拿了網(wǎng)上一道經(jīng)典面試題，可能我連去阿里面試的機會都沒有，但是我感受到了一次面試1... YuboonaZhang 2019-08-29 12:56 評論0 收藏0 HTML-CSS 摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 ... xiaokai 2019-08-01 18:21 評論0 收藏0 發(fā)表評論 登陸后可評論 0條評論 Aomine 男|高級講師 我要關(guān)注 我要私信 TA的文章 閱讀更多 作為一名Java程序員，因為偷偷接私活被... 閱讀 4085·2021-11-17 09:33 從“搬磚小哥”到軟件測試工程師：這一次的選擇，讓我實現(xiàn)了月薪飛躍 閱讀 1461·2021-10-09 09:44 給自己的頁面添加點樂趣 閱讀 546·2019-08-30 13:59 擁有漂亮UI的flutter學(xué)習(xí)項目，持續(xù)更新中喲 閱讀 3754·2019-08-30 11:26 浮動的label 閱讀 2310·2019-08-29 16:56 HTML、CSS筆記 閱讀 3078·2019-08-29 14:22 前端實例練習(xí) - 加載動效按鈕 閱讀 3297·2019-08-29 12:11 探索發(fā)現(xiàn)：CSS實現(xiàn)中文兩端對齊 閱讀 1489·2019-08-29 10:58 最新活動 閱讀需要支付1元查看 支付并查看 av不卡网站| 成人午夜视频在线 | 久久久99精品免费观看 | 国产片在线 | 一区二区免费在线观看 | 日本少妇xxxxx | 国产激情久久久久久熟女老人av | 在线黄色av网站 | 日本在线三级 | 五月天婷婷综合网 | 婷婷午夜激情 | 激情网五月 | 午夜国产精品视频 | 捆绑无遮挡打光屁股 | 久久精品噜噜噜成人 | 精品一二三区 | av中文网站 | a级片免费在线观看 | 91精品网| 国产人妻精品一区二区三区不卡 | 99精品视频在线 | 性视频免费 | 在线h网站 | 免费成人av在线 | 在线视频 日韩 | 免费看欧美大片 | 插插插91 | 欧美a∨| 柠檬福利第一导航在线 | 9色在线 | 国产成人精品无码片区在线 | 潘金莲一级淫片免费放动漫 | 中文字字幕在线中文乱码电影 | gogogo日本免费观看电视 | av片在线观看免费 | 人人草在线 | 1769在线视频 | 久久精品噜噜噜成人 | 午夜免费播放观看在线视频 | 超碰青青操| 日本天堂网在线观看 | 午夜aaa片一区二区专区 | 久热最新| 麻豆成人在线 | 又粗又大又深又硬又爽 | 免费观看毛片视频 | 欧美国产日韩一区二区 | 四虎影视永久免费观看 | 国产黄色a | 99久久99久久精品国产片果冻 | 国产午夜精品久久久 | 日本高清视频在线 | 欧美国产片 | 日韩av高清| 日韩有色| 性高潮久久久久久久 | 欧美日韩中文字幕一区二区 | 欧美性猛交xxxx黑人猛交 | 黄色一级带 | 久久亚洲一区二区 | 日韩免费| 色视频网 | 四虎成人精品永久免费av九九 | 美女扒开尿口给男人桶 | 中文在线www | 欧洲激情网 | 亚洲天天干 | 色av影院 | 日韩精品第二页 | 二区三区视频 | 日韩欧美一级 | 成年人毛片 | 女女les互磨高潮国产精品 | 香蕉视频免费看 | 中文字幕女同女同女同 | 国产激情久久久久久熟女老人av | 国产又粗又猛视频免费 | 一级做a视频 | 91超碰免费在线 | 91在线观看视频 | 熟妇熟女乱妇乱女网站 | 日本性视频网站 | a在线观看 | 欧美成人高清视频 | 黄漫app| 超碰人人超碰 | 精品午夜视频 | 男18无遮挡脱了内裤 | 欧美激情自拍偷拍 | 爱爱色图 | 久操福利视频 | 亚洲区一区二区三区 | 麻豆视频免费版 | 日批国产 | 92国产精品 | 日韩美女网 | 国产在线看片 | 天天操天 | 91精品国产91久久久久久黑人 | 成人丁香婷婷 | 麻豆成人免费 | 欧美高清hd18日本 | 97看片 | 国产片一区二区三区 | 超碰在线亚洲| 草莓视频污视频 | 黄色片网站在线观看 | 超碰在线亚洲| 又黄又爽的免费视频 | 看黄色一级视频 | 免费在线观看黄色av | 97在线播放| 日本久久久久久久久久 | 2019毛片 | 国产在线无码精品 | 天天干天天干天天干 | 污污视频免费观看 | 18免费网站| 亚洲视频大全 | 尤物视频免费观看 | 91成人在线免费视频 | 五月天久久久久久 | 阿娇全套94张未删图久久 | 中文字幕丰满乱子伦无码专区 | 成人av网站在线 | 国产欧美在线看 | 91麻豆精品一二三区在线 | 国产乱子伦精品视频 | 黄色免费看片网站 | 日韩一区二 | 欧美色图狠狠干 | 日本三级视频在线观看 | 97精产国品一二三产区 | 在线观看www. | 亚洲欧洲视频 | 人人妻人人澡人人爽精品日本 | 成人精品在线视频 | 日韩少妇 | 午夜免费播放观看在线视频 | 日本一级一片免费视频 | 爱爱色图 | 天天亚洲 | 色视屏 | 亚洲欧洲日本在线 | 人妻精品久久久久中文 | 黄色三级生活片 | 久久久国产一区二区三区 | 中文字幕女同女同女同 | www.黄色在线观看 | 久久久久久一区二区三区 | 国产一区精品在线观看 | 特黄色一级片 | 午夜视频在线免费 | 在线无限看免费粉色视频 | 日韩一级片在线 | 在线无限看免费粉色视频 | 国产精品电影网站 | 国产在线高清 | 色婷婷777777仙踪林 | 69久久久久 | 樱桃av | 高h言情| 午夜影视在线观看 | 欧美一区二区视频在线 | 免费一级毛片麻豆精品 | 成人羞羞国产免费 | 九九九九精品九九九九 | 可以看的毛片 | 天堂国产| 麻豆成人免费 | 亚洲黄色av | 蜜桃av噜噜一区二区三区麻豆 | 高h喷水荡肉少妇爽多p视频 | 久久久久草 | 欧美性猛交xxxx乱大交俱乐部 | av电影免费在线播放 | 精品日韩在线观看 | www狠狠干| 欧美9999| 婷婷亚洲天堂 | 男人的天堂一区二区 | 两女双腿交缠激烈磨豆腐 | 成年女人免费视频 | 成年人视频网站 | 日本大乳奶做爰 | 国产人妻精品一区二区三区不卡 | 精久久久久久久 | 香港黄色网 | 做爰视频 | 亚洲一区二区三区免费视频 | 国产精品探花在线观看 | 欧美成人不卡 | 国产一区免费视频 | 成人xx视频| 久久国产精品偷 | 草草免费视频 | 95在线视频 | 中国极品少妇xxxx做受 | 午夜黄色小视频 | 午夜不卡av免费 | 嘛豆视频 | 欧美亚洲另类小说 | 日韩免费网站 | 成年人一级片 | 青青免费在线视频 | 日韩av无码一区二区三区 | 五月精品 | 国产呦系列 | 久久免费在线视频 | 午夜精品一区二区三区在线视频 | 米奇影视777 | 日韩精品福利 | 亚洲综合小说 | 一级大片视频 | 国产免费不卡 | 特色黄色片 | 青娱乐超碰在线 | 国产7777| 91丝袜在线 | 午夜大片| 亚洲欧洲日本在线 | 国产精品白虎 | 总裁憋尿呻吟双腿大开憋尿 | 久久国产精品偷 | 欧k影视 | 欧美一卡二卡三卡 | 麻豆精品一区二区 | www夜片内射视频日韩精品成人 | 国内91视频 | 4438x在线观看 | 国语对白一区 | 卡一卡二卡三 | 在线观看亚洲国产 | 91嫩草在线 | 综合久久久久久久 | 精品国内自产拍在线观看视频 | 99久久久无码国产精品免费蜜柚 | 国产麻豆传媒 | 懂色av一区二区三区免费观看 | 动漫美女被到爽 | 1024手机在线看片 | 亚洲天堂日本 | 巨粗高h双龙筋肉体育生 | 美女久久久 | 日韩中文一区 | 欧美色激情 | 亚洲成年人影院 | 美女一区二区三区四区 | 日本亚洲色大成网站www久久 | 黄免费看| 中国a级黄色片 | 伊人久久狼人 | 懂色av蜜臀av粉嫩av分享 | 一区二区三区日本 | 中文字幕第18页 | ass大乳尤物肉体pics | 夜夜操夜夜爱 | 超碰人人干 | 今天高清视频在线观看播放 | 黑人性高潮 | 欧k影视| 69精品国产| 青青草国产成人99久久 | www.伊人网| 国产精品久久久久av | 精品无码国产一区二区三区51安 | 国产尻逼视频 | 天天干在线观看 | 国产一区精品在线观看 | 亚洲欧洲日本在线 | 日本精品一区二区三区视频 | 国产一区免费 | 麻豆av在线播放 | 久久伊人精品 | av影院在线观看 | 成人丁香婷婷 | 91丝袜在线 | 性高潮视频在线观看 | 国产首页 | 中文字幕一区二 | av免费一区| 天堂网av在线| 免费a级大片 | 精品国内自产拍在线观看视频 | 日本欧美激情 | 噜噜噜久久 | 日日碰| 99婷婷| 日韩精品一区二区三区免费视频 | 亚洲免费观看高清 | 亚洲免费中文字幕 | 精品国产乱码久久久久久郑州公司 | 九九综合久久 | 小早川怜子一区二区三区 | 看全色黄大色黄女片18 | 狠狠干2023| 成人久久视频 | 国产成人在线观看免费网站 | 神马影院午夜伦理 | 日本高清视频在线 | 玩弄人妻少妇500系列 | sm捆绑调教视频 | 亚洲欧美在线看 | 欧美色图在线播放 | 免费网站观看www在线观 | 久久一 | 无码人妻精品一区二区三区蜜桃91 | 国产无套精品一区二区三区 | 老师让我她我爽了好久视频 | 中文字幕一区二区三区人妻不卡 | 女人免费视频 | 少妇高潮惨叫久久久久久 | 国产成人毛片 | 免费观看av的网站 | 熟睡侵犯の奶水授乳在线 | av在线免费电影 | 成人精品三级av在线看 | 大地资源二中文在线影视观看 | 亚洲欧美在线看 | 中文在线www | 国产精品1024 | 国产精品视频入口 | 九九热视频在线播放 | 就去吻亚洲 | 黄色h视频| 国产成人a v| 玖玖国产| 91精品人妻一区二区三区蜜桃欧美 | 久久噜 | 亚洲欧美精品一区二区三区 | 黄色成人毛片 | 国内精品一区二区 | 伊人网免费视频 | 99在线视频精品 | 欧美一级爱爱 | 国产高清av在线 | 中国精品毛片 | 国产a级黄色片 | 美女视频在线播放 | 打白嫩光屁屁女网站 | mm131美女视频| 四虎网址在线观看 | 成人观看| 午夜免费激情视频 | 日韩欧美大片在线观看 | 青青视频在线免费观看 | 美女娇喘 | 欧美午夜在线 | 日韩人妻无码一区二区三区99 | 求av网址| 中文字幕一区二区三区5566 | 嘿咻免费视频 | 亚洲女优在线观看 | 少妇视频在线观看 | 熟女人妻aⅴ一区二区三区60路 | 神马午夜国产 | 久久午夜视频 | 亚洲高清成人 | 欧美在线中文字幕 | 免费国产一区 | 午夜视频在线播放 | 国语对白永久免费 | 中文在线免费视频 | 国产日韩欧美中文字幕 | 国产精品自拍偷拍 | 国产在线高清 | 人人草人人射 | 超碰在线人人 | 91黄色免费视频 | 亚洲理论片 | 中国挤奶哺乳午夜片 | 久色网站 | 国产夜夜操 | 潘金莲一级淫片免费放动漫 | 三级黄在线观看 | 国产精品伊人 | 中文字幕一区二区三区人妻不卡 | 久久久久久999 | 精品国产一 | 中文字幕 自拍偷拍 | 欧美综合一区 | 亚洲国产无码精品 | 国精品一区 | 中文字幕首页 | 久久手机视频 | 99久久久无码国产精品免费蜜柚 | 在线播放第一页 | 色哟哟精品一区 | 高清不卡毛片 | 91老肥熟| 国产精品久久久一区 | 黄色一级带 | 男人天堂一区 | 韩国三级与黑人 | 亚洲在线电影 | www.亚洲国产 | 欧美激情性做爰免费视频 | 日本天堂网在线观看 | 午夜黄色小视频 | 久久综合99 | 日韩影音 | 欧美精品一线 | 精品午夜视频 | 国产一区二区视频在线 | 久久久久久久精 | 欧美成人精品激情在线视频 | 一区二区三区黄 | 日本欧美激情 | 成年人免费网站在线观看 | 亚洲女成人图区 | 亚洲一级影院 | 日韩大尺度视频 | 爆操白丝美女 | 欧美69久成人做爰视频 | 成人天堂噜噜噜 | 怡红院av | 中文字幕一区二区三区5566 | 黄漫app | 超碰伊人 | 国产九九精品视频 | 不卡在线播放 | 天堂影视在线观看 | 国产精品伊人 | 午夜影视在线观看 | 婷婷免费 | 亚洲综合色在线 | 日韩2区 | mm131美女视频 | 日韩理论片在线观看 | 青青青草视频在线 | 91精品国产成人观看 | 人人爱操 | gogogo日本免费观看电视 | 涩人阁| 免费一级毛片麻豆精品 | 婷婷av一区二区三区 | 亚洲一区二区欧美 | 涩人阁| 你懂得在线观看 | 污视频网站免费看 | 黄视频在线播放 | 91久久精品日日躁夜夜躁欧美 | 日韩精品五区 | 国产精品探花一区二区在线观看 | 国产成人精品无码片区在线 | v天堂在线观看 | 成人动漫网站在线观看 | 韩国黄色大片 | 中文字幕自拍偷拍 | 亚洲综合久久久 | 在线看片你懂得 | 黄色片网站在线观看 | 国产一区精品在线观看 | 精品国产乱码久久久久久郑州公司 | 40到50岁中老年妇女毛片 | 国产精品v欧美精品v日韩 | 中文字幕一区二区三区5566 | 欧美精品久久久久久 | 亚洲精品二| 国产精品自拍偷拍 | 日韩五月天| 嫩草在线 | 99在线视频精品 | 久久影院在线观看 | 91好色先生| 久久久久久av无码免费网站 | 91国产高清 | 亚洲黄色在线观看 | 国内精品久久久久久 | 亚洲欧美精品一区二区三区 | 美女视频在线播放 | 国产美女视频免费观看下载软件 | 久久综合亚洲 | 日本国产一区 | 国产精品v欧美精品v日韩 | 在线看污视频 | 亚洲综合中文字幕在线 | 中文字幕第18页 | 91精品国产91久久久久久黑人 | 影音先锋久久 | 亚洲美女一区二区三区 | 伊人久久大香线蕉av一区 | 强睡邻居人妻中文字幕 | 午夜久久久久久久久久 | 欧美性视屏 | 色婷婷综合久久久中文字幕 | 亚洲天堂av网站 | 国产九九精品视频 | 熟女人妻aⅴ一区二区三区60路 | 中文字幕亚洲欧美日韩高清 | 丁香六月综合激情 | 黄污视频在线观看 | 欧美九九| 40到50岁中老年妇女毛片 | 亚洲草逼视频 | 97播播 | 国产美女自慰在线观看 | 暖暖日本在线视频 | av每日更新| a级片免费在线观看 | 蕾丝视频污| 蜜臀尤物一区二区三区直播 | 精品1区2区3区 | 人妻精品久久久久中文字幕 | 国产做爰免费视频观看 | 亚洲精品v| 欧美精品亚洲精品 | 久久ww| 免费网站观看www在线观 | 午夜色福利 | 日韩免费网站 | 狠狠操在线观看 | 九九热视频在线播放 | 久久久国产一区二区三区 | 精品无码国产一区二区三区51安 | 午夜免费观看视频 | 日韩国产欧美一区二区 | 激情综合激情五月 | 波多野结衣中文字幕在线 | 国产chinesehd精品露脸 | 日韩精品一区在线观看 | 人妻熟女一区 | 一级免费观看 | 日本网站免费观看 | 精品久久网 | 日日拍拍 | 国产人妻精品一区二区三区不卡 | 女女les互磨高潮国产精品 | 大学生三级中国dvd 亚洲成人精品久久 | 黑人性高潮 | 涩涩网站在线观看 | 四虎福利| 精品美女一区二区三区 | 青青草成人av| 黄色网入口| 日韩影音 | 波多野结衣一区二区三区在线观看 | 国产97在线观看 | 日韩在线观看视频网站 | 色噜噜在线观看 | 91久久久久久久久久久 | 日本福利在线观看 | 看黄色一级视频 | 人妻少妇偷人精品视频 | 超碰免费av | 国产日批视频 | 久久精品爱 | 国产成人a人亚洲精品无码 最近中文字幕av | 人妻精品久久久久中文 | 成人羞羞国产免费 | 综合激情久久 | 免费网站观看www在线观 | 中文字幕在线免费看 | 夜夜操夜夜爱 | 国产无套精品一区二区三区 | 欧美黑人一级片 | 精品人妻午夜一区二区三区四区 | 日韩av无码一区二区三区 | 国产人成视频在线观看 | 爱吃波客今天最新视频 | av一区在线观看 | 中文字幕最新 | 日本久色 | 日韩视频一区 | 亚洲国产精品免费 | 成人宗合网 | 操到喷水 | 日韩精品无码一区二区三区久久久 | 久久亚洲精品小早川怜子 | 欧美国产片 | 欧美成在线 | 久久久99精品免费观看 | 精久久久久久久 | 成人在线综合 | 天天干天天干天天干 | 欧美色妞网 | 午夜免费激情视频 | 午夜影视在线观看 | 成年人视频网 | 永久免费成人代码 | av国产免费| 国产精品xxx在线观看 | 樱桃香蕉视频 | 永久免费在线 | 国产黄色a | 色婷婷在线影院 | www.日韩在线观看 | 精品无码久久久久久久久 | 久久久国产一区二区三区 | 一级黄色短视频 | 一级黄色免费 | 欧美日韩h | 一区二区三区日韩欧美 | 伊人天堂av| www.亚洲国产 | 国产成人a人亚洲精品无码 最近中文字幕av | 国产成人在线观看免费网站 | 亚洲午夜精品一区二区三区 | 亚洲美女视频 | 欧美资源在线 | 中文字幕一区二区三区精华液 | 激情综合激情五月 | 黄色精品在线观看 | 日韩视频一区在线观看 | 性欧美sm调教 | 一级片黑人 | 久久影片 | 国产精品探花一区二区在线观看 | 日日干日日插 | 久热只有精品 | 中文字幕亚洲欧美日韩高清 | 午夜精品久久久久久久爽 | 欧美一区二区三区不卡 | 丁香婷婷久久久综合精品国产 | 你懂得在线观看 | 综合久久久久久久 | 污污网站在线 | 爆操欧美美女 | 久久久精品免费观看 | 欧美综合一区二区三区 | 永久免费视频网站直接看 | 91香蕉国产| 秋霞午夜 | 在线免费看污视频 | 欧美9999| 国产成人高清在线 | av在线电影网 | 亚洲九九 | 日韩五月天 | 青青草成人在线观看 | av老女人 | 中国国产bdsm紧缚捆绑 | 国产高清av在线 | 九九热视频在线播放 | 玉女心经 在线 | 天天插天天狠 | www.久久| 一本一道久久a久久精品蜜桃 | 午夜av免费看 | 成人在线一区二区三区 | 爆操欧美美女 | 欧美日韩在线观看一区二区 | 日本高清二区 | 奇米影视av| 亚洲欧美精品一区二区三区 | 日韩欧美一级片 | 视频一区在线播放 | 青青青草视频在线 | 天天草夜夜操 | 日韩和欧美的一区二区 | 日本中文字幕视频 | 欧美激情自拍偷拍 | 999国产精品视频 | 久久涩视频 | 免费看一级大片 | 免费av播放| 最好看的2019免费观看 | 国产a国产 | 大地二资源在线观看高清国语版 | 免费a级大片 | 男女福利视频 | 女m被s玩胸虐乳哭着求饶 | 久章草影院 | 丁香六月综合 | 日批国产 | 亚洲国产精品无码久久久久高潮 | 污视频网站在线看 | www.五月激情| 精久久久久 | 日韩jizz| 亚洲三级图片 | 无码人妻久久一区二区三区 | 色午夜av| 91免费短视频 | 娇小的粉嫩xxx极品 天天射天天射 | 精品久久二区 | 成人亚洲| 麻豆亚洲一区 | 亚洲视频在线观看一区二区 | 国产精品视频在线观看 | 成人免费视频国产免费 | 女人做爰全过程免费观看美女 | 国产视频一区二区在线观看 | 亚洲精品v | 国产色播 | 亚洲手机在线观看 | 调教在线观看 | 日韩城人网站 | 亚洲日日夜夜 | 成人观看| 中文字幕不卡在线观看 | 性高潮久久久久久久 | 欧美激情自拍偷拍 | 久久免费精品 | 欧美丰满熟妇bbbbbb | 国产成人高清在线 | 亚洲性事 | 国产精品久久久久久吹潮 | 美女扒开尿口给男人桶 | 青青草激情视频 | 欧美亚洲国产日韩 | 久久免费看少妇高潮 | 青春草视频 | 国产h视频在线观看 | 中文字幕观看 | 51国产视频 | 国产一区二区中文字幕 | 成人教育av | 午夜院线| 一区二区在线免费观看视频 | 五月天久久久久久 | 韩国一区二区三区在线观看 | 欧美成人黄色片 | 视频网站在线观看18 | 日韩午夜一区 | 1024手机在线看片 | 强行糟蹋人妻hd中文 | 北条麻妃99精品青青久久 | 欧美精品亚洲精品 | 色婷婷伊人| 玖玖玖影院| 中文字幕第一页在线 | 精品国产一 | 91精品人妻一区二区三区 | 久久国产精品偷 | 久久福利片 | 超碰美女 | 在线不卡一区 | 好吊操视频这里只有精品 | 亚洲精品自拍 | 午夜看毛片| 国产又粗又大又硬 | 秋霞一区 | 国产精品av一区 | 欧美日韩一区二区三 | 蜜桃av噜噜一区二区三区麻豆 | 国内自拍av | 性视频播放免费视频 | 天堂在线一区 | 国产精品久久久久久吹潮 | 国产视频一区在线 | 福利在线观看 | 日本天堂网在线观看 | 好吊一区二区三区 | 天天干天天草天天射 | 99精品视频在线 | 久久三级视频 | 色综合中文字幕 | 4438x在线观看 | 91天天| 午夜院线| 日韩精品一区二区三区免费视频 | 久久综合99 | 中国一级黄色 | 亚洲女优在线观看 | 激情小说亚洲图片 | 欧美日韩在线观看一区二区 | 国产乱码精品一区二区三区中文 | 欧美人妻日韩精品 | 久久免费精品 | 日韩美女网 | 亚洲精品777| 国产精品入口麻豆 | 2019中文字幕在线观看 | 午夜不卡av免费 | 久久综合社区 | 91黄色免费视频 | 98在线视频 | 亚洲最新网址 | 91精品国产成人观看 | 国产精品天天干 | 中文字幕在线免费看 | 精久久久久 | 日韩精品在线视频 | 91精品视频在线播放 | 超碰美女| 污污内射久久一区二区欧美日韩 | 91免费大片 | 男女涩涩 | 亚洲成年人av | 日韩久久一区二区 | 成年人视频免费在线观看 | 国产性色av | 亚洲乱码视频 | av国产免费 | 欧美黑人一级片 | 青青操原| 欧美精品亚洲精品 | 免费三级av | 欧美国产日韩一区 | 日韩一级黄色大片 | 华丽的外出在线 | 免费看一级大片 | 成人丁香婷婷 | 久热只有精品 | 成人在线视频观看 | 黄视频在线播放 | 中文字幕在线免费看 | 综合久久久久久久 | 日本精品一区二区三区视频 | 特级av片| 免费看欧美大片 | 久久久91 | 亚洲美女视频 | 不卡av在线| 亚洲免费福利视频 | 久久久久亚洲精品 | 在线97 | 精品人妻午夜一区二区三区四区 | 欧美一级色片 | 色午夜av| 天天操天 | 青青免费在线视频 | 91久久久久久久久久久 | 午夜免费播放观看在线视频 | 免费的一级片 | 国产成人激情 | 淫欲的美女理论电影完整版 | 欧美夜夜 | 日日碰| 日本特黄一级 | 少妇被躁爽到高潮无码人狍大战 | 麻豆影音先锋 | 午夜激情免费视频 | 日韩精品一区二区三区免费视频 | 欧美黄色片免费看 | 樱桃视频app看片 | 动漫3d精品一区二区三区乱码 | 欧美亚洲中文精品字幕 | 美国免费高清电影在线观看 | 人妻少妇精品视频一区二区三区 | 狠狠干干| 青青青国产在线 | 黄色在线 | 风流少妇一区二区三区91 | 韩国一区二区在线观看 | 亚洲美女一区二区三区 | 久久精品波多野结衣 | 黄污网 | 黄免费看 | 日韩精品在线一区 | 黄色片网站在线观看 | 日韩精品在线视频观看 | 黄色在线| 成年人免费网站在线观看 | 久久av在线 | 草莓视频app18在线视频 | 婷婷免费 | 婷婷av一区二区三区 | 婷婷激情av| 在线观看黄色片 | 亚洲视频综合 | 亚洲精品第一页 | 欧美放荡性医生videos | 欧美精品videos另类 | 久久与婷婷| 91成人在线免费视频 | 女～淫辱の触手3d动漫 | 久久久久极品 | 国产一区免费视频 | 人人爽人人插 | 成人动漫网站在线观看 | 少妇高潮惨叫久久久久久 | 欧美激情一区二区三区 | 国产夜夜操 | 色婷婷综合久久久中文字幕 | 国产又粗又猛又爽又黄的 | 91久久久久久久久久久 | 草民午夜理伦三级 | 狠狠干狠狠插 | 91成人在线免费视频 | 午夜免费播放观看在线视频 | 日韩免费 | 国产精品天天狠天天看 | 香港黄色网 | 亚洲三级精品 | 亚洲日本中文 | 特黄色一级片 | 美国免费高清电影在线观看 | www.色多多 | 日本美女交配 | 神马久久久久久久久 | 一本一道久久a久久精品蜜桃 | 国产片在线 | 国精品一区 | 欧美精品 在线观看 | 免费日b视频 | 国产无遮挡裸体免费视频 | 国产97视频 | 一级性爱视频 | 青青青草视频在线观看 | 亚洲一区色 | 亚洲一区二区三区免费视频 | 亚洲专区在线播放 | 国产一区免费 | 西西人体大胆4444www | 奶妈的诱惑 | 在线免费看污视频 | 黄漫app| 4438x在线观看 | 免费a级大片| 日本少妇xxxx软件 | 亚洲网站在线 | 久草99 | 无码人妻aⅴ一区二区三区玉蒲团 | 午夜激情免费视频 | 五月天亚洲色图 | 日本在线视频中文字幕 | 久久tv| 国产亚洲在线观看 | 成人午夜淫片免费观看 | 原神女裸体看个够无遮挡 | 五月婷婷开心中文字幕 | 国产一区二区在线免费 | 日本一区二区视频在线 | 91久久精品一区二区 | www.夜夜| 久青草视频在线观看 | 日韩视频一区在线观看 | 欧美亚洲另类小说 | 神马午夜国产 | 韩国一区二区在线观看 | 亚洲天堂一区二区三区 | 欧美bbbbbbbbbbbb精品 | 欧美精品videos另类 | 打屁股调教视频 | 俄罗斯厕所偷拍 | 日韩av第一页 | 超碰人人干 | 女同vk | 福利视频免费 | 亚洲欧洲日本在线 | 不卡久久 | 色小说在线 | 欧美熟妇精品一区二区蜜桃视频 | 色愁久久 | p站在线观看 | 张柏芝亚洲一区二区三区 | 神马影院午夜伦理 | 美女xx网站| 二十四小时在线更新观看 | 精品国产欧美一区二区三区成人 | 日韩精品免费一区二区夜夜嗨 | 国产亚洲色婷婷久久99精品91 | 国产无套精品一区二区三区 | 强行糟蹋人妻hd中文 | 欧美尻逼| 日韩国产欧美一区二区 | 久久久久免费观看 | 嘿咻免费视频 | 亚洲乱码视频 | 国内精品一区二区 | 97精产国品一二三产区 | 日韩av一二三 | 国产又粗又猛视频免费 | 久久久国产一区二区三区 | 午夜寂寞院 | 在线免费看污视频 | www.五月激情 | 先锋成人资源 | 污片视频在线观看 | 台湾黄色网址 | 小早川怜子一区二区三区 | 亚洲精品在线观看视频 | 亚洲熟妇色自偷自拍另类 | 泰剧19禁啪啪无遮挡 | 樱桃av| 99er这里只有精品 | 色婷婷在线影院 | 老师让我她我爽了好久视频 | 久久精选| 欧美精品久久久久久 | 日韩一区二区三区四区在线 | 久久精选| 久久久国产一区二区三区 | 五月开心婷婷 | 在线观看免费黄色 | 天天干天天草天天射 | 女人做爰全过程免费观看美女 | 特大黑人巨交吊性xxxx视频 | 欧美国产精品 | 男人插入女人阴道视频 | 日韩看片| 欧美激情黑白配 | 依人在线 | av每日更新 | 国产淫语 | 亚洲最大av在线 | 日本极品丰满ⅹxxxhd | 玩弄人妻少妇500系列 | 99资源在线 | 国产黄色录像 | 中文字幕mv | 国产无套精品一区二区三区 | 人成在线 | 欧美在线免费观看视频 | 中文字幕第18页 | 免费三片在线观看网站v888 | 福利视频一区 | 青青草激情视频 | 青娱乐青青草 | 三级黄在线观看 | 奇米影视在线播放 | 精品午夜福利视频 | 色小说在线 | 免费av网站观看 | 乱色视频 | 国产日韩欧美中文字幕 | 国产熟女高潮一区二区三区 | 欧美激情第五页 | 午夜视频免费看 | 日日夜夜影院 | 一级片黑人 | 精品无码人妻一区二区三区品 | 日一日射一射 | 尤物视频免费观看 | 在线观看免费黄色 | www.欧美在线| 欧洲精品一区二区三区 | 欧美日韩三级在线 | 中文有码在线 | 欧美夜夜 | 精品国产乱码久久久久久郑州公司 | 色婷婷小说 | 善良的女朋友在线观看 | 伊人天堂av | 亚洲欧美日韩综合在线 | 天堂在线1 | 欧美福利一区 | 中文字字幕在线中文乱码电影 | 成人xx视频 | 国产一区免费视频 | 高h喷水荡肉少妇爽多p视频 | 张柏芝亚洲一区二区三区 | 日韩久久一区二区 | 国产无遮挡裸体免费视频 | 张柏芝亚洲一区二区三区 | 伊人色网 | 国产免费久久 | 麻豆国产精品一区 | 一级大片视频 | 国产精品v欧美精品v日韩 | 卡一卡二卡三 | gogo人体做爰大胆视频 | 青青草视频免费 | 中文字幕在线免费看 | 火影忍者羞羞漫画 | 成人教育av | 无码人妻久久一区二区三区 | 欧美国产精品 | 最好看的2019免费观看 | 大学生三级中国dvd 亚洲成人精品久久 | 1024国产精品 | 91久久电影 | 91成人在线免费视频 | 丁香六月综合 | 国产亚洲色婷婷久久99精品91 | 小嫩女直喷白浆 | 日本少妇xxxx软件 | 一级黄色短视频 | 色天堂视频 | 99热这里只有精品在线观看 | 三级av片 | 怡红院av| 欧洲天堂网 | 玉女心经 在线 | 在线高清观看免费观看 | 火影忍者羞羞漫画 | 免费一级片视频 | 亚洲一区色| 亚洲视频二 | 亚洲作爱视频 | 欧美亚洲在线视频 | 日本黄色xxx| 99re国产精品 | 日本精品在线 | 91精品人妻一区二区三区蜜桃欧美 | 亚洲黄色小说网 | 2019中文字幕在线观看 | 亚洲一区国产一区 | 中国极品少妇xxxx做受 | 欧美交换国产一区内射 | 亚洲精品在线观看视频 | 亚洲午夜精品一区二区三区 | 亚洲国产精品无码久久久久高潮 | 九一网站在线观看 | 天天综合影院 | 亚洲视频二 | 日韩在线视频看看 | 在线观看国产精品入口男同 | 国产中文字字幕乱码无限 | 92国产精品 | 久久久96人妻无码精品 | 午夜不卡av免费 | 日本五十肥熟交尾 | a一级黄色 | 国产午夜精品理论片 | 国产无遮挡裸体免费视频 | 国产成人激情 | 国产精品tv| 99热日韩| 丰满的女邻居 | 91天堂| 久久看看 | 91精品国产综合久久久蜜臀粉嫩 | 在线观看亚洲国产 | 中文字字幕在线中文乱码电影 | a级小视频 | 91天天 | 青青草成人在线观看 | 7777奇米影视 | 女人做爰全过程免费观看美女 | 国产一区二区av | 成人羞羞国产免费 | 国产成人在线免费观看视频 | 91香蕉视频黄色 | 久久久久影视 | 欧美精品亚洲精品 | 日本免费中文字幕 | 日韩免费高清 | 亚洲特级毛片 | 黄色国产视频 | 国产精品电影网站 | 大香焦久久| 亚洲黄视频 | 九九视频在线播放 | 波多野结衣av无码 | 成人免费毛片男人用品 | 91视频在线网站 | 午夜肉体高潮免费毛片 | 狠狠操天天操 | 97在线看| 美女爆乳18禁www久久久久久 | 欧美20p| 国产中文字幕一区 | 久久久久免费观看 | 中文字幕丰满乱子伦无码专区 | 欧美一区二区三区成人精品 | 久久久91| 欧美丝袜丝交足nylons | 污视频网站免费看 | 国产美女视频免费观看下载软件 | 91片看| 碧蓝之海动漫在线观看免费高清 | 亚洲h视频在线观看 | 色婷婷激情av | 日本精品在线 | 成人在线播放视频 | 总裁憋尿呻吟双腿大开憋尿 | 亚洲国产精品无码久久久久高潮 | 亚洲一区二区三区免费视频 | 人人妻人人澡人人爽精品日本 | 午夜在线看 | www.久久 | 国产无套精品一区二区三区 | 黄色免费网站在线观看 | 永久91嫩草亚洲精品人人 | av正在播放 | 99爱在线视频 | 亚洲草逼视频 | 天天插天天射 | 亚洲欧美精品一区二区三区 | 99激情| 想要视频在线观看 | 国产亚洲精品成人a | 欧美精品一线 | 国产69av| 成人免费黄 | 美女隐私无遮挡 | 国产淫语 | 亚洲欧洲日本在线 | 国产精品久久久久久亚洲色 | 波多野吉衣一二三区乱码 | 秘密的基地 | 日韩av无码一区二区三区 | 国产在线精品一区二区 | 男女涩涩| 中国男女全黄大片 | 97在线看 | 娇小的粉嫩xxx极品 天天射天天射 | 国产九九精品视频 | 超碰美女 | 日韩精品第二页 | 久久久久久久精 | 国产xxxx孕妇 | 潘金莲一级淫片免费放动漫 | 999视频| 6699嫩草久久久精品影院 | 超碰在线亚洲| 国产精品久久一区二区三区 | 在线观看网页视频 | 亚洲综合中文字幕在线 | 欧美高清hd18日本 | 成年人一级片 | 国产一区二区毛片 | 一区二区三区欧美视频 | 蜜桃av噜噜一区二区三区麻豆 | 欧美做受xxxxxⅹ性视频 | 午夜院线 | 亚洲黄色小说网 | 久草色在线 | 不良视频在线观看 | 91视频在线网站 | 在线高清观看免费观看 | 欧美一区二区三区不卡 | 国产又粗又猛又爽又黄的 | 亚洲专区在线播放 | 伊人网免费视频 | 午夜影视在线观看 | 日本一区精品 | 久久久久久中文字幕 | 亚洲视频综合 | 欧美激情性做爰免费视频 | 国产精品高清无码在线观看 | 黑人极品ⅴideos精品欧美棵 | 人人妻人人澡人人爽精品日本 | 色午夜av| 一级做a视频 | 日韩精品久久久久久久 | 国产一区二区欧美 | 一区二区三区欧美视频 | 男女日批视频 | 97超碰成人| 中文字幕自拍偷拍 | 欧美综合激情网 | 一道本av | 91成人在线观看喷潮动漫 | 精品不卡视频 | 日韩毛毛片 | 亚洲av毛片 | 国产高清免费在线播放 | 亚洲第一男人天堂 | 456亚洲影院 | 国产性色av | 捆绑无遮挡打光屁股 | 欧洲一区二区在线 | 91成人在线观看喷潮动漫 | 成人看片泡妞 | 一区二区三区黄 | 一区二区av在线 | 亚洲免费中文字幕 | 久久久精品免费观看 | 久久精品成人 | 人人澡人人看 | 老司机午夜电影 | 国产无遮挡裸体免费视频 | 国产精品女优 | 日本五十路女优 | 4438全国成人免费 | 欧美片网站免费 | 最新国产露脸在线观看 | 999国产精品视频 | 国产三级在线观看视频 | 欧美自拍视频 | 久久影片 | 亚洲综合色视频 | 欧美春色| 国内视频精品 | a级黄毛片 | 国产精品自拍一区 | 巨粗高h双龙筋肉体育生 | 日本亚洲色大成网站www久久 | 亚洲免费区| 天天亚洲| 中文字幕三区 | 中国a级黄色片 | 性色av蜜臀av浪潮av老女人 | 一道本av | 97精产国品一二三产区 | av在线电影网 | 在线观看国产精品入口男同 | 永久91嫩草亚洲精品人人 | 国产精品av一区 | 调教在线观看 | 性史性dvd影片农村毛片 | 污污视频免费观看 | 中文字字幕在线中文乱码电影 | 午夜视频在线播放 | 欧美一区免费观看 | 在线观看国产精品入口男同 | 国产97视频 | 爆操白丝美女 | 国产酒店自拍 | 超碰狠狠操 | 久久作爱视频 | 97精品| 91精品视频在线播放 | 日韩精品视频在线免费观看 | 欧美mv日韩mv国产网站app | 妻子的性幻想 | 在线观看毛片网站 | 午夜精品久久久久久久爽 | 男女瑟瑟网站 | 九九热视频在线播放 | 免费a级大片 | 秋霞午夜 | 午夜寂寞院 | 91香蕉视频黄色 | 韩国无码一区二区三区精品 | 亚洲最新网址 | 娇小的粉嫩xxx极品 天天射天天射 | 69久久久久 | 一级性爱视频 | 中文字幕一区二区三区5566 | 亚洲天堂一区二区三区 | 亚洲一区二区观看 | 韩国一区二区在线观看 | 欧洲精品一区二区三区 | 久久久久久中文字幕 | 中国挤奶哺乳午夜片 | 污污网站在线 | 欧美69久成人做爰视频 | 中文字幕第4页 | 久久久国产一区二区三区 | 可以看的毛片 | 人人草人人爽 | av老女人 | 精品国产一| 成人在线一区二区三区 | 爱综合网 | 亚洲免费福利视频 | 一级黄色大片 | 日本少妇xxxxx | av不卡网站 | 国产精品久久一区二区三区 | 青青青草视频在线 | 日韩欧美大片在线观看 | 一区二区在线免费观看视频 | 午夜久久久久久久久久 | 亚洲黄色在线观看 | 四虎成人在线观看 | 久久av一区 | 免费成人av在线 | 丁香网站| 琪琪五月天 | 超碰三级 | 国产原创麻豆 | av正在播放 | 中文字幕一二三 | 国产一极片 | 午夜视频免费看 | 91热热 | 欧美黄色片免费看 | 91视频在线网站 | 男女床上拍拍拍 | 成年人免费视频观看 | 三级黄色免费 | 日本精品视频在线播放 | 日韩在线观看一区 | 精品无码国产一区二区三区51安 | 人人爱操| 中文字幕在线免费看 | 97超碰成人 | 国产成人在线免费观看视频 | 91热热| 日韩2区 | a天堂在线视频 | 久久成人免费视频 | 成人福利在线 | 日韩久久成人 | 波多野结衣人妻 | 91香蕉国产 | 久久久久亚洲精品 | 韩国一区二区三区在线观看 | 美女久久久 | 欧美国产日韩一区 | 日韩欧美精品在线 | 久久久久久久久久网站 | 天天操天天操天天操 | 欧洲激情网 | 久久久在线 | 91亚洲欧美 | 亚洲黄色小说网 | 免费黄色网址大全 | 天天亚洲| 日韩中文一区 | aaaa一级片 | 欧美 日韩 精品 | 不卡久久| 日皮视频免费观看 | 美女扒开尿口给男人桶 | 日本中文字幕视频 | 黄色一级带 | 丁香网站| 欧美福利一区 | 亚洲九九| 青青导航| 又黄又爽的免费视频 | 欧美日韩专区 | 一级黄色免费 | 国产青青草视频 | 午夜精品电影 | 一级黄色短视频 | 午夜美女福利 | 黄色片链接| 国产成人在线观看免费网站 | 97人妻精品一区二区三区免 | 欧美午夜精品一区二区 | 97超碰成人| 亚洲青青草原 | 俄罗斯特级毛片 | 久久久青草 | 2019毛片 | 久久在线看 | 牛牛超碰 | 青青草青青操 | 中文字幕三区 | 精品影院 | 国模在线 | 老司机午夜电影 | 91麻豆精品一二三区在线 | 国产精品探花视频 | 国产乱码一区 | 国产免费av电影 | 熟女一区二区三区四区 | 欧美9999| 国产第页 | 亚洲区一区二区三区 | 香港a毛片 | 国产人成视频在线观看 | 国产精品久久国产精麻豆96堂 | 女～淫辱の触手3d动漫 | 欧美日韩在线观看一区二区 | 日韩精品久 | 日批网址| 一级黄色短视频 | 福利视频免费 | 国产免费av电影 | 成人福利在线 | 精产国产伦理一二三区 | 亚洲啊v | 欧美国产日韩一区 | 久久久91 | 成年人免费网站在线观看 | 大香焦久久 | 亚洲精品白浆高清久久久久久 | 成人天堂噜噜噜 | 国产视频一区在线 | 日韩三级 | 午夜三区 | 久久成人在线 | 午夜在线观看视频 | 成人av网站在线 | 国产精品999 | 日韩影音 | 国产色网站 | 91精品国产91久久久久久黑人 | 黄色网址免费 | 麻豆av在线播放 | 青青草成人在线观看 | 1024手机在线看片 | 91久久久久久久久久久 | 亚洲午夜激情 | 99精品视频在线 | 亚洲一级影院 | 欧美日韩专区 | 亚洲自拍偷拍网站 | 欧美性猛交xxxx乱大交退制版 | 日韩在线观看一区 | 国产1区2区在线观看 | 人人草人人射 | 污污视频免费观看 | 欧美人妻日韩精品 | 97人妻精品一区二区三区免 | 色噜噜狠狠狠综合曰曰曰 | 久久国产精品偷 | 国产精品视频入口 | 成人免费在线播放 | 精品伦精品一区二区三区视频密桃 | 精品伦精品一区二区三区视频密桃 | 成人看片泡妞 | 国产九九精品视频 | 在线观看亚洲 | av影片在线播放 | 香蕉视频免费看 | 青青91| 欧美丰满熟妇bbbbbb | 久久这里有 | 久青草视频在线观看 | 欧美高清免费 | 专干老肥女人88av | 黄色激情av | 亚洲一区二区欧美 | 天天摸夜夜添狠狠添婷婷 | 后宫秀女调教(高h,np) | 久久精品一 | 夜夜操狠狠操 | 丁香花电影免费播放电影 | 国产成人在线观看免费网站 | 91视频在线网站 | 夜夜摸夜夜操 | 欧美激情第五页 | 久热只有精品 | 亚洲精品国产精品乱码不99按摩 | 国产青青草视频 | 精品久久网 | 欧美成人三区 | 黄色网址免费 | 青青草狠狠干 | 91久久精品一区二区 | 韩国一区二区在线观看 | 国产熟女高潮一区二区三区 | 涩涩网站在线观看 | 亚洲欧美日本一区 | 张柏芝亚洲一区二区三区 | 极度诱惑香港电影完整 | 日本一区二区在线 | 日韩精品无码一区二区三区久久久 | 免费av影视 | 污污内射久久一区二区欧美日韩 | 国内自拍av| 四虎成人在线观看 | 日本一级一片免费视频 | www.日韩在线观看 | 伊人久久狼人 | 丁香花电影免费播放电影 | 欧美亚洲国产日韩 | 午夜大片| 欧美综合一区 | 两女双腿交缠激烈磨豆腐 | 91禁漫h动漫羞羞网站 | sm捆绑调教视频 | 草莓视频污视频 | 91黄色片| 日韩大片免费观看 | 日本网站免费观看 | 日韩精品福利 | 国产又粗又大又硬 | 国产第8页| 亚洲av无码乱码国产精品久久 | 精品久久免费 | 欧美做受xxxxxⅹ性视频 | 欧美色激情 | 日韩国产免费 | 欧美又粗又大aaa片 亚洲欧洲视频 | 色婷婷伊人 | 人妻精品久久久久中文 | 动漫美女无遮挡免费 | 欧美精品videos另类 | 日韩欧美一级片 | 免费一级片视频 | 国产成人精品无码片区在线 | 欧美激情一区二区三区 | 精品人妻午夜一区二区三区四区 | 欧美又粗又深又猛又爽啪啪九色 | 亚洲国产成人久久 | 久久久久久一区二区三区 | 日韩精品第二页 | 校园春色综合网 | 性高潮久久久久久久 | 国偷自产视频一区二区久 | 男人天堂中文字幕 | 色情毛片 | 欧美午夜精品一区二区 | 成人精品影院 | 国产熟女高潮一区二区三区 | 欧美20p| 欧美福利视频导航 | 奇米影视av| 九九视频在线免费观看 | 强行糟蹋人妻hd中文 | 国产一区二区中文字幕 | 欧美片网站免费 | 欧美69久成人做爰视频 | 欧美亚洲在线视频 | 一级免费观看 | 超碰伊人| 亚洲最新中文字幕 | 婷婷中文| 日韩黄色在线 | 四虎影视库| 五十路母| 欧美成人激情视频 | 在线观看国产精品入口男同 | 淫欲的美女理论电影完整版 | 免费三级av | 国产中文字幕一区 | 安装下载app | 一级免费黄色片 | 国产乱码精品一区二区三区中文 | 91亚洲国产成人精品一区 | 久久超 | 色蝌蚪 | 玉女心经 在线 | 台湾黄色网址 | 韩国三级与黑人 | 在线观看国产欧美 | 亚洲一区二区精品在线 | 久久影片 | 天天躁日日躁aaaaxxxx | 日本亚洲色大成网站www久久 | 岛国av大片 | 黄色av中文字幕 | 国产精品乱码 | 亚洲h视频在线观看 | 久色网站 | 最近中文字幕av | 日韩免费网站 | 秘密基地动漫在线观看免费 | 五月婷婷开心中文字幕 | heyzo在线播放 | 中日韩中文字幕 | 91抖音在线观看 | 久久免费精品 | 亚洲激情网 | 免费av影视| 色婷婷一区 | 亚洲图色av | 91嫩草在线 | 综合久久久久久久 | 日韩av第一页 | 91免费大片| 做爰视频 | 中国女人内谢69xxxx | 伊人久久大香线蕉av一区 | 在线观看黄色网页 | 91久久电影 | 狠狠操天天操 | 婷婷激情av | 午夜精品电影 | 91久久国产综合久久91精品网站 | 爆操白丝美女 | 国产片一区二区三区 | 在线观看国产精品入口男同 | 久久精品噜噜噜成人 | 涩涩97| 日本国产一区 | 久久免费看少妇高潮 | 一级色网站 | 中文字幕一区二 | 在线免费看污视频 | 99re视频这里只有精品 | 欧美尻逼 | 国产麻豆精品久久一二三 | 一区二区三区日本 | www.香蕉 | 日韩欧美一级 | 91久久精品日日躁夜夜躁欧美 | 欧美一区二区视频在线 | 香蕉视频免费看 | 美女靠逼app| 国产精品第三页 | 国产网站免费 | 久久久91 | 男人插入女人阴道视频 | 国产一区免费 | www.黄色在线观看 | 日本在线视频免费观看 | 先锋成人资源 | 4438成人网 | 丁香婷婷久久久综合精品国产 | 中文字幕不卡在线观看 | 40到50岁中老年妇女毛片 | 丁香六月综合 | 中文字幕视频在线观看 | 91手机在线 | 国产亚洲一区二区三区在线观看 | 国内精品久久久久久 | 日韩jizz | 91精品国产免费 | 亚洲av无码国产综合专区 | 四虎成人精品永久免费av九九 | 亚洲图色av | 国产黄色小说 | 456亚洲影院| 国产黄色小说 | 青青青草视频在线观看 | www夜片内射视频日韩精品成人 | 欧美综合一区二区三区 | 国产熟女高潮一区二区三区 | 99热免费| 日韩videos | 丁香花电影免费播放电影 | 久久久久影视 | 久久久久久久成人 | 柠檬福利第一导航在线 | 牛牛电影国产一区二区 | 超碰夫妻| 天天操天天插天天射 | www狠狠干| 黄色小说免费在线观看 | 日韩在线观看视频网站 | 亚洲综合一区二区三区 | 国产精成人| 日屁网站 | 日本五十肥熟交尾 | 丰满熟妇被猛烈进入高清片 | 日韩av一区二区三区在线观看 | 456亚洲影院 | 操操干干 | 欧美性生活一区二区 | aaa亚洲精品| 秋霞av鲁丝片一区二区 | 熟女一区二区三区四区 | 国产精品99视频 | 久章草影院| 国产三级在线观看视频 | 亚洲色图自拍 | 亚洲精品乱码久久久久 | 午夜人体 | 成人动漫网站在线观看 | 青青草国产成人99久久 | www.欧美在线 | 色哟哟精品 | 精品国产乱码久久久久久郑州公司 | 欧美成人黄色片 | 欧美亚洲另类小说 | 娇小的粉嫩xxx极品 天天射天天射 | 国产亚洲激情 | 在线观看国产欧美 | 精品日韩在线观看 | 日韩爱爱网 | 国产亚洲色婷婷久久 | 蜜桃av噜噜一区二区三区麻豆 | 国产一区二区在线看 | 四虎影库在线播放 | 欧美老熟妇xb水多毛多 | 日韩在线观看一区 | 北京富婆泄欲对白 | 亚洲熟妇无码久久精品 | 沟厕沟厕近拍高清视频 | 青青青草视频在线 | 日韩啊啊啊 | 99久久久无码国产精品免费蜜柚 | 精品国产乱码久久久久久郑州公司 | 国模在线观看 | 亚洲天堂一区二区三区 | 日本美女一区二区 | 日韩精品在线视频观看 | 中文字幕一二三 | 97超碰成人 | 国产精品111 | 国产视频一区二区在线观看 | 黄色小说免费在线观看 | 超碰人人超碰 | 激情视频一区 | 欧美大片高清免费观看 | 在线观看毛片网站 | 国产又大又黄的视频 | 久色网站 | 亚洲色图19p| 免费a视频在线观看 | 色噜噜狠狠狠综合曰曰曰 | 怡红院av | 国产无套精品一区二区三区 | 亚洲精品白浆高清久久久久久 | 久久国产亚洲 | a天堂在线视频 | 欧美自拍视频 | 久久大香| 四虎影视永久免费观看 | 久久亚洲精品小早川怜子 | 校园春色综合网 | www婷婷| 美女靠逼app | 91在线观看视频 | 91色站| 少妇扒开粉嫩小泬视频 | 大陆熟妇丰满多毛xxxⅹ | 日本亚洲在线 | 无码人妻久久一区二区三区 | 午夜黄视频 | 亚洲爽爽网 | 国产片一区二区三区 | 丰满熟妇被猛烈进入高清片 | 国产亚洲色婷婷久久 | 青青免费在线视频 | 精品午夜视频 | 欧美有码在线 | 国产一区二区中文字幕 | 人人妻人人澡人人爽精品日本 | 激情五月婷婷 | 亚洲精品一区二三区 | 亚洲欧洲日本在线 | 99re视频这里只有精品 | 自拍偷拍第五页 | 少妇无码一区二区三区 | 日本国产一区二区三区 | 日本一级一片免费视频 | 久草色在线 | 成人精品三级av在线看 | 亚洲精品色午夜无码专区日韩 | 91在线观看视频 | 完美搭档在线观看 | 男人的天堂一区二区 | 亚洲乱码一区二区 | 成人国产网站 | 国产精品v欧美精品v日韩 | 日韩精品一区二区三区免费视频 | 精品国内自产拍在线观看视频 | 日本少妇xxxx软件 | 欧美日韩在线观看一区二区 | 青青草激情视频 | 成人动漫网站在线观看 | 深夜视频18| 91免费影片 | 精品国产乱码久久久久久郑州公司 | 男人插入女人阴道视频 | 国产成人高清在线 | 一级黄色免费 | 成人午夜淫片免费观看 | 国产69av | 国产色播 | 日韩少妇 | 国产在线看片 | 久久免费精品 | 高清不卡毛片 | av片在线观看免费 | 日本在线观看 | 丰满熟妇乱又伦 | 成人天堂噜噜噜 | 国产97在线观看 | 色蝌蚪| 激情小说亚洲图片 | 暖暖日本在线视频 | 深夜视频18 | 四虎成人在线观看 | 熟女人妻aⅴ一区二区三区60路 | 免费爱爱视频网站 | 日日夜夜影院 | 成人黄色免费电影 | 超大量吹潮系列合集 | 免费三片在线观看网站v888 | 日韩欧美国产高清 | 日本国产一区二区三区 | 伊人影院av | 五月婷婷开心中文字幕 | 亚洲av无码乱码国产精品久久 | 丰满熟妇乱又伦 | 久草99 | 日韩精品一区二区三区免费视频 | 日韩精品在线视频 | 中文久久精品 | 亚洲第一男人天堂 | 欧美一区二区视频在线 | 日韩av高清 | 中国女人内谢69xxxx | 久久超 | 国产精品高清无码在线观看 | 99er这里只有精品 | 精品久久免费 | 久久国产精品久久久 | 97人妻精品一区二区三区免 | 日韩视频一区 | 黄色免费网站在线观看 | 蜜桃视频在线观看www | 欧美伦乱| 激情视频一区 | 国产一区二区毛片 | 二区三区视频 | 求av网址| 日韩少妇| 亚洲精品白浆高清久久久久久 | 欧美激情性做爰免费视频 | 狠狠干超碰 | 中国挤奶哺乳午夜片 | 日韩一级片在线 | 中文在线免费视频 | www.黄色在线观看 | 欧美又粗又深又猛又爽啪啪九色 | 综合激情久久 | 久久久久性 | 91色站 | 国产精品免费一区二区三区 | 福利电影网 | 国产人妻精品一区二区三区不卡 | 欧美大片高清免费观看 | 手机在线免费看av | 永久91嫩草亚洲精品人人 | 麻豆视频在线观看 | 成人久久视频 | 特色黄色片 | 天堂av在线资源 | 亚洲男同视频 | 中文字幕一区二区三区5566 | 国产三级不卡 | 波多野结衣中文字幕在线 | 久久精品国产亚洲AV无码男同 | 日本在线视频免费观看 | 牛牛电影国产一区二区 | 成人激情片| 69久久久久 | 打白嫩光屁屁女网站 | 天天干天天干天天干 | 欧美性生活一区二区 | 国产精品嫩草69影院 | 国产免费不卡 | 男18无遮挡脱了内裤 | 人人草人人射 | 成人午夜视频在线 | 中文字幕亚洲精品 | 亚洲国产精品无码久久久久高潮 | 天天天天干 | 天天摸夜夜添狠狠添婷婷 | 日本国产一区 | 黑丝啪啪| 欧美一级少妇 | 久草五月天 | 柠檬福利第一导航在线 | 日本国产一区 | 张柏芝亚洲一区二区三区 | 欧美成人黄色片 | 麻豆国产精品一区 | 人妻少妇精品视频一区二区三区 | 久久国产精品偷 | 九九九九精品九九九九 | 亚洲第一男人天堂 | 午夜激情视频在线观看 | 欧美激情性做爰免费视频 | 美国免费高清电影在线观看 | 澳门黄色一级片 | 中文字幕电影 | 精品国产不卡 | 亚洲成人精品久久 | 免费看欧美大片 | 青青草激情视频 | 激情网五月 | 秋霞午夜| 91麻豆精品国产91久久久久久 | 性史性dvd影片农村毛片 | 日韩精品第二页 | 性高潮久久久久久久 | 国产美女视频免费观看下载软件 | 久久作爱视频 | www.亚洲国产| 亚洲区一区二区三区 | 日韩在线观看视频网站 | av大片在线 | 免费在线国产视频 | 中文字幕在线免费看 | 国产成人精品无码片区在线 | 91久久国产综合久久91精品网站 | 五月天狠狠干 | 波多野结衣一区二区三区在线观看 | 青青免费在线视频 | 亚洲成成品网站 | 前所未有的深入 | 久久综合狠狠综合久久综合88 | 日韩精品无码一区二区三区久久久 | 特黄aaaaaaaaa真人毛片 | 天天摸天天爽 | 中文字幕首页 | 中文字幕亚洲欧美日韩高清 | 91精品国产91久久久久久黑人 | 精品人妻午夜一区二区三区四区 | 一级免费黄色片 | 日本黄色网址大全 | 超碰在线亚洲| 欧美自拍视频 | 国产亚洲色婷婷久久99精品91 | 在线观看网页视频 | 国产视频一区二区在线观看 |