# AJAX 文章跟範例

###### tags: `AJAX`


> 關鍵字
> AJAX
> AJAX XMLHttpRequest
> AJAX Fetch API
> AJAX jQuery
> AJAX axios
> ES6 Promise
___
### 什麼是 [AJAX - wiki](https://zh.wikipedia.org/wiki/AJAX)？
AJAX 是 **Asynchronous JavaScript and XML** 的縮寫，中文名稱為「非同步 JavaScript 及 XML」，這個名詞出自 《Ajax: A New Approach to Web Applications》。

原意指的是透過 JavaScript 的非同步通訊，從服務器獲取 XML 從中提取資料，再更新當前網頁的對應部分，而不用刷新整個網頁。

但後來，AJAX 這詞成為了 JavaScript 向伺服器發送 HTTP 請求的代名詞。不是指一種單一的技術，而是一種多技術的組合，其內容包含的技術有 HTML 或 XHTML、層疊樣式表、JavaScript、文件物件模型、XML、XSLT 以及最重要的 XMLHttpRequest 物件等等。當這些技術被結合在 AJAX 模型中，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。

雖然 X 在 AJAX 中代表 XML，但後來 JSON 格式是最為流行的資料格式。

### 為甚麼有 AJAX ，它提供了甚麼服務??
AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

### AJAX 與 XMLHttpRequest API
AJAX 技術在瀏覽器上，會利用 JavaScript（XMLHttpRequest 物件）與伺服器進行非同步傳遞，並將結果由 DOM 反映至頁面上。

### AJAX 與 Fetch API
傳統 AJAX 操作是使用 XMLHttpRequest（XHR）物件來實現，而 Fetch API 是近年來被提及將要取代 XMLHttpRequest 的技術新標準，是一個 HTML5 的 API，並非來自ECMAScript標準。還有它使用了**ES6 Promise**的新特性。

### AJAX 與 jQuery
外部函式庫例如jQuery很早就看到XMLHttpRequest物件中在使用的問題，使用像jQuery的函式庫來撰寫AJAX相關功能，不光是在解決不同瀏覽器中的不相容問題，或是提供簡化語法這麼簡單而已。**jQuery它擴充了原有的XHR物件為jqXHR物件，並加入類似於Promise的介面與Deferred Object(延遲物件)的設計。**

### AJAX 與 axios
使用 axios套件來處理AJAX，Axios本質上是對XHR的封裝，只不過他是Promise的實現版本，可以用在瀏覽器和node.js中，符合最新的ES規範，首先看個Code
___
### 參考連結

> 範例文章
> [由前端request 的幾種方法 - 推](https://medium.com/dot-js/%E7%94%B1%E5%89%8D%E7%AB%AFrequest-%E7%9A%84%E5%B9%BE%E7%A8%AE%E6%96%B9%E6%B3%95-fbf8a0b4023a)
> [關於AJAX與那些前端的request方法](https://medium.com/unitsexhibition/%E9%97%9C%E6%96%BCajax%E8%88%87%E9%82%A3%E4%BA%9B%E5%89%8D%E7%AB%AF%E7%9A%84request%E6%96%B9%E6%B3%95-720a7c9cd220)
> [AJAX與那些前端的request方法](https://explosionunis.netlify.app/javascript/js-ajax.html)
> [Web開發學習筆記15 — AJAX、API、JSON、Axios](https://teagan-hsu.coderbridge.io/2021/01/04/ajax-api-json-axios/)

> 教程連結
> [w3schools - ajax](https://www.w3schools.com/js/js_ajax_intro.asp)
> [w3schools - jquery - ajax](https://www.w3schools.com/jquery/jquery_ajax_intro.asp)
> [菜鸟教程 - ajax](https://www.runoob.com/ajax/ajax-tutorial.html)
> [w3school.cn - ajax](https://www.w3school.com.cn/js/js_ajax_intro.asp)
> [w3school.cn jQuery - AJAX 简介](https://www.w3school.com.cn/jquery/jquery_ajax_intro.asp)
> [MDN - Ajax](https://developer.mozilla.org/zh-TW/docs/Web/Guide/AJAX)
> [tw511 - tw511](http://www.tw511.com/19/244/9974.html)
> [简单教程 - ajax](https://www.twle.cn/l/yufei/ajax/ajax-basic-index.html)

> 技術概念
> [Jquery ajax, Axios, Fetch區別之我見 - 推](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/147000/)
> [什麼是 Ajax？ 搞懂非同步請求 (Asynchronous request)概念](https://tw.alphacamp.co/blog/ajax-asynchronous-request)

> Blog文章
> [從ES6開始的JavaScript學習生活 - AJAX與Fetch API - 推](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/ajax_fetch.html?source=post_page---------------------------)
> [竹白記事本 - AJAX](https://chupai.github.io/posts/2008/js_ajax/)
> [jQuery 教學（二）：Ajax 技術](https://summer10920.github.io/2020/04-29/jq-baseclass-2/)
> [[JavaScript] AJAX 簡介：實作篇](https://zwh.zone/javascript-ajax--e7-b0-a1-e4-bb-8b/)
> [jQuery ajax、axios、fetch 比較](https://kim85326.github.io/2019/11/01/jQuery-ajax-axios-fetch-%E6%AF%94%E8%BC%83/)
> [ajax,axios,fetch三種ajax請求的區別](https://kknews.cc/zh-tw/code/3q9j3ko.html)
> [前後端資料互動—Ajax 、Fetch 和 Axios 優缺點及比較](https://www.gushiciku.cn/pl/ghz2/zh-tw)
> [axios 基本使用 & Config](https://ithelp.ithome.com.tw/articles/10212120)

> iT邦幫忙
> [從頭開始的API 和ajax 系列](https://ithelp.ithome.com.tw/users/20102891/ironman/1955)
> [JavaScript 試煉之旅 系列 - 第24-29篇](https://ithelp.ithome.com.tw/users/20120099/ironman/2593?page=1)
> [網頁學習日誌 系列- 第15-17篇](https://ithelp.ithome.com.tw/users/20107321/ironman/1390?page=2)
> [花三十天找到 JavaScript 沙漠中的綠洲系列 - 第24-25篇](https://ithelp.ithome.com.tw/users/20129635/ironman/3195)
> [request的方式？ ajax & fetch & axios](https://ithelp.ithome.com.tw/articles/10244631)
> [axios基本語法與練習(GET、POST請求) - 推](https://ithelp.ithome.com.tw/articles/10253259)
> [Fetch API - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch#%E4%BD%BF%E7%94%A8_fetch_%E7%99%BC%E9%80%81%E8%AB%8B%E6%B1%82_request)
> [使用Http request - Fetch Api](https://ithelp.ithome.com.tw/articles/10221020)

> 相關文章
> [AJAX 筆記](https://medium.com/%E9%A6%AC%E6%A0%BC%E8%95%BE%E7%89%B9%E7%9A%84%E5%86%92%E9%9A%AA%E8%80%85%E6%97%A5%E8%AA%8C/js-ajax-%E7%AD%86%E8%A8%98-b9a57976fa60)
> [ Ruby on Rails 實戰聖經 - Ajax 應用程式](https://ihower.tw/rails/fullstack/ajax.html)
> [AJAX - 筆記 - 推](http://test.domojyun.net/MEMO/JavaScript/10_ajax.html)
> [AJAX JavaScript 與 jQuery 教學範例 for PHP - 推](https://www.footmark.info/programming-language/php/ajax-javascript-jquery-example-php/)
> [Ajax 範例 1](https://code101.app/docs/js/ajax/js-ajax-ajaxEx1)
> [超簡單 Ajax 範例](http://blog.tonycube.com/2009/03/ajax.html)
> [測試 jQuery 的 Ajax 函數 ajax()](http://yhhuang1966.blogspot.com/2019/12/jquery-ajax-ajax.html)
> [axios - finally](https://cloud.tencent.com/developer/article/1668175)
> [JavaScript Fetch API 使用教學](https://www.oxxostudio.tw/articles/201908/js-fetch.html)

> 免費測試用API
> [reqres](https://reqres.in/)
> [reqres - postman](https://documenter.getpostman.com/view/6961294/S1TVXyAS)
>
> Reqres API 相關文章
> [使用 URLSession 串接 REST API，練習 http get，post，delete，put，以 Reqres API 為例](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E4%BD%BF%E7%94%A8-urlsession-%E4%B8%B2%E6%8E%A5-http-get-post-delete-put-api-%E4%BB%A5-reqres-api-%E7%82%BA%E4%BE%8B-f977ec876c33)
___

### 範例
#### XMLHttpRequest

//https://medium.com/dot-js/%E7%94%B1%E5%89%8D%E7%AB%AFrequest-%E7%9A%84%E5%B9%BE%E7%A8%AE%E6%96%B9%E6%B3%95-fbf8a0b4023a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="result"></p>
    <script>
        const result = document.querySelector('.result');
        function reqOnload () {
            //responseText JSON格式的字串
            const data = JSON.parse(this.responseText);
            //data JS物件
            console.log(data);
            var email =data.results[0].email;
            result.textContent=email;
        }
        function reqError (err) {
            console.log('錯誤', err)
        }
        // 宣告一個 XHR 的物件
        var xhr = new XMLHttpRequest(); 
        // 定義連線方式
        xhr.open('get', 'https://randomuser.me/api/', true);
        // 送出請求
        xhr.send();
        // 如果成功就執行 reqOnload()
        xhr.onload = reqOnload; 
        // 失敗就 reqError()
        xhr.onerror = reqError;
    </script>
</body>
</html>

//使用 reqres api 做練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="result"></p>
    <script>
        const result = document.querySelector('.result');
        
        // 宣告一個 XHR 的物件
        var xhr = new XMLHttpRequest(); 
        // 定義連線方式
        xhr.open('get', 'https://reqres.in/api/users/2', true);
        // 送出請求
        xhr.send();
        // 如果成功就執行 reqOnload()
        xhr.onload = function () {
            //responseText JSON格式的字串
            const data = JSON.parse(this.responseText);
            //data JS物件
            console.log(data);
            var email =data.data.email;
            result.textContent=email;
        }
        // 失敗就 reqError()
        xhr.onerror = function (err) {
            console.log('錯誤', err)
        }

    </script>
</body>
</html

#### jQuery

非同步HTTP請求

$.ajax({
    type: 'POST',                     //GET or POST
    url: "jquery-ajax",               //請求的頁面
    cache: false,                     //防止抓到快取的回應
    data: {todo:"ajaxexample1"},      //要傳送到頁面的參數
    success: functionSucceed,         //當請求成功後此事件會被呼叫
    error: functionFailed,            //當請求失敗後此事件會被呼叫
    statusCode: {                     //狀態碼處理
      404: function() {
        alert("page not found");
      }
    }
});

//https://medium.com/dot-js/%E7%94%B1%E5%89%8D%E7%AB%AFrequest-%E7%9A%84%E5%B9%BE%E7%A8%AE%E6%96%B9%E6%B3%95-fbf8a0b4023a
//https://ithelp.ithome.com.tw/articles/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span class="result"></span>

    <!-- jquery cdn-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        var result = $(".result");

        $.ajax({
        // 請求資料的網址
        url: 'https://randomuser.me/api/',
        // 請求資料的方式(Ex:POST / GET / PUT...等)
        methods:'get',
        // 請求資料的類型(Ex:xml, json, script, or html...等)
        dataType: 'json',
        // 當成功接收到資料時，success 會執行並顯示結果。
        success: function(response) {
            console.log(response);
            result.html(response.results[0].email)
        },
        // 當接收資料失敗時，error 會執行並顯示結果。
        error: function (thrownError) {
            console.log(thrownError);
        }
        });
    </script>
</body>
</html>

//使用 reqres api 做練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span class="result"></span>

    <!-- jquery cdn-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        var result = $(".result");

        $.ajax({
        url: 'https://reqres.in/api/users/2',
        dataType: 'json',
        success: function(data) {
            console.log(data);
            result.html(data.data.email)
        }
        });
    </script>
</body>
</html>

#### Axios

//https://medium.com/dot-js/%E7%94%B1%E5%89%8D%E7%AB%AFrequest-%E7%9A%84%E5%B9%BE%E7%A8%AE%E6%96%B9%E6%B3%95-fbf8a0b4023a
//https://ithelp.ithome.com.tw/articles/10253259

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span class="result"></span>

    <!-- jquery cdn-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
    // find elements
    const result = document.querySelector('.result');

    //寫法1
    // axios.get('https://randomuser.me/api/')
    //     .then(function (response) {
    //         console.log(response);
    //         let data = response.data;
    //         result.textContent = data.results[0].email;
    //     })
    //     .catch(function (error) {
    //         // handle error
    //         console.log(error);
    //     })
    //     .finally(function () {
    //         // always executed
    //         console.log('I always Execued');
    //     });
    
    //寫法2 
    axios({
            method: "get",
            url: "https://randomuser.me/api/",
        })
        .then(function (response) {
            console.log(response);
            let data = response.data;
            result.textContent = data.results[0].email;
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
        .finally(function () {
            // always executed
            console.log('I always Execued');
        }); 
    </script>
</body>
</html>

//使用 reqres api 做練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span class="result"></span>

    <!-- jquery cdn-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
    // find elements
    const result = document.querySelector('.result');

    axios.get('https://reqres.in/api/users/2')
        .then(function (response) {
            console.log(response);
            let data = response.data;
            result.textContent = data.data.email;
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
        .finally(function () {
            // always executed
            console.log('I always Execued');
        });
    </script>
</body>
</html>

#### Fetch

//https://medium.com/dot-js/%E7%94%B1%E5%89%8D%E7%AB%AFrequest-%E7%9A%84%E5%B9%BE%E7%A8%AE%E6%96%B9%E6%B3%95-fbf8a0b4
//https://www.oxxostudio.tw/articles/201908/js-fetch.html
//https://ithelp.ithome.com.tw/articles/10252941

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span class="result"></span>

    <script>
    const result = document.querySelector('.result');

    fetch('https://randomuser.me/api/', {})
    .then((response) => {
        console.log(response);
        return response.json(); 
    }).then((data) => {
        // data 接收 response.json() 
        var email =data.results[0].email;
        result.textContent = email;
    }).catch((err) => {
        console.log('錯誤:', err);
    });
    </script>
</body>
</html>

//使用 reqres api 做練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span class="result"></span>

    <script>
    const result = document.querySelector('.result');

    //method 預設為 get
    fetch('https://reqres.in/api/users/2', {method: 'get',})
    .then((response) => {
        console.log(response);

        //把資料轉成JSON格式
        return response.json(); 
    }).then((data) => {
        // data 接收 response.json() 
        console.log(data);
        var email =data.data.email;
        result.textContent = email;
    }).catch((err) => {
        console.log('錯誤:', err);
    });
    </script>
</body>
</html>