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

qq_47407622發表於2020-10-27

伺服器

1.什麼是伺服器

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

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

常見的服務有:

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

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>

相關文章