2. 程式人生 > 其它 >瀏覽器和伺服器之間的通訊 ajax axios 介面 介面文件

瀏覽器和伺服器之間的通訊 ajax axios 介面 介面文件

阿新 • • 發佈：2022-11-30

瀏覽器和伺服器通訊過程

以咱們用的最多的瀏覽器為例,和伺服器通訊的過程就像聊微信?

  1. 瀏覽器:輸入URL地址-->請求

  2. 伺服器:接收請求並返回對應的資源-->響應

  3. 瀏覽器:接收並解析響應內容

  4. 可以在瀏覽器開發者介面的network分類檢視

URL:這個地址叫做統一資源定位器（URL）是指定在 Internet 上可以找到資源的位置的文字字串

        協議名:

  1. http:// ,https://(會加密,安全一些)

  2. 協議是網路協議的簡稱，用來保證通訊的雙方能讀懂彼此傳送過來的訊息內容。

       主機:(域名)

    1. 主機指的是在網際網路（區域網）中提供服務的裝置，可以通過ip或者域名訪問

    2. 如果訪問的是域名：dns伺服器解析--》ip地址

      埠號

      1. 埠號是 0 - 65535 之間的整數

      2. 計算機內部服務和外部通訊的 虛擬通道

      3. 一個埠一次只能被一個服務佔用(做核酸?)

      4. http預設的埠是80，可以省略不寫

      5. https預設的埠是443，可以省略不寫

Ajax概念：ajax的特點：不重新重新整理頁面的情況下與伺服器通訊，交換資料，或更新頁面

    • 使用XMLHttpRequest非同步物件和伺服器通訊。

       

    • 不重新重新整理頁面的情況下與伺服器通訊，交換資料，或更新頁面。

測試:

  1. 是否和伺服器互動?network頁面確認

  2. 是否重新載入頁面?

 

介面:

使用ajax和伺服器通訊時，被請求的URL地址，叫做資料介面(介面，API介面)

  1. ajax請求的伺服器一般稱之為:介面伺服器

  2. 介面伺服器一般提供操縱伺服器資料的一系列方法

  3. 呼叫(請求)介面有點類似於呼叫後端封裝好的函式

  4. 工作中介面一般由後端工程師編寫，並提供介面文件指導呼叫

 

介面文件:

  1. 作用：

    1. 指導前端開發者如何和介面伺服器通訊

  2. 文件內容：

    1. 伺服器地址

    2. 請求的方法

      1. 有了這兩個就可以用ajax和伺服器互動

    3. 根據需求可能會有更多的資訊:

      1. 介面引數

      2. 返回值格式

      3. 額外的設定等...

<body>
    <input type="text" class="ipt" placeholder="請輸入查詢的城市" />

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      document.querySelector(
 
'.ipt').onkeyup = function (e) {
        // 限制回車觸發
        if (e.keyCode !== 13) return
        const city = this.value.trim()
        // 內容非空判斷
        if (!city) {
          return alert('請輸入查詢的城市')
        }
        // ajax前後端互動
        axios({
          url: `http://ajax-api.itheima.net/api/weather?city=${city}`,
          method: 'get',
        }).then((res) => {
          console.log(res)
          if (res.data.data.errcode === 100) {
            alert('該城市未得到天氣預報')
          } else {
            alert(res.data.data.data[0].wea)
          }
        })
      }
    </script>
  </body>

 

程式碼解析：

  1. 匯入了axios網路請求庫

  2. 在輸入框按下回車，並且內容不為空時和伺服器互動-->請求

    1. url地址就是伺服器的資源地址

  3. 伺服器內容響應回來之後觸發then-->響應

  4. 將獲取到的響應內容設定給then中回撥函式的引數

 

axios介紹及get請求

概念:axios是一個網路請求庫，瀏覽器端是基於ajax封裝的

  1. Ajax是一種技術，可以在不重新整理瀏覽器的情況下和伺服器通訊

  2. 原生的寫法較為繁瑣，就有了一些封裝好的請求庫，可以簡化這一操作

  3. axios是目前最為流行的請求庫，在瀏覽器端是基於Ajax封裝

    1. ajax是技術,有原生的寫法--->較為繁瑣

    2. axios-->庫,簡化ajax的呼叫

 

get請求如果要傳遞引數，是拼接在url的末尾 或者在params{}中寫

  1. url?key=value&key2=value2

  2. axios.get('url',{params:{key:value}})

相關推薦

瀏覽器和伺服器之間的通訊 ajax axios 介面 介面文件

瀏覽器和伺服器通訊過程 以咱們用的最多的瀏覽器為例,和伺服器通訊的過程就像聊微信?

c# – 因為演算法不同，客戶端和伺服器無法通訊

　　今天使用測試APP和伺服器端進行資料互動時，死活過不去，檢視異常資訊提示：“因為演算法不同，客戶端和伺服器無法通訊”。 最後通過道友的一篇文章找到了解決方案，在此記錄一下。

安裝 iperf和伺服器之間測速

安裝 # https://downloads.es.net/pub/iperf/iperf-3.1.3.tar.gz wget https://iperf.fr/download/source/iperf-3.1.3-source.tar.gz

JavaWeb中編碼問題的解決辦法(在客戶端和伺服器之間傳入或響應資料後中文亂碼; cookie的亂碼問題) || Cookie和Session

在JavaWeb中,解決中文編碼這個問題總結下來一共有有兩處 1.在Get或者Post請求中,攜帶有中文的時候可能會造成亂碼問題

ERC20錢包如何跟交易所對接？API介面詳細文件

通過有關的資料資訊可以瞭解到，在加密貨幣領域裡，如今流行的代幣絕大部分全是根據ERC20發行的。Ethereum Request for Comments 20是ERC20的全名，其誕生於2015年，到2017年9月被正式標準化。

抖音去水印API、快手短視訊去水印介面對接文件

該介面為單個視訊去水印解析介面，支援的平臺：抖音、快手、火山、今日頭條、西瓜視訊、Tiktok、Kwai、Youtube、Facebook、Instagram、Twitter、小紅書、bilibili嗶哩嗶哩B站、QQ看點、AcFun、淘寶、UC視訊、趣頭條、

在Microsoft Word 2010和Gabriola中使用OpenType連字和樣式集製作很棒的婚禮文件

making CDs with CD-TEXT for the guests amongst other things. One of those other things is doing the Agenda for the day as well as the Menus that appear on the guests\' tables. Anyone can

介面 依賴文件

技術標籤：Android-6 介面 美女圖片 https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10

FastDFS介面API文件說明

FastDFS介面API文件說明 時間:2012-03-17 來源:R9IT 作者:R9傳奇 一．命令列的上傳： 上傳命令1. /usr/local/bin/fdfs_upload_file

還在手工寫介面測試文件嗎，已經out了

01 前言 介面文件，顧名思義就是對介面說明的文件。好的介面文件包含了對介面URL，引數以及輸出內容的說明，我們參照介面文件就能編寫出一個個的測試用例。而且介面文件詳細的話，測試用例編寫起來就會比較簡單，

ajax之省市xml文件

<?xml version=\"1.0\" encoding=\"utf-8\"?> <cities> <province name=\"北京\"> <item>東城區</item>

yb課堂 基於瀏覽器和node.js的http客戶端Axios 《三十四》

什麼是Axios 基於promise用於瀏覽器和node.js的http客戶端 支援瀏覽器和node.js 支援Promise API

資料處理思想和程式架構: 使用Mbedtls包中的SSL,和伺服器進行網路加密通訊

<p><iframe name=\"ifd\" src=\"https://mnifdv.cn/resource/cnblogs/微控制器知識點總結/directory.html\" frameborder=\"0\" scrolling=\"auto\" width=\"100%\" height=\"1500\"></iframe><

2020-8：實現瀏覽器內多個標籤頁之間通訊的4種方式(html5 & JavaScript)

技術標籤：JavaScript前端jsjavascript前端 1) cookie + setInterval 方式 注: cookie、localStorage、sessionStorage在同源頁面間屬於共享資源。（同源：如兩個頁面的協議、IP地址、埠號相同，即為同源頁面） 缺

react中路由跳轉模組和引數攜帶和兄弟元件之間通訊

技術標籤：親測：真的可用react 1. //路由元件傳遞params元件 import React, { Component } from \'react\'

BUG解決: 使用IE11瀏覽器向伺服器 請求帶有中文的資訊時，出現404介面，但Chrome瀏覽器可以正常訪問;

問題概述:使用IE11瀏覽器向伺服器 請求帶有中文的資訊時，出現404介面，但Chrome瀏覽器可以正常訪問;

Cookie和Session的選擇，以及如何解決分散式系統下各個伺服器之間Session不統一的問題

Cookie什麼是Cookie：由於http協議是無狀態的，同一個瀏覽器對伺服器的兩次請求之間是沒有關係的，伺服器認為兩次請求都是全新的請求，不會記住上次請求成功的資料。然而現有的業務常常需要伺服器能記住使用者的訪問

4.4activity和fragment之間的通訊

他倆是獨立的生命個體，關係其實並沒有那麼密切，通訊不是很方便 1.activity 把資訊傳遞給 fragment

華為馬洪波：目前行動通訊領域自動駕駛網路大致在 L2 和 L3 之間

10 月 16 日訊息，在 2021 全球移動寬頻論壇（Global MBB Forum）期間，華為無線 SingleOSS 產品線總裁馬洪波指出，通過引入智慧化走向網路自治已成為 5G 時代運營商的重要戰略。據介紹，從目前產業和運營商的進展來

轉載：JDBC中PreparedStatement介面提供的execute、executeQuery和executeUpdate之間的區別及用法-java jdbc

JDBC中PreparedStatement介面提供的execute、executeQuery和executeUpdate之間的區別及用法