整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          在 JS 中如何使用 Ajax 來進行請求

          人已經過原 Danny Markov 授權翻譯

          在本教程中,我們將學習如何使用 JS 進行AJAX調用。

          1.AJAX

          術語AJAX 表示 異步的 JavaScript 和 XML

          AJAX 在 JS 中用于發出異步網絡請求來獲取資源。當然,不像名稱所暗示的那樣,資源并不局限于XML,還用于獲取JSON、HTML或純文本等資源。

          有多種方法可以發出網絡請求并從服務器獲取數據。我們將一一介紹。

          2.XMLHttpRequest

          XMLHttpRequest對象(簡稱XHR)在較早的時候用于從服務器異步檢索數據。

          之所以使用XML,是因為它首先用于檢索XML數據。現在,它也可以用來檢索JSON, HTML或純文本。

          事例 2.1: GET

          function success() {
            var data = JSON.parse(this.responseText)
            console.log(data)
          }
          
          function error (err) {
            console.log('Error Occurred:', err)
          }
          
          var xhr = new XMLHttpRequest()
          xhr.onload = success
          xhr.onerror = error
          xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1")
          xhr.send()
          

          我們看到,要發出一個簡單的GET請求,需要兩個偵聽器來處理請求的成功和失敗。我們還需要調用open()和send()方法。來自服務器的響應存儲在responseText變量中,該變量使用JSON.parse()轉換為JavaScript 對象。

          function success() {
              var data = JSON.parse(this.responseText);
              console.log(data);
          }
          
          function error(err) {
              console.log('Error Occurred :', err);
          }
          
          var xhr = new XMLHttpRequest();
          xhr.onload = success;
          xhr.onerror = error;
          xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
          xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
          xhr.send(JSON.stringify({
              title: 'foo',
              body: 'bar',
              userId: 1
            })
          );
          

          我們看到POST請求類似于GET請求。我們需要另外使用setRequestHeader設置請求標頭“Content-Type” ,并使用send方法中的JSON.stringify將JSON正文作為字符串發送。

          2.3 XMLHttpRequest vs Fetch

          早期的開發人員,已經使用了好多年的 XMLHttpRequest來請求數據了。現代的fetch API允許我們發出類似于XMLHttpRequest(XHR)的網絡請求。主要區別在于fetch()API使用Promises,它使 API更簡單,更簡潔,避免了回調地獄。

          3. Fetch API

          Fetch 是一個用于進行AJAX調用的原生 JavaScript API,它得到了大多數瀏覽器的支持,現在得到了廣泛的應用。

          3.1 API用法

          fetch(url, options)
              .then(response => {
                  // handle response data
              })
              .catch(err => {
                  // handle errors
              });
          

          API參數

          fetch() API有兩個參數

          1. url是必填參數,它是您要獲取的資源的路徑。
          2. options是一個可選參數。不需要提供這個參數來發出簡單的GET請求。
          • method: GET | POST | PUT | DELETE | PATCH
          • headers: 請求頭,如 { “Content-type”: “application/json; charset=UTF-8” }
          • mode: cors | no-cors | same-origin | navigate
          • cache: default | reload | no-cache
          • body: 一般用于POST請求

          API返回Promise對象

          fetch() API返回一個promise對象。

          • 如果存在網絡錯誤,則將拒絕,這會在.catch()塊中處理。
          • 如果來自服務器的響應帶有任何狀態碼(如200、404、500),則promise將被解析。響應對象可以在.then()塊中處理。

          錯誤處理

          請注意,對于成功的響應,我們期望狀態代碼為200(正常狀態),但是即使響應帶有錯誤狀態代碼(例如404(未找到資源)和500(內部服務器錯誤)),fetch() API 的狀態也是 resolved,我們需要在.then() 塊中顯式地處理那些。

          我們可以在response 對象中看到HTTP狀態:

          • HTTP狀態碼,例如200。
          • ok –布爾值,如果HTTP狀態代碼為200-299,則為true。

          3.3 示例:GET

          const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .catch(err => console.error(err));
          
          getTodoItem.then(response => console.log(response));
          
          Response
          
           { userId: 1, id: 1, title: "delectus aut autem", completed: false }
          

          在上面的代碼中需要注意兩件事:

          1. fetch API返回一個promise對象,我們可以將其分配給變量并稍后執行。
          2. 我們還必須調用response.json()將響應對象轉換為JSON

          錯誤處理

          我們來看看當HTTP GET請求拋出500錯誤時會發生什么:

          fetch('http://httpstat.us/500') // this API throw 500 error
            .then(response => () => {
              console.log("Inside first then block");
              return response.json();
            })
            .then(json => console.log("Inside second then block", json))
            .catch(err => console.error("Inside catch block:", err));
          
          Inside first then block
          ? ? Inside catch block: SyntaxError: Unexpected token I in JSON at position 4
          

          我們看到,即使API拋出500錯誤,它仍然會首先進入then()塊,在該塊中它無法解析錯誤JSON并拋出catch()塊捕獲的錯誤。

          這意味著如果我們使用fetch()API,則需要像這樣顯式地處理此類錯誤:-

          fetch('http://httpstat.us/500')
            .then(handleErrors)
            .then(response => response.json())
            .then(response => console.log(response))
            .catch(err => console.error("Inside catch block:", err));
          
          function handleErrors(response) {
            if (!response.ok) { // throw error based on custom conditions on response
                throw Error(response.statusText);
            }
            return response;
          }
          
           ? Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)
          

          3.3 示例:POST

          fetch('https://jsonplaceholder.typicode.com/todos', {
              method: 'POST',
              body: JSON.stringify({
                completed: true,
                title: 'new todo item',
                userId: 1
              }),
              headers: {
                "Content-type": "application/json; charset=UTF-8"
              }
            })
            .then(response => response.json())
            .then(json => console.log(json))
            .catch(err => console.log(err))
          
          Response
          
          ? {completed: true, title: "new todo item", userId: 1, id: 201}
          

          在上面的代碼中需要注意兩件事:-

          1. POST請求類似于GET請求。我們還需要在fetch() API的第二個參數中發送method,body 和headers 屬性。
          2. 我們必須需要使用 JSON.stringify() 將對象轉成字符串請求body參數

          4.Axios API

          Axios API非常類似于fetch API,只是做了一些改進。我個人更喜歡使用Axios API而不是fetch() API,原因如下:

          • 為GET 請求提供 axios.get(),為 POST 請求提供 axios.post()等提供不同的方法,這樣使我們的代碼更簡潔。
          • 將響應代碼(例如404、500)視為可以在catch()塊中處理的錯誤,因此我們無需顯式處理這些錯誤。
          • 它提供了與IE11等舊瀏覽器的向后兼容性
          • 它將響應作為JSON對象返回,因此我們無需進行任何解析

          4.1 示例:GET

          // 在chrome控制臺中引入腳本的方法
          
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://unpkg.com/axios/dist/axios.min.js';
          document.head.appendChild(script);
          
          axios.get('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => console.log(response.data))
            .catch(err => console.error(err));
          
          Response
          
          { userId: 1, id: 1, title: "delectus aut autem", completed: false }
          

          我們可以看到,我們直接使用response獲得響應數據。數據沒有任何解析對象,不像fetch() API。

          錯誤處理

          axios.get('http://httpstat.us/500')
            .then(response => console.log(response.data))
            .catch(err => console.error("Inside catch block:", err));
          
          Inside catch block: Error: Network Error
          

          我們看到,500錯誤也被catch()塊捕獲,不像fetch() API,我們必須顯式處理它們。

          4.2 示例:POST

          axios.post('https://jsonplaceholder.typicode.com/todos', {
                completed: true,
                title: 'new todo item',
                userId: 1
            })
            .then(response => console.log(response.data))
            .catch(err => console.log(err))
          
           {completed: true, title: "new todo item", userId: 1, id: 201}
          

          我們看到POST方法非常簡短,可以直接傳遞請求主體參數,這與fetch()API不同。


          作者:Danny Markov 譯者:前端小智 來源:tutorialzine

          原文:https://tutorialzine.com/2017/12-terminal-commands-every-web-developer-should-know

          TML 代碼約定

          很多 Web 開發人員對 HTML 的代碼規范知之甚少。

          在2000年至2010年,許多Web開發人員從 HTML 轉換到 XHTML。

          使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

          而針對于 HTML5 ,我們應該形成比較好的代碼規范,以下提供了幾種規范的建議。

          使用正確的文檔類型

          文檔類型聲明位于HTML文檔的第一行:

          <!DOCTYPE html>

          如果你想跟其他標簽一樣使用小寫,可以使用以下代碼:

          <!doctype html>

          使用小寫元素名

          HTML5 元素名可以使用大寫和小寫字母。

          推薦使用小寫字母:

          • 混合了大小寫的風格是非常糟糕的。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <SECTION>

          <p>這是一個段落。</p>

          </SECTION>

          非常糟糕:

          <Section>

          <p>這是一個段落。</p>

          </SECTION>

          推薦:

          <section>

          <p>這是一個段落。</p>

          </section>

          關閉所有 HTML 元素

          在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素),但我們建議每個元素都要添加關閉標簽。

          不推薦:

          <section>

          <p>這是一個段落。

          <p>這是一個段落。

          </section>

          推薦:

          <section>

          <p>這是一個段落。</p>

          <p>這是一個段落。</p>

          </section>

          關閉空的 HTML 元素

          在 HTML5 中, 空的 HTML 元素也不一定要關閉:

          我們可以這么寫:

          <meta charset="utf-8">

          也可以這么寫:

          <meta charset="utf-8" />

          在 XHTML 和 XML 中斜線 (/) 是必須的。

          如果你期望 XML 軟件使用你的頁面,使用這種風格是非常好的。

          使用小寫屬性名

          HTML5 屬性名允許使用大寫和小寫字母。

          我們推薦使用小寫字母屬性名:

          • 同時使用大小寫是非常不好的習慣。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <div CLASS="menu">

          推薦:

          <div class="menu">

          屬性值

          HTML5 屬性值可以不用引號。

          屬性值我們推薦使用引號:

          • 如果屬性值含有空格需要使用引號。

          • 混合風格不推薦的,建議統一風格。

          • 屬性值使用引號易于閱讀。

          以下實例屬性值包含空格,沒有使用引號,所以不能起作用:

          <table class=table striped>

          以下使用了雙引號,是正確的:

          <table class="table striped">

          圖片屬性

          圖片通常使用 alt 屬性。 在圖片不能顯示時,它能替代圖片顯示。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          定義好圖片的尺寸,在加載時可以預留指定空間,減少閃爍。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          空格和等號

          等號前后可以使用空格。

          <link rel = "stylesheet" href = "styles.css">

          但我們推薦少用空格:

          <link rel="stylesheet" href="styles.css">

          避免一行代碼過長

          使用 HTML 編輯器,左右滾動代碼是不方便的。

          每行代碼盡量少于 80 個字符。

          空行和縮進

          不要無緣無故添加空行。

          為每個邏輯功能塊添加空行,這樣更易于閱讀。

          縮進使用兩個空格,不建議使用 TAB。

          比較短的代碼間不要使用不必要的空行和縮進。

          不必要的空行和縮進:

          <body>

          <h1>菜鳥教程</h1>

          <h2>HTML</h2>

          <p>

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想,

          菜鳥教程,學的不僅是技術,更是夢想。

          </p>

          </body>

          推薦:

          <body>

          <h1>菜鳥教程</h1>

          <h2></h2>

          <p>菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。</p>

          </body>

          表格實例:

          <table>

          <tr>

          <th>Name</th>

          <th>Description</th>

          </tr>

          <tr>

          <td>A</td>

          <td>Description of A</td>

          </tr>

          <tr>

          <td>B</td>

          <td>Description of B</td>

          </tr>

          </table>

          列表實例:

          <ol>

          <li>London</li>

          <li>Paris</li>

          <li>Tokyo</li>

          </ol>

          省略 <html> 和 <body>?

          在標準 HTML5 中, <html> 和 <body> 標簽是可以省略的。

          以下 HTML5 文檔是正確的:

          實例:

          <!DOCTYPE html>

          <head>

          <title>頁面標題</title>

          </head>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          嘗試一下 ?

          不推薦省略 <html> 和 <body> 標簽。

          <html> 元素是文檔的根元素,用于描述頁面的語言:

          <!DOCTYPE html>

          <html lang="zh">

          聲明語言是為了方便屏幕閱讀器及搜索引擎。

          省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

          省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

          省略 <head>?

          在標準 HTML5 中, <head>標簽是可以省略的。

          默認情況下,瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

          實例

          <!DOCTYPE html>

          <html>

          <title>頁面標題</title>

          <body>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          </body>

          </html>

          嘗試一下 ?

          現在省略 head 標簽還不推薦使用。

          元數據

          HTML5 中 <title> 元素是必須的,標題名描述了頁面的主題:

          <title>菜鳥教程</title>

          標題和語言可以讓搜索引擎很快了解你頁面的主題:

          <!DOCTYPE html>

          <html lang="zh">

          <head>

          <meta charset="UTF-8">

          <title>菜鳥教程</title>

          </head>

          HTML 注釋

          注釋可以寫在 <!-- 和 --> 中:

          <!-- 這是注釋 -->

          比較長的評論可以在 <!-- 和 --> 中分行寫:

          <!--

          這是一個較長評論。 這是 一個較長評論。這是一個較長評論。

          這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。

          -->

          長評論第一個字符縮進兩個空格,更易于閱讀。

          樣式表

          樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

          <link rel="stylesheet" href="styles.css">

          短的規則可以寫成一行:

          p.into {font-family: Verdana; font-size: 16em;}

          長的規則可以寫成多行:

          body {

          background-color: lightgrey;

          font-family: "Arial Black", Helvetica, sans-serif;

          font-size: 16em;

          color: black;

          }

          • 將左花括號與選擇器放在同一行。

          • 左花括號與選擇器間添加以空格。

          • 使用兩個空格來縮進。

          • 冒號與屬性值之間添加已空格。

          • 逗號和符號之后使用一個空格。

          • 每個屬性與值結尾都要使用符號。

          • 只有屬性值包含空格時才使用引號。

          • 右花括號放在新的一行。

          • 每行最多 80 個字符。

          在逗號和分號后添加空格是常用的一個規則。

          在 HTML 中載入 JavaScript

          使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

          <script src="myscript.js">

          使用 JavaScript 訪問 HTML 元素

          一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

          以下兩個 JavaScript 語句會輸出不同結果:

          實例

          var obj = getElementById("Demo")

          var obj = getElementById("demo")

          HTML 中 JavaScript 盡量使用相同的命名規則。

          訪問 JavaScript 代碼規范。

          使用小寫文件名

          大多 Web 服務器 (Apache, Unix) 對大小寫敏感: london.jpg 不能通過 London.jpg 訪問。

          其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

          你必須保持統一的風格,我們建議統一使用小寫的文件名。

          文件擴展名

          HTML 文件后綴可以是 .html (或r .htm)。

          CSS 文件后綴是 .css

          JavaScript 文件后綴是 .js

          .htm 和 .html 的區別

          .htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

          區別在于:

          .htm 應用在早期 DOS 系統,系統現在或者只能有三個字符。

          在 Unix 系統中后綴沒有特別限制,一般用 .html。

          技術上區別

          如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

          如果服務器只配置了 "index.html" 作為默認文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。

          但是,通常服務器可以設置多個默認文件,你可以根據需要設置默認文件嗎。

          不管怎樣,HTML 完整的后綴是 ".html"。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          所有的 JavaScript 項目適用同一種規范。

          JavaScript 代碼規范

          代碼規范通常包括以下幾個方面:

          • 變量和函數的命名規則

          • 空格,縮進,注釋的使用規則。

          • 其他常用規范……

          規范的代碼可以更易于閱讀與維護。

          代碼規范一般在開發前規定,可以跟你的團隊成員來協商設置。

          變量名

          變量名推薦使用駝峰法來命名(camelCase):

          firstName = "John";

          lastName = "Doe";

          price = 19.90;

          tax = 0.20;

          fullPrice = price + (price * tax);

          空格與運算符

          通常運算符 ( = + - * / ) 前后需要添加空格:

          實例:

          var x = y + z;

          var values = ["Volvo", "Saab", "Fiat"];

          代碼縮進

          通常使用 4 個空格符號來縮進代碼塊:

          函數:

          function toCelsius(fahrenheit) {

          return (5 / 9) * (fahrenheit - 32);

          }

          不推薦使用 TAB 鍵來縮進,因為不同編輯器 TAB 鍵的解析不一樣。

          語句規則

          簡單語句的通用規則:

          • 一條語句通常以符號作為結束符。

          實例:

          var values = ["Volvo", "Saab", "Fiat"];

          var person = {

          firstName: "John",

          lastName: "Doe",

          age: 50,

          eyeColor: "blue"

          };

          復雜語句的通用規則:

          • 將左花括號放在第一行的結尾。

          • 左花括號前添加一空格。

          • 將右花括號獨立放在一行。

          • 不要以分號結束一個復雜的聲明。

          函數:

          function toCelsius(fahrenheit) {

          return (5 / 9) * (fahrenheit - 32);

          }

          循環:

          for (i = 0; i < 5; i++) {

          x += i;

          }

          條件語句:

          if (time < 20) {

          greeting = "Good day";

          } else {

          greeting = "Good evening";

          }

          對象規則

          對象定義的規則:

          • 將左花括號與類名放在同一行。

          • 冒號與屬性值間有個空格。

          • 字符串使用雙引號,數字不需要。

          • 最后一個屬性-值對后面不要添加逗號。

          • 將右花括號獨立放在一行,并以符號作為結束符號。

          實例:

          var person = {

          firstName: "John",

          lastName: "Doe",

          age: 50,

          eyeColor: "blue"

          };

          短的對象代碼可以直接寫成一行:

          實例:

          var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

          每行代碼字符小于 80

          為了便于閱讀每行字符建議小于數 80 個。

          如果一個 JavaScript 語句超過了 80 個字符,建議在 運算符或者逗號后換行。

          實例:

          document.getElementById("demo").innerHTML =

          "Hello Runoob.";

          命名規則

          一般很多代碼語言的命名規則都是類似的,例如:

          • 變量和函數為駝峰法( camelCase

          • 全局變量為大寫 (UPPERCASE )

          • 常量 (如 PI) 為大寫 (UPPERCASE )

          變量命名你是否使用這幾種規則: hyp-hens, camelCase, 或 under_scores ?

          HTML 和 CSS 的橫桿(-)字符:

          HTML5 屬性可以以 data- (如:data-quantity, data-price) 作為前綴。

          CSS 使用 - 來連接屬性名 (font-size)。

          - 通常在 JavaScript 中被認為是減法,所以不允許使用。

          下劃線:

          很多程序員比較喜歡使用下劃線(如:date_of_birth), 特別是在 SQL 數據庫中。

          PHP 語言通常都使用下劃線。

          帕斯卡拼寫法(PascalCase):

          帕斯卡拼寫法(PascalCase) 在 C 語言中語言較多。

          駝峰法:

          JavaScript 中通常推薦使用駝峰法,jQuery 及其他 JavaScript 庫都使用駝峰法。

          變量名不要以 $ 作為開始標記,會與很多 JavaScript 庫沖突。

          HTML 載入外部 JavaScript 文件

          使用簡潔的格式載入 JavaScript 文件 ( type 屬性不是必須的):

          <script src="myscript.js">

          使用 JavaScript 訪問 HTML 元素

          一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

          以下兩個 JavaScript 語句會輸出不同結果:

          實例

          var obj = getElementById("Demo")

          var obj = getElementById("demo")

          HTML 與 JavaScript 盡量使用相同的命名規則。

          訪問 HTML(5) 代碼規范。

          文件擴展名

          HTML 文件后綴可以是 .html (或r .htm)。

          CSS 文件后綴是 .css

          JavaScript 文件后綴是 .js

          使用小寫文件名

          大多 Web 服務器 (Apache, Unix) 對大小寫敏感: london.jpg 不能通過 London.jpg 訪問。

          其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

          你必須保持統一的風格,我們建議統一使用小寫的文件名。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 国产精品一区三区| 国产日韩AV免费无码一区二区三区| 色天使亚洲综合一区二区| 精品国产一区二区22| 国偷自产视频一区二区久| 亚洲精品日韩一区二区小说| 亚洲国产精品一区第二页 | 无码人妻一区二区三区在线| 无码日韩人妻AV一区免费l| 精品国产一区二区三区在线| 中文字幕在线不卡一区二区| 国产a∨精品一区二区三区不卡| 丝袜人妻一区二区三区网站| 成人在线一区二区| 国产一区二区三区在线观看免费 | 国产女人乱人伦精品一区二区| 亚洲一区二区三区亚瑟| 人妻夜夜爽天天爽爽一区| 日韩一区二区在线观看视频| 奇米精品视频一区二区三区 | 亚洲一区二区精品视频| 亚洲爽爽一区二区三区| 久久成人国产精品一区二区 | 国产萌白酱在线一区二区| 日本无卡码免费一区二区三区| 无码人妻av一区二区三区蜜臀| 午夜DV内射一区区| 一区二区三区久久精品| 精品一区二区三区免费视频| 日韩AV无码一区二区三区不卡毛片| 久久一区二区免费播放| 久久国产午夜一区二区福利| 精品无码一区在线观看| 亚洲AV无码一区二区三区电影| 夜夜高潮夜夜爽夜夜爱爱一区| 精品视频午夜一区二区| 清纯唯美经典一区二区| 久久久无码一区二区三区| 成人毛片无码一区二区| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 精品一区二区三区东京热|