整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          JavaScript封裝一個自己的Ajax并完善與拓展Ajax
          
        
           
          
	
	
          
		
                        
          在所有主流的網站，基本上都用到了ajax技術，通過異步請求數據已經是一個很普及的實現方式。市面上主流的web前端框架也都有自己封裝的ajax，而且都是大同小異的。也就是說，Ajax這個輪子已經是多的不能再多了，那為什么我們還要自己封裝一個Ajax呢？
          想要了解一個技術或者某個功能的實現原理，只有動手實踐才能真正的了解。就如我在csdn上第一篇博客的博文描述。探索技術的路上本應該自己造輪子，即使市面上有再多的選擇，自己動手嘗試也是必要的，第一次嘗試必然會問題眾多，但你不覺得解決他是一件很有成就感的事情嗎，這樣才能帶給你更大的進步和更深刻的領悟。
          廢話不說，先來寫一個最基礎的ajax：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  var ajax = new XMLHttpRequest(); 
          3.  ajax.onreadystatechange = function(){ 
          4.  if (ajax.readyState == 4 && ajax.status == 200) { 
          5.  a.success(JSON.stringify(ajax.responseText)) 
          6.  } 
          7.  } 
          8.  ajax.open(a.method, a.url,true) 
          9.  ajax.send(a.data) 
          10. } 
          11.  
          12. ajax({ 
          13.  method:'get', 
          14.  url:'http://127.0.0.1:8081/test', 
          15.  success:function(res){ 
          16.  console.log(res) 
          17.  } 
          18. }) 
          一個ajax出爐了，通過調用、填寫參數即可請求到服務器。先來分析一下這個ajax的結構，可以看得出來，其實很簡單，只是new了一個XMLHttpRequest對象，然后通過onreadystatechange方法來處理返回值，現在我們只是做了一個判斷，當請求成功時就調用success方法，如果請求失敗，我們還沒有寫上去，后面我們慢慢完善這個ajax的邏輯。
          然后調用ajax的open方法，open方法里有三個參數，第一個是請求方式（如：get或post），第二個是請求的url地址，第三個是一個bool值，是否要異步請求。
          最后使用send方法帶上參數發送請求即可。
          這是，我的服務器已經收到一個請求，但他報了404錯誤，也就是找不到對應的頁面或路由，這時success方法也不會被調用執行。
          那我們再來完善一下這個新生的ajax。我們只需要在onreadystatechange方法里增加一個條件，當請求不成功時調用自身的error方法：
          [javascript] view plain copy
          1. ajax.onreadystatechange = function(){ 
          2.  if (ajax.readyState == 4 && ajax.status == 200) { 
          3.  a.success(JSON.stringify(ajax.responseText)) 
          4.  }else{ 
          5.  a.error(ajax) 
          6.  } 
          7. } 
          這樣我們就可以在ajax請求的時候加上error方法，當ajax請求失敗的時候執行我們想要執行的操作。現在我們拋除跨域請求的問題，當你發送post請求時，你會發現后臺接收不到傳過來的參數，調用如下：
          [javascript] view plain copy
          1. ajax({ 
          2.  method:'get', 
          3.  url:'http://localhost:8081/test', 
          4.  data:'a=1', 
          5.  success:function(res){ 
          6.  console.log(res) 
          7.  }, 
          8.  error:function(res){ 
          9.  console.log(res) 
          10.  } 
          11. }) 
          后端打印一下傳過來的參數，為空。
          出現這個問題的原因主要是請求頭沒有聲明，這時候我們需要初始化聲明一下請求頭，那我們加入一行代碼：
          [javascript] view plain copy
          1. ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          設置Conten-type為application/x-www-form-urlencoded，現在后端應該是已經可以收到參數了。那我們現在的ajax調用時實在太繁瑣，有些東西我們不想填的我們應該給他設置一個默認值，不然就會報錯。
          比如error方法、method、還有是否異步的bool值等等。那我們再加入一些默認值，現在的ajax是這樣的：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.error = a.error || function(){ 
          5.  console.warn('Ajax請求失敗'); 
          6.  }; 
          7.  var ajax = new XMLHttpRequest(); 
          8.  ajax.onreadystatechange = function(){ 
          9.  if (ajax.readyState == 4 && ajax.status == 200) { 
          10.  a.success(JSON.stringify(ajax.responseText)) 
          11.  }else{ 
          12.  a.error(ajax) 
          13.  } 
          14.  } 
          15.  ajax.open(a.method, a.url,a.ajax) 
          16.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          17.  ajax.send(a.data) 
          18. } 
          現在的ajax還存在一個問題，在post請求的時候，如果我們要傳參，是需要通過字符串傳參的。那這種的書寫規則并不是很友好的：
          [javascript] view plain copy
          1. a=1&b=2 
          而一般框架的傳參都是通過json的格式來輸入的，我們也不能偏離大眾習慣搞獨立，當然我們也要保留字符串的傳參方式，只是要擴展功能。
          那我們需要加一個控制格式的參數，我們這里用dataType這個參數來控制傳參格式，默認是字符串格式傳參好了，可以選擇json格式進行傳參即可。如果是json格式傳參，我們需要把json轉化成字符串類型，代碼如下：
          [javascript] view plain copy
          1. a.dataType = a.dataType || 'string'; 
          2. var data = a.data; 
          3. if (a.dataType == 'json') { 
          4.  var nowData = ""; 
          5.  for (var i in data) { 
          6.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          7.  } 
          8.  data = nowData; 
          9. } 
          這樣，我們的ajax也就可以通過json格式進行傳參了。現在的ajax完整代碼和調用方式如下：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.dataType = a.dataType || 'string'; 
          5.  a.error = a.error || function(){ 
          6.  console.warn('Ajax請求失敗'); 
          7.  }; 
          8.  var ajax = new XMLHttpRequest(); 
          9.  ajax.onreadystatechange = function(){ 
          10.  if (ajax.readyState == 4 && ajax.status == 200) { 
          11.  a.success(JSON.stringify(ajax.responseText)) 
          12.  }else{ 
          13.  a.error(ajax) 
          14.  } 
          15.  } 
          16.  var data = a.data; 
          17.  if (a.dataType == 'json') { 
          18.  var nowData = ""; 
          19.  for (var i in data) { 
          20.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          21.  } 
          22.  data = nowData; 
          23.  } 
          24.  ajax.open(a.method, a.url,a.ajax) 
          25.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          26.  ajax.send(data) 
          27. } 
          28. //調用Ajax示例 
          29. ajax({ 
          30.  method:'post', 
          31.  url:'http://localhost:8081/test', 
          32.  dataType:'json', 
          33.  data:{ 
          34.  a:'1', 
          35.  b:'2' 
          36.  }, 
          37.  success:function(res){ 
          38.  console.log(res) 
          39.  } 
          40. }) 
          現在這個Ajax基本上已經可以滿足業務上的所以需求，不過還有一點沒有實現，我們的Ajax不能設置請求頭？！為了一些特殊需求的情況下，我們還是要把這一功能加上的：
          [javascript] view plain copy
          1. if (a.requestHeader) { 
          2.  for (var i in a.requestHeader) { 
          3.  ajax.setRequestHeader(i,a.requestHeader[i]) 
          4.  } 
          5. } 
          現在的完整代碼入下：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.dataType = a.dataType || 'string'; 
          5.  a.error = a.error || function(){ 
          6.  console.warn('Ajax請求失敗'); 
          7.  }; 
          8.  var ajax = new XMLHttpRequest(); 
          9.  ajax.onreadystatechange = function(){ 
          10.  if (ajax.readyState == 4 && ajax.status == 200) { 
          11.  a.success(JSON.parse(ajax.responseText)) 
          12.  }else if (ajax.readyState != 4 && ajax.status != 200){ 
          13.  a.error(ajax) 
          14.  } 
          15.  } 
          16.  var data = a.data; 
          17.  if (a.dataType == 'json') { 
          18.  var nowData = ""; 
          19.  for (var i in data) { 
          20.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          21.  } 
          22.  data = nowData; 
          23.  } 
          24.  ajax.open(a.method, a.url,a.ajax) 
          25.  if (a.requestHeader) { 
          26.  for (var i in a.requestHeader) { 
          27.  ajax.setRequestHeader(i,a.requestHeader[i]) 
          28.  } 
          29.  } 
          30.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          31.  ajax.send(data) 
          32. } 
          完整示例代碼文件：JavaScript封裝Ajax完整示例代碼
          述
          AJAX 是一個縮寫，它的全名是 Asynchronous JavaScript and XML，意思就是異步 JavaScript 和 XML，即用JavaScript執行異步網絡請求。
          AJAX 不是一種新技術，而是一個在 2005 年被 Jesse James Garrett 提出的新術語，用來描述一種使用現有技術集合的‘新’方法，包括:
          • HTML 或 XHTML
          • CSS
          • JavaScript
          • DOM
          • XML
          • XSLT
          • XMLHttpRequest
          盡管 X 在 AJAX 中代表 XML, 但由于 JSON 的許多優勢，比如更加輕量以及作為 Javascript 的一部分，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 AJAX 模型中打包信息。
          AJAX 的優勢
          傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁面。
          AJAX 通過在后臺與服務器進行少量數據交換，可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
          XMLHttpRequest 對象
          XMLHttpRequest（XHR）對象用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，獲取數據。這允許網頁在不影響用戶操作的情況下，更新頁面的局部內容。XMLHttpRequest 在 AJAX 編程中被大量使用。
          AJAX 的工作原理
          其工作原理基本經過以下幾個步驟：
          1. 客戶端發送請求，請求交給 xhr。
          2. xhr 把請求提交給服務。
          3. 服務器進行業務處理。
          4. 服務器響應數據交給 xhr 對象。
          5. xhr 對象接收數據，由 JavaScript 把數據寫到頁面上。
          AJAX 的創建步驟
          根據 AJAX 的工作原理，它的創建步驟主要包括：
          1. 創建 XMLHttpRequest 對象，即創建一個異步調用對象。
          2. 創建一個新的 HTTP 請求，并指定該 HTTP 請求的方法、URL 及驗證信息。
          3. 設置響應 HTTP 請求狀態變化的函數。
          4. 發送 HTTP 請求。
          5. 獲取異步調用返回的數據。
          6. 使用 JavaScript 和 DOM 實現局部刷新。
          AJAX 的具體使用
          以下是 使用 AJAX 的完整流程。
          1. 創建 XMLHttpRequest 對象
          const request = new XMLHttpRequest();
          2. 創建一個新的 HTTP 請求，并指定該 HTTP 請求的方法、URL 及驗證信息
          創建 HTTP 請求可以使用 XMLHttpReques t對象的 open() 方法,其語法代碼如下：
          request.open(method, url, async, user, password);
          參數解析：
          • method 要使用的HTTP方法，比如 "GET"、"POST"、"PUT"、"DELETE" 等。
          • url 表示要向其發送請求的 URL 地址。
          • async (可選) 一個可選的布爾參數，表示是否異步執行操作，默認為 true。如果值為 false，send() 方法直到收到答復前不會返回。如果 true，已完成事務的通知可供事件監聽器使用。如果 multipart 屬性為 true 則這個必須為 true，否則將引發異常。
          • user (可選 用于認證用途的用戶名，默認值為 null。
          • password (可選) 用于認證用途的密碼，默認值為 null。
          3. 設置響應 HTTP 請求狀態變化的函數和服務端返回信息函數
          創建完 HTTP 請求之后，應該就可以將 HTTP 請求發送給 Web 服務器了。然而，發送 HTTP 請求的目的是為了接收從服務器中返回的數據。從創建 XMLHttpRequest 對象開始，到發送數據、接收數據、XMLHttpRequest 對象一共會經歷以下 5 種狀態：
          • 未初始化狀態。在創建完 XMLHttpRequest 對象時，該對象處于未初始化狀態，此時 XMLHttpRequest 對象的 readyState 屬性值為 0。
          • 初始化狀態。在創建完 XMLHttpRequest 對象后使用 open() 方法創建了 HTTP 請求時，該對象處于初始化狀態。此時 XMLHttpRequest 對象的readyState屬性值為 1。
          • 發送數據狀態。在初始化 XMLHttpRequest 對象后，使用 send() 方法發送數據時，該對象處于發送數據狀態，此時XMLHttpRequest 對象的 readyState 屬性值為 2。
          • 接收數據狀態。Web 服務器接收完數據并進行處理完畢之后，向客戶端傳送返回的結果。此時，XMLHttpRequest 對象處于接收數據狀態，XMLHttpRequest 對象的 readyState 屬性值為 3。
          • 完成狀態。XMLHttpRequest 對象接收數據完畢后，進入完成狀態，此時 XMLHttpRequest 對象的 readyState 屬性值為 4。此時接收完畢后的數據存入在客戶端計算機的內存中，可以使用 responseText 屬性或 responseXml 屬性來獲取數據。
          總的來說，readyState 屬性的值有以下幾種：
          • 0 (未初始化) or (請求還未初始化)
          • 1 (正在加載) or (已建立服務器鏈接)
          • 2 (加載成功) or (請求已接受)
          • 3 (交互) or (正在處理請求)
          • 4 (完成) or (請求已完成并且響應已準備好)
          只讀屬性 XMLHttpRequest.status 返回了 XMLHttpRequest 響應中的數字狀態碼。status 的值是一個無符號短整型。在請求完成前，status 的值為 0。值得注意的是，如果 XMLHttpRequest 出錯，瀏覽器返回的 status 也為0：
          • UNSENT（未發送） 0
          • OPENED（已打開） 0
          • LOADING（載入中） 200
          • DONE（完成） 200
          var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 為 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 為 1

xhr.onprogress = function () {
    console.log('LOADING', xhr.readyState); // readyState 為 3
};

xhr.onload = function () {
    console.log('DONE', xhr.readyState); // readyState 為 4
};

xhr.send(null);
          只有在XMLHttpRequest對象完成了以上5個步驟之后，才可以獲取從服務器端返回的數據。因此，如果要獲得從服務器端返回的數據，就必須要先判斷XMLHttpRequest對象的狀態：
          const xhr = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // do something here
    }
}
          4. 發送HTTP請求
          XMLHttpRequest.send(data);
          結束
          最后，附上一個簡單的完整 AJAX 實例：
          <button id="ajaxButton" type="button">Make a request</button>

<script>
    var httpRequest;
    document.getElementById("ajaxButton").addEventListener('click', makeRequest);

    function makeRequest() {
        httpRequest = new XMLHttpRequest();

        httpRequest.onreadystatechange = alertContents;
        httpRequest.open('GET', 'test.html');
        httpRequest.send();
    }

    function alertContents() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
</script>
          ~
          ~
          ~ 本文完
          ~
          學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
          大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
          知識與技能并重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
          JAX 是一種與服務器交換數據的技術，可以在補充在整個頁面的情況下更新網頁的一部分。接下來通過本文給大家介紹ajax一些常用方法，大家有需要可以一起學習。
          1.url:
          要求為String類型的參數，(默認為當前頁地址)發送請求的地址。
          2.type:
          要求為String類型的參數，請求方式(post或get)默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。
          3.timeout:
          要求為Number類型的參數，設置請求超時時間(毫秒)。此設置將覆蓋$.ajaxSetup()方法的全局設置。
          4.async:
          要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。

          5.cache:
          要求為Boolean類型的參數，默認為true(當dataType為script時，默認為false)，設置為false將不會從瀏覽器緩存中加載請求信息。
          6.data:
          要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換，可以查看 processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
          7.dataType:
          要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，并作為回調函數參數傳遞。可用的類型如下：
          xml：返回XML文檔，可用JQuery處理。
          html：返回純文本HTML信息;包含的script標簽會在插入DOM時執行。
          script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下)，所有post請求都將轉為get請求。
          json：返回JSON數據。
          jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。
          text：返回純文本字符串。
          8.beforeSend：
          要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。
          function(XMLHttpRequest){
          this; //調用本次ajax請求時傳遞的options參數
          }
          9.complete：
          要求為Function類型的參數，請求完成后調用的回調函數(請求成功或失敗時均調用)。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
          function(XMLHttpRequest, textStatus){
          this; //調用本次ajax請求時傳遞的options參數
          }
          10.success：
          要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。
          (1)由服務器返回，并根據dataType參數進行處理后的數據。
          (2)描述狀態的字符串。
          function(data, textStatus){
          //data可能是xmlDoc、jsonObj、html、text等等
          this; //調用本次ajax請求時傳遞的options參數
          }
          11.error:
          要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：
          function(XMLHttpRequest, textStatus, errorThrown){
          //通常情況下textStatus和errorThrown只有其中一個包含信息
          this; //調用本次ajax請求時傳遞的options參數
          }
          12.contentType：
          要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。
          13.dataFilter：
          要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
          function(data, type){
          //返回處理后的數據
          return data;
          }
          14.dataFilter：
          要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
          function(data, type){
          //返回處理后的數據
          return data;
          }
          15.global：
          要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。
          16.ifModified：
          要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。
          17.jsonp：
          要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。
          18.username：
          要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。
          19.password：
          要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。
          20.processData：
          要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象(從技術角度來講并非字符串)以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。
          21.scriptCharset：
          要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。
          案例代碼：
          $(function(){
          $('#send').click(function(){
          $.ajax({
          type: "GET",
          url: "test.json",
          data: {username:$("#username").val(), content:$("#content").val()},
          dataType: "json",
          success: function(data){
          $('#resText').empty(); //清空resText里面的所有內容
          var html = '';
          $.each(data, function(commentIndex, comment){
          html += '<div class="comment"><h6>' + comment['username']
          + ':</h6><p class="para"' + comment['content']
          + '</p></div>';
          });
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产成人一区二区三区在线观看|
亚洲一区二区三区久久久久|
久久久久人妻精品一区二区三区
|
精品一区二区三区自拍图片区|
国产精品资源一区二区
|
99精品国产高清一区二区麻豆|
波多野结衣精品一区二区三区|
91视频一区二区|
久久国产精品一区|
无码少妇A片一区二区三区|
九九久久99综合一区二区|
一区二区三区四区精品|
影院成人区精品一区二区婷婷丽春院影视
|
91精品一区二区综合在线|
中文字幕在线播放一区|
视频精品一区二区三区|
亚洲一区在线视频观看|
日本一区二区在线|
亚洲午夜福利AV一区二区无码|
一级特黄性色生活片一区二区
|
国产一区二区三区在线免费
|
国产自产对白一区|
国产亚洲无线码一区二区|
久久精品国产一区二区
|
av无码人妻一区二区三区牛牛|
精品一区二区AV天堂|
日本免费一区二区三区最新vr|
亚洲欧美成人一区二区三区|
亚洲国产情侣一区二区三区|
一区二区三区四区精品视频|
视频一区二区在线播放|
麻豆国产一区二区在线观看|
国产精品无圣光一区二区|
99精品国产高清一区二区三区
|
国产av福利一区二区三巨|
国产免费私拍一区二区三区|
国产一区二区三区播放|
国产精品综合一区二区|
精品在线视频一区|
久久精品国产一区二区三区不卡|
人妻无码一区二区视频|