json-server + XMLHttpRequest—數據通訊初體驗

時間 2021-01-18

標籤 html 前端 npm json 後端數組瀏覽器服務器 app ide 欄目 JavaScript 简体版

原文原文鏈接

準備工做

工具：html

VS Code
Postman

初始化：先建立一個文件page前端

一、json-server

1.1json-server介紹

一個在前端本地運行，能夠存儲json數據的server:能夠模擬請求以及請求回來的過程npm

1.2使用

一、在page目錄下使用npm init -y初始化項目此時在page目錄下會生成json

二、繼續使用npm i json-server安裝 json-server此時page目錄變成：後端

三、在page文件下新建立一個db.json文件，用來存放咱們須要的數據再將db.json裏面的數據改爲你本身的：數組

{  "users": [
    {      "name": "jinda1",      "id": 1},
    {      "name": "jinda2",      "id": 2},
    {      "name": "jinda3",      "id": 3}
  ]
}複製代碼

那麼咱們須要思考的就是，如何啓動json-server,去徹底模擬請求以及請求回來的過程瀏覽器

① 來到packet.json裏面：修改掉"scripts"的值：做用是建立一條命令行，去啓動db.json 成後臺數據源服務器

 "scripts": {   "server:json":"json-server --watch db.json"
  }, //或者本身選擇端口
  "scripts": {   "server:json":"json-server --watch --port 1234 db.json"複製代碼

② 接着咱們運行：npm run server:json此時你已經成功啓動了json-serverapp

就當是後端已經準備就緒了，接着來看看前端如何請求咱們建立的這個後端數據ide

二、使用postman添加數據

首先要清楚的是

在網頁端瀏覽器使用http和服務器端請求進行數據讀取的方式是 GET 獲取http://localhost:3000/users 的數據它會獲得一個數組users[]
一個 POST 請求一般是經過 HTML 表單發送, 並返回服務器的修改結果

這時候咱們可使用到最前面說到的postman工具，經過http://localhost:3000/users 這個接口來進行對db.json數據的添加在body界面添加key和 value的值：send完以後就能夠回到db.json中查看數據是否添加成功：

三、XMLHttpRequest 請求數據

3.1XMLHttpRequest介紹

XMLHttpRequest（XHR）對象用於與服務器交互。經過 XMLHttpRequest 能夠在不刷新頁面的狀況下請求特定 URL，獲取數據。這容許網頁在不影響用戶操做的狀況下，更新頁面的局部內容。

3.1.1 XMLHttpRequest()構造函數

XMLHttpRequest()該構造函數用於初始化一個 XMLHttpRequest 實例對象。在這個對象上有在調用下列任何其餘方法以前，必須先調用該構造函數，或經過其餘方式，獲得一個實例對象

首先了解一下咱們待會要用的一些方法：

XMLHttpRequest.onreadystatechange

當 readyState 屬性發生變化時

XMLHttpRequest.readyState 只讀返回一個無符號短整型（unsigned short）數字，表明請求的狀態碼

有如下幾個狀態:

0：還沒有初始化對應 XMLHttpRequest.UNSENT

1：正在加載對應 XMLHttpRequest.OPENED 2：加載完畢對應 XMLHttpRequest.HEADERS_RECEIVED 3：正在處理對應 XMLHttpRequest.LOADING 4：處理完畢對應 XMLHttpRequest.DONE

XMLHttpRequest.responseText 只讀

返回一個 DOMString，該 DOMString 包含對請求的響應，若是請求未成功或還沒有發送，則返回 null。

3.2具體使用

3.2.1 get方法用於獲取數據

在page目錄下新建一個index.html文件，它的做用就是用來獲取users數據，顯示在頁面上步驟以下：

建立一個id屬性爲users的div標籤
使用document.getElementById取得這個元素賦值給oUsers，並將以後獲取的數據添加到它的內容上
經過httpRequest = new XMLHttpRequest();建立一個XMLHttpRequest()實例。
當readyState 屬性發生變化時,調用方法 httpRequest.onreadystatechange
當httpRequest.readyState == XMLHttpRequest.DONE 對應處理完畢
來到前端獲取數據

 let users = JSON.parse(httpRequest.responseText);複製代碼

將獲取的數據添加到oUsers，

oUsers.innerHTML = users.map( user =>  <li>${user.id} - ${user.name}
<li>`).join('')複製代碼

httpRequest.open("GET","http://localhost:3000/users",true); 初始化 HTTP 請求參數
httpRequest.send();發出 HTTP 請求

完整代碼：

<body>
  <div id="users"></div>
  <script>const oUsers = document.getElementById('users');let httpRequest;if(window.XMLHttpRequest) {
    </user>
      httpRequest = new XMLHttpRequest();//數據請求實例 xhr} else if(window.ActiveXObject) {
      httpRequest = new ActiveXObject('XMLHTTP');
    }
    httpRequest.onreadystatechange = function () {      if(httpRequest.readyState == XMLHttpRequest.DONE) {let users = JSON.parse(httpRequest.responseText);
        oUsers.innerHTML = users.map( user => `
        <li>${user.id} - ${user.name}<li>
        `).join('')
      }
    }
    httpRequest.open("GET","http://localhost:3000/users",true); 
    httpRequest.send();  </script></body>複製代碼

在前端http://127.0.0.1:8080/ 能夠看到請求來的數據並顯示在頁面上：

固然你也能夠在Network裏看到請求的地址就是咱們原先寫好的"http://localhost:3000/users"

3.2.2 post方法：發送數據給服務器.

在page目錄下新建add.html文件：

在上面例子上多了一個方法：XMLHttpRequest.setRequestHeader()設置 HTTP 請求頭的值。須要注意的是：必須在 open() 以後、send() 以前調用 setRequestHeader() 方法。

<body>
  <script>
  const xhr = new XMLHttpRequest();  let name = 'post';
  xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {      console.log('保存成功')
    }
  }
  xhr.open('POST', 'http://localhost:3000/users'); // 創建一個連接
  // 設置請求頭
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('name=' + encodeURIComponent(name));  </script></body>複製代碼

運行這段代碼，在db.json、http://localhost:3000/users以及http://127.0.0.1:8080/都會添加name = ‘post’

所以咱們達到了經過post方法發送數據給服務器，而且結合前邊的後端數據，咱們經過訪問db.json文件拿到了數據，並顯示在頁面上

總結

綜上，能夠看到json-server和XMLHttpRequest合做，能夠實現數據的通訊，不管是從瀏覽器（前端）經過get方式發出數據請求，仍是經過post方法將數據發送給服務器並顯示在頁面上，均可以實現。而XMLHttpRequest帶來前端主動請求數據的能力，使得前端頁面變得更加豐富，更具動態性。