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() 来完成初始化，
主要提供 GET 跟 POST 方法来取得或送出资料！

奉上，这是我近期在专案负责一项小功能，按赞，在写之前有先试着做！

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);
        },
      });
    })
  }
})

今天分享到这边，
往後有再看到一些更好的观念，
会再继续补上拉！

谢谢你的收看

参考资料：维基百科