iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
自我挑戰組

海邊囝仔帶阿公阿嬤一起學 Ruby On Rails 系列 第 16

Day-16 : AJAX勾系蝦米?

不知不覺來到第16天,
今天我們要來討論AJAX,
暫時先跳來這邊,
來講講我經過這一個月專案,
吸收到所謂的AJAX~

但在這之前,不免俗說一下,
如果你曾看過我的文章,應該可以感受到我是個熱情的人(有嗎?
我學程式的宗旨是『讓自己快樂的學程式,每天一小點一小步,我還是能抵達終點的!
那種不正經,快快樂樂的模式,是讓自己沈浸在學習熱忱裡的輔助!獻給正準備或者已經是麻瓜反覆挫折的你』

其實說真的!當初聽到這個,還想說? yo!好像饒舌念法聽起來很厲害 (又離題了

AJAX即「Asynchronous JavaScript and XML」(非同步的JavaScript與XML技術),
簡單來說,網頁不需要重新整理,就可以即時透過瀏覽去跟伺服器做溝通,並且去資料庫撈出資料!
伺服器對 AJAX 資料請求回應常以三種資料格式(HTML、XML、JSON)其中一個做回覆,

舉個例子:
Javascript 做搭配就是 JSON!(不是那個傑生XDDDD

AJAX非同步請求

瀏覽器跟伺服器互相傳遞資料,接著畫面要更新時,會透過DOM來完成畫面呈現。
通過 XMLHttpRequest 生成的請求可以有兩種方式來獲取資料,非同步模式或同步模式。

非同步:可以同時進行多個任務,不需要等待上一個動作完成後才做,
當下就能讓程式碼繼續往下跑,等到請求資料完成才會執行 callback 函式(回呼函式)。
回呼函示是什麼?詳情請見

https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function

白話一點說法!!
在執行請求的同時,瀏覽器可以正常執行其他事務的處理,不會被干擾,影響效能問題。

同步:必須等到請求全完成才會繼續往下執行程式碼。

JavaScript的Ajax

透過標準物件 XMLHttpRequest() 來完成初始化,
主要提供 GETPOST 方法來取得或送出資料!

奉上,這是我近期在專案負責一項小功能,按讚,在寫之前有先試著做!

document.addEventListener("turbolinks:load", () => {
	const likeIcon = document.querySelector("#like")
	if (likeIcon) {
    likeIcon.addEventListener("click", () => {
      var id = likeIcon.dataset.id
      Rails.ajax({
        url: `/products/${id}/favorite`,
        type: "post",
        data: "",
        success: (data) => {  
          if(data.status === "added") {
            likeIcon.classList.remove("text-gray-800");
            likeIcon.classList.add("text-red-400");
          } else {
            likeIcon.classList.remove("text-red-400")
            likeIcon.classList.add("text-gray-800");
          }
        },
        error: function (err) {
          console.log(err);
        },
      });
    })
  }
})

今天分享到這邊,
往後有再看到一些更好的觀念,
會再繼續補上拉!

謝謝你的收看/images/emoticon/emoticon81.gif

參考資料:維基百科


上一篇
Day-15 : image_tag 咩啊抓用置入圖片?
下一篇
Day-17: 咩安抓部署?
系列文
海邊囝仔帶阿公阿嬤一起學 Ruby On Rails 30

尚未有邦友留言

立即登入留言