JavaScript101與人生幹話 - XMLHttpRequest

14th鐵人賽

a121515222

團隊週六 Podcast 團

2022-09-29 00:21:13

517 瀏覽

分享至

什麼是xml請求?

可以在不更新網頁的情況下交換資料，例如註冊帳號時，可以判斷帳號有沒有被註冊過。

xml請求

網路請求，事由使用者端向伺服器發出請求後，伺服器回應使用者端的要求。
如下圖

但是資料並不是一口氣傳完，可看看下圖

1.先取得Html文本的內容後，解析文本。
2.如果解析到的html文本有圖片、影片等就會陸續伺服器發出請求，伺服器回傳資料。
3.最後的JS也是一樣的步驟，解析到有JS，向伺服器發請要求，伺服器回傳JS

要怎麼寫?

先撈個資料吧


let xhr = new XMLHttpRequset();
              
xhr.open('get','取得資料的位置',true)
//格式：get (讀取資料) 、 post(傳送資料到伺服器)
//true:為非同步，送出要求之後直接跑下一行程式碼
//flase:為同步，取得資料後才會跑一行程式碼

xhr.send(null)
//為送出本地資料，但是這邊的目的是取得資料所以沒有送出資料內容為null

在chrom的console中輸入xhr//會有參數包含現在進行到哪個階段與取回什麼資料
readyState: 0 //代表已經徵測到XMLHttpRequset(),但是還沒連結。
readyState: 1 //代表已經使用open()，但是還沒送出資料
readyState: 2 //代表有使用send()
readyState: 3 //loading
readyState: 4 //已經撈到資料，數據接受到

ps.基本上用手輸入xmr是會看不到readyState: 2 與 readyState: 3 因為速度快

以下為測試範例使用ajax取得一個object並用innerHTML顯示在網頁上，與用console.log顯示第一筆資料

 <div class="box">
 </div>


let xmr = new XMLHttpRequest();
xmr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);
xmr.send(null);
console.log(xmr.responseText)
//DOM
const box = document.querySelector('.box');

box.innerHTML = xmr.responseText//這樣子寫網頁會載不到的原因是這行程式碼先跑了responseText才收到
//.onload就是等載完資料之後再執行
xmr.onload = function(){
    box.innerHTML = `我在onload裡面${xmr.responseText}`
    console.log(JSON.parse(xmr.responseText)[0])
    //將xmr.responseText解析為JSON後取出第1筆
}

Http狀態碼

簡單的來說就是伺服器回應的狀態。最常見的狀態碼是200 (確定。用戶端要求成功) 與 404 (找不到)
詳細的狀態碼請參考保哥部落格

let mxr = new XMLHttpRequest();
mxr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);
mxr.send(null)

//要在onload就是資料回傳完成後再去檢查status，不然再非同步的狀態下會直接認為status不是200 確定。 用戶端要求成功
//可以修改取得資料的網址找一個不存在的網址試試看
mxr.onload = function(){
  if(mxr.status===200){
  //狀態碼為200印出資料
  console.log(mxr.responseText)
}
else{
  console.log('沒找到資料')
}
}

post

最初的範例是用open('get')取得資料，那這次就是用post送出這邊的資料、然後會根據送出的資料取得回應
以下為簡單的post範例

 //post送出註冊資料
  
    let xmrSignup = new XMLHttpRequest();
    
    xmrSignup.open(
      "post",//以post方式送出資料
      "https://hexschool-tutorial.herokuapp.com/api/signup",//位置
      true//非同步
    );
    
    xmrSignup.setRequestHeader(//送出去資料的格式
      "Content-type",
      "application/x-www-form-urlencoded"//這個格式是from所送出資料個格式另外格式還有json 
    );
    xmrSignup.send('要送出的資料');
    //將資料送出
  }

以下範例為註冊與登入

<form  action="#">
  <div><label for="">信箱
   <input type="email" name="account" class="account">
  </label></div>
  <div><label for="">密碼
    <input type="passWord" name="password" class="password">
   </label></div>
 <div><input type="submit" value="註冊" class="sign">
<input type="submit" value="登入" class="login">
</div>
  </form>
<div class="showStatus">
</div>

//DOM
const account = document.querySelector(".account");
const password = document.querySelector(".password");
const signup = document.querySelector(".sign");
const login = document.querySelector(".login");
const showStatus = document.querySelector(".showStatus");
//全域變數
let sended = "";
let accountContent = "";
let passwordContent = "";

//取得帳號與密碼

function getInfo(e) {
  event.preventDefault();
  //判斷帳號或密碼是不是空的
  if (account.value === "" && password.value === "") {
    alert("請輸入帳號與密碼");
  } else if (account.value === "") {
    alert("請輸入帳號");
  } else if (password.value === "") {
    alert("請輸入密碼");
  } else {
    //確認密碼與帳號都有之後寫入變數
    accountContent = account.value;
    passwordContent = password.value;
    //組字串須依照接收方要求個格式 email='mail'&password='密碼'
    sended = `email=${accountContent}&password=${passwordContent}`;
  }
}
 //post送出註冊資料
  function sendUserSignUPInfo() {
    let xmrSignup = new XMLHttpRequest();
    let receiveData;
    xmrSignup.open(
      "post",
      "https://hexschool-tutorial.herokuapp.com/api/signup",
      true
    );
    //以post方式送出資料
    xmrSignup.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded"
    );
    //送出去東西的格式
    xmrSignup.send(sended);
    //將組好的字串送出
     
  xmrSignup.onload = function(){
    receiveData = JSON.parse(xmrSignup.responseText)
    showStatus.innerHTML = receiveData.message
    //將登入的資料顯示在網頁上
  }
  }
 
//post送出登入資料
function sendUserLoginInfo() {
    let xmrLogin = new XMLHttpRequest();
    let receiveData;
    xmrLogin.open(
      "post",
      "https://hexschool-tutorial.herokuapp.com/api/signin",
      true
    );
    //以post方式送出資料
    xmrLogin.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded"
    );
    //送出去東西的格式
    xmrLogin.send(sended);
    //將組好的字串送出
    
  xmrLogin.onload = function(){
    receiveData = JSON.parse(xmrLogin.responseText)
    showStatus.innerHTML = receiveData.message
    //將登入的資料顯示在網頁上
  }
  }

//功能集成
function signupAccount(){
  getInfo()
  sendUserSignUPInfo()
}
function logInAccount(){
    getInfo()
    sendUserLoginInfo()
  }

  signup.addEventListener("click", signupAccount, false);
  login.addEventListener("click", logInAccount, false);

注意關於let xmrSignup = new XMLHttpRequest();的宣告在全域變數宣告只能宣告一個XMLHttpRequest()即使名稱不一樣也會報錯，要使用兩個以上XMLHttpRequest()就把他們包在function內吧

幹話人生-不務實就不會錯的CEO

那位CEO被派外美國的那半年除了為分公司找到地點之外什麼事情也沒做，後來某位幹部出差到美國很熱心~~刷存在感~~的在兩周內就把實驗室搭建還有實驗室營運人員的招募都安排好，那為分公司CEO在實驗室成立後，做的第一件事情就是把分公司的電話號碼換成很多8表示成立分公司會發，然後再花半年籌備分公司的開幕式，籌備期間實驗室並沒有實際營運那位CEO一直說要正式開幕後才會動作，所謂的籌備開幕是就是在美國各地試吃料理，最後大撒幣從台灣運原料到美國並請了台灣廚師去美國辦桌，在分公司開幕前那位熱心的幹部因為某些事情就離開了公司。