日韩精品亚洲专在线电影,无遮无挡爽爽免费视频,777奇米四色成人影视色区

724 http：前后端分離，服務(wù)器端渲染，請求方式，響應(yīng)狀態(tài)碼，ajax，F(xiàn)etch，文件上傳

前后端分離的優(yōu)勢

網(wǎng)頁的渲染過程 – 服務(wù)器端渲染

~

網(wǎng)頁的渲染過程 – 前后端分離

~

HTTP的組成

HTTP的版本

HTTP的請求方式

HTTP Request Header（一）

HTTP Request Header（二）

HTTP Response響應(yīng)狀態(tài)碼

https://developer.mozilla.org/zh-CN/docs/web/http/status
~

200
201：Created ，POST請求，創(chuàng)建新的資源，即創(chuàng)建新的數(shù)據(jù)
301：重定向
400：傳參，或者請求地址，或者別的原因，導(dǎo)致服務(wù)器不能處理請求
401：Unauthorized，未授權(quán)的錯誤，必須攜帶請求的身份信息，cookie、token，比如用戶沒登錄
403：Forbidden 客戶端沒有權(quán)限訪問，被拒接，比如登錄了，但是沒權(quán)限
404：url接口不存在
....

返回錯誤碼的方式401，2種不同的響應(yīng)狀態(tài)碼的設(shè)計

HTTP Request Header

Chrome安裝插件 - FeHelper

https://github.com/zxlie/FeHelper/tree/master/apps/static/screenshot/crx
~

AJAX發(fā)送請求

XMLHttpRequest的state（狀態(tài)）

XMLHttpRequest其他事件監(jiān)聽

響應(yīng)數(shù)據(jù)和響應(yīng)類型

HTTP響應(yīng)的狀態(tài)statu

GET/POST請求傳遞參數(shù)

ajax網(wǎng)絡(luò)請求封裝

延遲時間timeout和取消請求

認(rèn)識Fetch和Fetch API

Fetch數(shù)據(jù)的響應(yīng)（Response）

Fetch網(wǎng)絡(luò)請求的演練

Fetch POST請求

XMLHttpRequest文件上傳

Fetch文件上傳

02_XHR-XHR請求的基本使用.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1.創(chuàng)建XMLHttpRequest對象 【創(chuàng)建網(wǎng)絡(luò)請求的AJAX對象】
      const xhr = new XMLHttpRequest();

      // 2.監(jiān)聽狀態(tài)的改變(宏任務(wù))
      xhr.onreadystatechange = function () {
        console.log(xhr);
        console.log('readyState---', xhr.readyState); // 一次輸出1、2、3、4
        // console.log(xhr.response)

        if (xhr.readyState !== XMLHttpRequest.DONE) return;

        // 將字符串轉(zhuǎn)成JSON對象(js對象)
        const resJSON = JSON.parse(xhr.response);
        const banners = resJSON.data.banner.list;
        console.log(banners);
      };

      // 3.配置請求open
      // method: 請求的方式(get/post/delete/put/patch...)
      // url: 請求的地址
      xhr.open('get', 'http://123.207.32.32:8000/home/multidata');

      // 4.發(fā)送請求(瀏覽器幫助發(fā)送對應(yīng)請求)
      xhr.send();
    </script>
  </body>
</html>

03_XHR-XHR狀態(tài)變化的監(jiān)聽.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 1.創(chuàng)建XMLHttpRequest對象
    const xhr = new XMLHttpRequest()

    // 2.監(jiān)聽狀態(tài)的改變(宏任務(wù))
    // 監(jiān)聽四種狀態(tài)
    xhr.onreadystatechange = function() {
      // 1.如果狀態(tài)不是DONE狀態(tài), 直接返回
      if (xhr.readyState !== XMLHttpRequest.DONE) return

      // 2.確定拿到了數(shù)據(jù)
      console.log(xhr.response)
    }

    // 3.配置請求open
    xhr.open("get", "http://123.207.32.32:8000/home/multidata")

    // 4.發(fā)送請求(瀏覽器幫助發(fā)送對應(yīng)請求)
    xhr.send()

  </script>

</body>
</html>

04_XHR-XHR發(fā)送同步的請求.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 1.創(chuàng)建XMLHttpRequest對象
    const xhr = new XMLHttpRequest()

    // 2.監(jiān)聽狀態(tài)的改變(宏任務(wù))
    // 監(jiān)聽四種狀態(tài)
    // xhr.onreadystatechange = function() {
    //   // 1.如果狀態(tài)不是DONE狀態(tài), 直接返回
    //   if (xhr.readyState !== XMLHttpRequest.DONE) return

    //   // 2.確定拿到了數(shù)據(jù)
    //   console.log(xhr.response)
    // }

    // 3.配置請求open
    // async: false
    // 實際開發(fā)中要使用異步請求, 異步請求不會阻塞js代碼繼續(xù)執(zhí)行
    xhr.open("get", "http://123.207.32.32:8000/home/multidata", false)

    // 4.發(fā)送請求(瀏覽器幫助發(fā)送對應(yīng)請求)
    xhr.send()

    // 5.同步必須等到有結(jié)果后, 才會繼續(xù)執(zhí)行
    console.log(xhr.response)

    console.log("------")
    console.log("++++++")
    console.log("******")

  </script>

  <h2>script后續(xù)的h2元素</h2>

</body>
</html>

05_XHR-XHR其他事件的監(jiān)聽.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    const xhr = new XMLHttpRequest()
    // onload監(jiān)聽數(shù)據(jù)加載完成
    xhr.onload = function() {
      console.log("onload")
    }
    xhr.open("get", "http://123.207.32.32:8000/home/multidata")
    xhr.send()

  </script>

</body>
</html>

06_XHR-XHR響應(yīng)數(shù)據(jù)和類型.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.
    const xhr = new XMLHttpRequest()

    // 2.onload監(jiān)聽數(shù)據(jù)加載完成
    xhr.onload = function() {
      // const resJSON = JSON.parse(xhr.response)
      console.log(xhr.response)
      // console.log(xhr.responseText)
      // console.log(xhr.responseXML)
    }

    // 3.告知xhr獲取到的數(shù)據(jù)的類型
    xhr.responseType = "json"
    // xhr.responseType = "xml"

    // 4.配置網(wǎng)絡(luò)請求
    // 4.1.json類型的接口
    xhr.open("get", "http://123.207.32.32:8000/home/multidata")
    // 4.2.json類型的接口
    // xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_json")
    // 4.3.text類型的接口
    // xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_text")
    // 4.4.xml類型的接口
    // xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_xml")

    // 5.發(fā)送網(wǎng)絡(luò)請求
    xhr.send()

  </script>

</body>
</html>

07_XHR-獲取HTTP的狀態(tài)碼.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    
    // 1.創(chuàng)建對象
    const xhr = new XMLHttpRequest()

    // 2.監(jiān)聽結(jié)果
    xhr.onload = function() {
      console.log(xhr.status, xhr.statusText)
      // 根據(jù)http的狀態(tài)碼判斷是否請求成功
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.response)
      } else {
        console.log(xhr.status, xhr.statusText)
      }
    }

    xhr.onerror = function() {
      console.log("onerror", xhr.status, xhr.statusText)
    }

    // 3.設(shè)置響應(yīng)類型
    xhr.responseType = "json"

    // 4.配置網(wǎng)絡(luò)請求
    // xhr.open("get", "http://123.207.32.32:8000/abc/cba/aaa")
    xhr.open("get", "http://123.207.32.32:8000/home/multidata")

    // 5.發(fā)送網(wǎng)絡(luò)請求
    xhr.send()
  </script>

</body>
</html>

08_XHR-GET-POST請求傳參.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form class="info">
      <input type="text" name="username" />
      <input type="password" name="password" />
    </form>
    <button class="send">發(fā)送請求</button>

    <script>
      const formEl = document.querySelector('.info');
      const sendBtn = document.querySelector('.send');

      sendBtn.onclick = function () {
        // 創(chuàng)建xhr對象
        const xhr = new XMLHttpRequest();

        // 監(jiān)聽數(shù)據(jù)響應(yīng)
        xhr.onload = function () {
          console.log(xhr.response);
        };

        // 配置請求
        xhr.responseType = 'json';

        // 1.傳遞參數(shù)方式一: get -> query
        // xhr.open("get", "http://123.207.32.32:1888/02_param/get?name=why&age=18&address=廣州市")

        // 2.傳遞參數(shù)方式二: post -> urlencoded
        // xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")
        // // 發(fā)送請求(請求體body)
        // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        // xhr.send("name=why&age=18&address=廣州市")

        // 3.傳遞參數(shù)方式三: post -> formdata 【如果有表單，是application/x-www-form-urlencoded來編碼的，默認(rèn)RequestHeader的Content-type是這種格式，不需要設(shè)置?！?        // xhr.open("post", "http://123.207.32.32:1888/02_param/postform")
        // const formData = new FormData(formEl) // formElement對象轉(zhuǎn)成FormData對象
        // xhr.send(formData)

        // 4.傳遞參數(shù)方式四: post -> json
        xhr.open('post', 'http://123.207.32.32:1888/02_param/postjson');
        xhr.setRequestHeader('Content-type', 'application/json');
        xhr.send(JSON.stringify({ name: 'why', age: 18, height: 1.88 }));
      };
    </script>
  </body>
</html>

09_XHR-Ajax網(wǎng)絡(luò)請求封裝.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 練習(xí)hyajax -> axios
    function hyajax({
      url,
      method = "get",
      data = {},
      headers = {}, // token
      success,
      failure
    } = {}) {
      // 1.創(chuàng)建對象
      const xhr = new XMLHttpRequest()

      // 2.監(jiān)聽數(shù)據(jù)
      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
          success && success(xhr.response)
        } else {
          failure && failure({ status: xhr.status, message: xhr.statusText })
        }
      }

      // 3.設(shè)置類型
      xhr.responseType = "json"

      // 4.open方法
      if (method.toUpperCase() === "GET") {
        const queryStrings = []
        for (const key in data) {
          queryStrings.push(`${key}=${data[key]}`)
        }
        url = url + "?" + queryStrings.join("&")
        xhr.open(method, url)
        xhr.send()
      } else {
        xhr.open(method, url)
        xhr.setRequestHeader("Content-type", "application/json")
        xhr.send(JSON.stringify(data))
      }

      return xhr
    }

    // 調(diào)用者
    hyajax({
      url: "http://123.207.32.32:1888/02_param/get",
      method: "GET",
      data: {
        name: "why",
        age: 18
      },
      success: function(res) {
        console.log("res:", res)
      },
      failure: function(err) {
        // alert(err.message)
      }
    })

    // hyajax({
    //   url: "http://123.207.32.32:1888/02_param/postjson",
    //   method: "post",
    //   data: {
    //     name: "jsondata",
    //     age: 22
    //   },
    //   success: function(res) {
    //     console.log("res:", res)
    //   },
    //   failure: function(err) {
    //     // alert(err.message)
    //   }
    // })

  </script>

</body>
</html>

10_XHR-Ajax網(wǎng)絡(luò)請求工具.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- <script src="./utils/hyajax.js"></script> -->
  <script src="./utils/hyajax_promise.js"></script>
  <script>
    const promise = hyajax({
      url: "http://123.207.32.32:1888/02_param/get",
      data: {
        username: "jie",
        password: "123456"
      }
    })

    promise.then(res => {
      console.log("res:", res)
    }).catch(err => {
      console.log("err:", err)
    })
  </script>

</body>
</html>

11_XHR-超時時間-取消請求.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <button>取消請求</button>

  <script>
    const xhr = new XMLHttpRequest()

    xhr.onload = function() {
      console.log(xhr.response)
    }
    xhr.onabort = function() {
      console.log("請求被取消掉了")
    }
    
    xhr.responseType = "json"

    // 1.超市時間的設(shè)置
    xhr.ontimeout = function() {
      console.log("請求過期: timeout")
    }
    // timeout: 瀏覽器達(dá)到過期時間還沒有獲取到對應(yīng)的結(jié)果時, 取消本次請求
    // xhr.timeout = 3000
    xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout")

    xhr.send()

    // 2.手動取消結(jié)果
    const cancelBtn = document.querySelector("button")
    cancelBtn.onclick = function() {
      xhr.abort()
    }

  </script>

</body>
</html>

12_Fetch-Fetch函數(shù)基本使用.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.fetch發(fā)送get請求
    // 1.1.未優(yōu)化的代碼
    // fetch("http://123.207.32.32:8000/home/multidata").then(res => {
    //   // 1.獲取到response
    //   const response = res

    //   // 2.獲取具體的結(jié)果
    //   response.json().then(res => {
    //     console.log("res:", res)
    //   })
    // }).catch(err => {
    //   console.log("err:", err)
    // })

    // 1.2. 優(yōu)化方式一:
    // fetch("http://123.207.32.32:8000/home/multidata").then(res => {
    //   // 1.獲取到response
    //   const response = res
    //   // 2.獲取具體的結(jié)果
    //   return response.json()
    // }).then(res => {
    //   console.log("res:", res)
    // }).catch(err => {
    //   console.log("err:", err)
    // })

    // 1.3. 優(yōu)化方式二:
    // async function getData() {
    //   const response = await fetch("http://123.207.32.32:8000/home/multidata")
    //   const res = await response.json()
    //   console.log("res:", res)
    // }
    // getData()


    // 2.post請求并且有參數(shù)
    async function getData() {
      // const response = await fetch("http://123.207.32.32:1888/02_param/postjson", {
      //   method: "post",
      //   // headers: {
      //   //   "Content-type": "application/json"
      //   // },
      //   body: JSON.stringify({
      //     name: "why",
      //     age: 18
      //   })
      // })
      
      const formData = new FormData()
      formData.append("name", "why")
      formData.append("age", 18)
      const response = await fetch("http://123.207.32.32:1888/02_param/postform", {
        method: "post",
        body: formData
      })

      // 獲取response狀態(tài)
      console.log(response.ok, response.status, response.statusText)

      const res = await response.json()
      console.log("res:", res)
    }
    getData()

  </script>

</body>
</html>

13_XHR-文件上傳的接口演練.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input class="file" type="file" />
    <button class="upload">上傳文件</button>

    <script>
      // xhr/fetch

      const uploadBtn = document.querySelector('.upload');
      uploadBtn.onclick = function () {
        // 1.創(chuàng)建對象
        const xhr = new XMLHttpRequest();

        // 2.監(jiān)聽結(jié)果
        xhr.onload = function () {
          console.log(xhr.response);
        };

        xhr.onprogress = function (event) {
          console.log(event);
        };

        xhr.responseType = 'json';
        xhr.open('post', 'http://123.207.32.32:1888/02_param/upload');

        // 表單
        const fileEl = document.querySelector('.file');
        const file = fileEl.files[0];

        const formData = new FormData();
        formData.append('avatar', file);

        xhr.send(formData);
      };
    </script>
  </body>
</html>

14_Fetch-文件上傳的接口演練.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <input class="file" type="file">
  <button class="upload">上傳文件</button>
  
  <script>

    // xhr/fetch

    const uploadBtn = document.querySelector(".upload")
    uploadBtn.onclick = async function() {
      // 表單
      const fileEl = document.querySelector(".file")
      const file = fileEl.files[0]

      const formData = new FormData()
      formData.append("avatar", file)

      // 發(fā)送fetch請求
      const response = await fetch("http://123.207.32.32:1888/02_param/upload", {
        method: "post",
        body: formData
      })
      const res = await response.json()
      console.log("res:", res)
    }

  </script>

</body>
</html>

posted on 2022-07-09 22:33 沖啊！閱讀(202) 評論(0) 收藏舉報

刷新頁面返回頂部

724 http：前后端分離，服務(wù)器端渲染，請求方式，響應(yīng)狀態(tài)碼，ajax，F(xiàn)etch，文件上傳

前后端分離的優(yōu)勢

網(wǎng)頁的渲染過程 – 服務(wù)器端渲染

網(wǎng)頁的渲染過程 – 前后端分離

HTTP的組成

HTTP的版本

HTTP的請求方式

HTTP Request Header（一）

HTTP Request Header（二）

HTTP Response響應(yīng)狀態(tài)碼

HTTP Request Header

Chrome安裝插件 - FeHelper

AJAX發(fā)送請求

XMLHttpRequest的state（狀態(tài)）

XMLHttpRequest其他事件監(jiān)聽

響應(yīng)數(shù)據(jù)和響應(yīng)類型

HTTP響應(yīng)的狀態(tài)statu

GET/POST請求傳遞參數(shù)

ajax網(wǎng)絡(luò)請求封裝

延遲時間timeout和取消請求

認(rèn)識Fetch和Fetch API

Fetch數(shù)據(jù)的響應(yīng)（Response）

Fetch網(wǎng)絡(luò)請求的演練

Fetch POST請求

XMLHttpRequest文件上傳

Fetch文件上傳

02_XHR-XHR請求的基本使用.html

03_XHR-XHR狀態(tài)變化的監(jiān)聽.html

04_XHR-XHR發(fā)送同步的請求.html

05_XHR-XHR其他事件的監(jiān)聽.html

06_XHR-XHR響應(yīng)數(shù)據(jù)和類型.html

07_XHR-獲取HTTP的狀態(tài)碼.html

08_XHR-GET-POST請求傳參.html

09_XHR-Ajax網(wǎng)絡(luò)請求封裝.html

10_XHR-Ajax網(wǎng)絡(luò)請求工具.html

11_XHR-超時時間-取消請求.html

12_Fetch-Fetch函數(shù)基本使用.html

13_XHR-文件上傳的接口演練.html

14_Fetch-文件上傳的接口演練.html

導(dǎo)航

公告

724 http：前后端分離，服務(wù)器端渲染，請求方式，響應(yīng)狀態(tài)碼，ajax，F(xiàn)etch，文件上傳