簡單的介紹伺服器和Ajax的應用

qq_47407622發表於2020-10-27
伺服器

伺服器

1.什麼是伺服器

就是提供了某種服務的公共計算機，由於伺服器需要響應服務請求，並進行處理，因此一般來說伺服器應具備承擔服務並且保障服務的能力。

伺服器的構成包括處理器、硬碟、記憶體、系統匯流排等。

常見的服務有：

  1. 資料庫服務
  2. web服務
  3. 檔案服務
  4. 多媒體服務
  5. 郵件服務
  6. 等

web伺服器

1.什麼是web伺服器

對於“Web伺服器”的多種解說和解讀：

1、Web伺服器是一種被動程式，只有當網際網路上執行的、其他核算機中的閱讀器發出懇求時，Web伺服器才會呼應。

2、網際網路上的伺服器，也稱為：Web伺服器，是一臺在網際網路上具有獨立IP地址的高效能核算機，能夠向網際網路上的客戶機，包括：個人桌上型電腦電腦、膝上型電腦、平板電腦等，供給“WWW（全球資訊網）、Email（電子郵件）和FTP（檔案傳輸）”等各種網際網路服務。
　　
簡單說，web伺服器就是提供web服務的計算機

web伺服器訪問流程

  1. 瀏覽器(客戶端) 通過 請求 向伺服器傳送資料
  2. 服務端通過 響應 向瀏覽器(客戶端)響應資料

請求響應流程：
3. 使用者在瀏覽器位址列輸入我們需要訪問的網站網址（URL）
4. 瀏覽器向伺服器傳送請求(HTTP 請求)，告知伺服器要獲取的內容(請求)
5. 服務端處理瀏覽器傳送的請求，並把處理的結果返回(HTTP 響應)給瀏覽器(響應)
6. 瀏覽器將服務端返回的結果呈現到介面上

請求方式：
7. 瀏覽器位址列輸入URL，按回車
8. 點選a標籤，跳轉到另一個頁面
9. 使用JS修改URL

為什麼需要ajax

類似懶載入一樣，在不重新整理頁面的情況下向伺服器請求資料

Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。

ajax就是一套可以讓網站跟伺服器互動的一種技術，能在我們需要時，不用再重新整理網頁就能去伺服器要一些資料回來

http://www.smzdm.com 裡只要網站往下滾動，就能不用重新整理頁面跟伺服器要資料

Ajax基本使用（get/post請求）

ajax使用步驟一共就4大步：

  1. 建立xhr物件
  2. 初始化請求
  3. 傳送請求
  4. 註冊onload事件，拿到伺服器給你的結果
    //建立xhr物件
 var xhr=new XMLHttpRequest()
    //初始化請求
  xhr.open("get","http://localhost/back.php")
  //傳送請求
      xhr.send();   // () post:  傳遞資料
      //註冊onload事件
      xhr.onload=function (){
      console.log(xhr.responseText);//Request:請求，response：響應
        }

基本使用-post請求

跟get請求步驟都是一樣的，但是在初始化請求完成後（也即open方法後）要多設定一行請求頭

注意：要在傳送請求前設定請求頭

//1. 建立xhr物件
var xhr = new XMLHttpRequest();
//2. 初始化請求
xhr.open('post',伺服器地址);
//3. 設定請求頭
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//4. 傳送請求
xhr.send('提交給伺服器資料');
//5. 監聽響應的回撥函式
xhr.onload = function(){
    console.log(xhr.responseText);
}

根據介面：
https://autumnfish.cn/api/hero/info

method:get

args:name

獲得名字是亞索的資料資訊，和圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img id="ys" src="" alt="" value="">

<script>
    var xhr=new XMLHttpRequest()
    xhr.open("get","https://autumnfish.cn/api/hero/info?name=亞索")
    xhr.send();
    xhr.onload=function (){
        // console.log(xhr.responseText);  //.bg   //.icon  都為.圖片

        //JSON.parse() 方法用於將一個 JSON 字串轉換為物件
        ys.src=JSON.parse(xhr.responseText).bg


    }



</script>

</body>
</html>

相關文章