API: Ajax ＆ jQuery

# API: Ajax ＆ jQuery [REST-Client API檢測工具](https://www.gss.com.tw/blog/%E4%BD%BF%E7%94%A8-rest-client-%E4%BE%86%E6%B8%AC%E8%A9%A6-api-vs-code%E6%93%B4%E5%85%85%E5%A5%97%E4%BB%B6) ## RESTful API Representational State Transfer是一種軟體架構風格，主要用於製作Web API。REST API是一種透過HTTP協定來存取網路資源的API，並遵循REST架構風格。 REST API通常使用HTTP要求方法（如GET、POST、PUT、DELETE）與URI（或稱網址）來操作資源。它通常回應JSON或XML格式的資料，以表示資源的狀態。 REST API的優點包括：簡單易用、支援跨網路的資源存取、與多種程式語言相容、可扩展性高等。因此，REST API已經被廣泛應用於Web應用程式、移動應用程式、IoT等多種不同的領域。 ## Ajax Asynchronous JavaScript and XML是一種網頁開發技術，它可以讓開發人員在不重新載入整個頁面的情況下，更新部分頁面內容。它通過利用 JavaScript 和 XML 在背景下向伺服器發送請求並獲取資料，並在客戶端頁面加以更新，以實現快速非同步的網頁互動。Ajax 的主要特點是可以更新特定區域，而不是整個頁面，這可以使網站更快，更順暢。 #### 原生JS: ``` var xhr = new XMLHttpRequest(); xhr.open("GET", "https://[HOST_NAME]/api/[API_VERSION]/products/women", true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 处理数据 } }; xhr.send(); ``` #### fetch API: ``` fetch("https://[HOST_NAME]/api/[API_VERSION]/products/women") .then(response => response.json()) .then(data => { // 处理数据 }) .catch(error => { console.error(error); }); ``` #### jQuery: ``` $.ajax({ url: 'URL', type: 'REQUEST_METHOD', dataType: 'RESPONSE_DATA_TYPE', data: 'REQUEST_DATA', success: function(response) { // 成功的回應代碼 }, error: function(error) { // 錯誤的回應代碼 } }); ``` * `url`：要請求的API的URL。 * `type`：要發送的HTTP請求的類型，如GET、POST、PUT、DELETE等。 * `dataType`(可選): JSON,XML,HTML,Text * `data`(可選): 要發送的請求數據。 * `success`(可選): 成功獲得回應時要執行的函數。 * `error`(可選): 發生錯誤時要執行的函數。 #### `$.ajax` vs `fetch API` * 語法： fetch API 的語法簡潔易懂，比較符合 JavaScript 語法，並且不需要使用其他第三方庫。而 $.ajax 是 jQuery 的語法，需要引用 jQuery 庫才能使用。 * 回應格式： fetch API 回傳的是一個 Promise，它需要進一步解析成 JSON 或其他格式。而 $.ajax 可以直接進行回應資料的解析。 * 功能： fetch API 只支援 GET 和 POST 方法，如果需要其他方法，需要進一步封裝。而 $.ajax 支援大多數的 HTTP 請求方法，例如 PUT、DELETE、HEAD 等。對於簡單的AJAX請求，jQuery的操作可以比較方便和簡潔。jQuery封裝了一些常用的AJAX請求的方法，比如`$.ajax()`, `$.get()`, `$.post()`等。但是，如果您需要對Ajax的運作方式進行更多的控制，那麼使用原生的JavaScript API可能更好,例如： 1. 瀏覽器兼容性：如果您需要在較舊的瀏覽器中運行您的應用程序，則可以使用XMLHttpRequest，因為它在許多瀏覽器中得到了實現。 2. 自定義錯誤處理：如果您需要進行更細節的錯誤處理，可以使用XMLHttpRequest，因為它提供了錯誤處理的許多方法，如onerror和ontimeout。 3. 取消需求：如果您需要在過程中取消需求，可以使用XMLHttpRequest，因為它提供了abort方法。 4. 預載指定資源：如果您需要在頁面加載完成之前預先加載某些資源，可以使用XMLHttpRequest，因為它提供了更多的控制選項 5. 瀏覽器支援Service Worker的情況下，可以使用fetch API與Service Worker配合實現離線請求，支援異步請求和更高的控制細節。而jQuery的$.ajax()不支援這種功能 ## jQuery syntax和方法 * `$('#content')`:`document.querySelectorAll()`方法的一個簡寫 * 顯示和隱藏 HTML 元素 ``` $('.element').show(); // 讓元素的 display CSS 屬性變為預設的值，如果元素的 display 屬性預設為 none，則它會變為 block。 $('.element').hide(); // 讓元素的 display CSS 屬性變為 none，隱藏該元素。 ``` * `.scroll()`：绑定或触发元素的 scroll 事件，在滚动元素时可以触发指定的函数。 * `$(window).scrollTop()`：取得網頁目前滾動到的頂端距離； * `$(window).height()`：取得網頁可視區域的高度； * `$(document).height()`：取得整個文件的高度； * `.off()`：移除元素上绑定的事件处理程序。 * 在元素的最後面添加內容 ``` $("#someId").append("<p>This is a new paragraph</p>"); ``` ## API 一般來說，若 API 資料是 JSON 格式，回傳的也會是 JSON 格式。在 $.ajax() 中，可以透過 dataType 參數指定回傳資料的格式(會幫忙轉換)。 #### JSON JavaScript Object Notation是一種輕量級的資料交換格式，主要用於網頁前端與後端交互數據。它使用文本格式存儲資料，數據結構用鍵值對表示，類似 JavaScript Object，但與 JavaScript Object不同的是，JSON 可以被解析為多種語言中的Object。因此，它在網路上遠程資料交換方面非常流行，常被作為 Web API 的回傳格式。 #### XML Extensible Markup Language是一種用於存儲和傳輸資料的標準格式。它是 HTML 的一個超集，它可以存儲除 HTML 标签外的更多类型的数据，例如音频、视频、图像等。XML 文档的格式是用户定义的，这意味着不同的 XML 文档可以有不同的格式。由于 XML 可以很好地整合到许多计算机语言和平台中，因此它已成为许多网络应用程序的常用格式 #### JSON vs XML XML和JSON是兩种不同的資料交換格式，在選擇使用XML或JSON時，需要考慮以下因素： * 可讀性：XML是易讀的，因為它具有很好的結構，可以清晰地表示資料。相反，JSON是以鍵值形式組織的，可能不如XML易讀。 * 網路傳輸時間：JSON通常比XML更快，因為它的大小更小。 * 支援與擴展性：如果你的應用程式需要其他的支援，如查詢，排序和分頁，則XML可能更適合。但是，如果需要在支援多種程式語言的同時交換資料，則JSON可能是更好的選擇。 #### 傳遞參數給API的不同方式 1. 在 URL 中加入參數將參數附加到URL末尾，作為查詢字符串（?page= + page）。這種方法將參數作為網址的一部分傳遞。 ``` $.ajax({ url: https://my-api.com/products?page=' + page, ... ``` 2. 通過「data」選項將資訊以「鍵值對」的形式傳遞它將鍵值對作為Content-Type: application/x-www-form-urlencoded格式的資料附加到請求正文中。 ``` $.ajax({ url: 'https://my-api.com/products', data: { page: page, }, ... ``` * 比較: 如果你的參數是簡單的，則查詢字符串可能是更簡單的選擇。如果你需要傳遞大量的複雜參數，則鍵值對可能是最佳選擇，因為它允許將複雜的參數封裝在一個對象中。且因為參數不會出現在 URL 上，不會對網址長度造成影響，並且在傳遞複雜的參數時更方便管理。 ## 用ajax更改url #### window.history 是 JavaScript 中一个表示浏览器历史记录的object。通过它，可以访问浏览器中所有已访问页面的 URL，并可以对它们进行操作。history object提供了一些方法，如 `back()` 和 `forward()`，用于在历史记录中向前或向后浏览。 * pushState() 方法：将一个新的状态推入历史记录栈。这个方法接受三个参数：一个状态对象（可以为空），一个页面标题（目前被忽略），以及将要显示的 URL。执行此操作后，URL 将发生更改，但浏览器不会加载该页面。 * replaceState() 方法：与 pushState() 类似，但不会在历史记录栈中创建一个新的状态。而是用新状态替换当前状态。这个方法接受三个参数：一个状态对象，一个页面标题（目前被忽略），以及将要显示的 URL。执行此操作后，URL 将发生更改，但浏览器不会加载该页面。用來更改浏览器的 URL，而不会导致浏览器重新加载页面。这使得我们能够实现无需页面刷新的内容更新、历史记录管理、单页面应用程序等功能。