JS-網站互動設計程式進化之道-Ajax&JSON

發表於

Ajax & JSON

JavaScript&JQuery-網站互動設計程式進化之道-Ajax&JSON

學習筆記(7)

一個人失敗的原因，在於本身性格的缺點，與環境無關 - 毛佛魯

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

八、Ajax & JSON

Loading JSON with Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var xhr = new XMLHttpRequest();

xhr.onload = function() {                       // When readystate changes
    if(xhr.status === 200) {                      // If server status was ok
        responseObject = JSON.parse(xhr.responseText); //字串轉物件(反序列化)

        // BUILD UP STRING WITH NEW CONTENT (could also use DOM manipulation)
        var newContent = '';
        for (var i = 0; i < responseObject.events.length; i++) { // Loop through object
        newContent += '<div class="event">';
        newContent += '<img src="' + responseObject.events\[i\].map + '" ';
        newContent += 'alt="' + responseObject.events\[i\].location + '" />';
        newContent += '<p><b>' + responseObject.events\[i\].location + '</b><br>';
        newContent += responseObject.events\[i\].date + '</p>';
        newContent += '</div>';
        }

        // Update the page with the new content
        document.getElementById('content').innerHTML = newContent;

    }
};

xhr.open('GET', 'data/data.json', true); // Prepare the request (方式,路徑,非同步)
xhr.send(null);                          // Send the request

Using JSONP

1
2
3
<!-- data-jsonp.js用函式處理,不須將JSON解析-->
<script src="js/data-jsonp.js"></script>
<script src="http://htmlandcssbook.com/js/jsonp.js?callback=showEvents"></script>

AJAX & jQuery 資料傳遞方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 資料請求
.load()            // 載入HTML內容
jQuery.get()       // GET請求資料
jQuery.getJSON()   // 請求JSON資料
jQuery.getScript() // 請求JavaScript資料
jQuery.post()      // POST發送資料
jQuery.ajax()      // 執行任何請求

// .load()
$('nav a').on('click', function(e) {
    e.preventDefault();
    var url = this.href;
    $('nav a.current').removeClass('current');
    $(this).addClass('current');

    $('#container').remove();
    // 載入新的內容 .load(URL位址 , 指定載入區塊)
    $('#content').load(url + ' #container').hide().fadeIn('slow');
});

get & post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// $.get()
$('#selector a').on('click', function(e) {
    e.preventDefault();
    var queryString = 'vote=' + $(e.target).attr('id');
    // $.get(請求頁面, 傳送資料, 回傳函式, 接收資料類型)
    $.get('votes.php', queryString, function(data) {
        $('#selector').html(data);
    });
});

// $.post()
$('#register').on('submit', function(e) {
    e.preventDefault();
    var details = $('#register').serialize(); // Serialize 表單資料序列化蒐集
    // $.post(傳送頁面, 傳送資料, 回傳函式, 接收資料類型)
    $.post('register.php', details, function(data) {
        $('#register').html(data);
    });
});

getJSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// $.getJSON
$('#exchangerates').append('<div id="rates"></div><div id="reload"></div>');

function loadRates() {
    //$.getJSON(傳送頁面, 處理方式, 回傳函式)
    $.getJSON('data/rates.json')
    .done( function(data){                                 //.done 請求成功
        var d = new Date();                                  // Create date object
        var hrs = d.getHours();                              // Get hours
        var mins = d.getMinutes();                           // Get mins
        var msg = '<h2>Exchange Rates</h2>';                 // Start message
        $.each(data, function(key, val) {                    // Add each rate
        msg += '<div class="' + key + '">' + key + ': ' + val + '</div>';
        });
        msg += '<br>Last update: ' + hrs + ':' + mins + '<br>'; // Show update time
        $('#rates').html(msg);                               // Add rates to page
    }).fail( function() {                                  // .fail 請求失敗
        $('#rates').text('Sorry, we cannot load rates.');   // Show error message 
    }).always( function() {                                // .always 請求完成必定執行
        var reload = '<a id="refresh" href="#">';           // Add refresh link
        reload += '<img src="img/refresh.png" alt="refresh" /></a>';
        $('#reload').html(reload);                          // 加入重新整理鏈結
        $('#refresh').on('click', function(e) {             // Add click handler
        e.preventDefault();                               // Stop link
        loadRates();                                      // Call loadRates()
        });
    }); 
}

loadRates();                                             // Call loadRates()

ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//$.ajax()
$.ajax({
    type: "GET",                                            // GET or POST
    url: url,                                               // 接收請求檔案路徑
    timeout: 2000,                                          // 等待回應時間
    beforeSend: function() {                                // 發送Ajax之前
        $content.append('<div id="load">Loading</div>');      // Load message
        },
        complete: function() {                                  // 請求完成時
        $('#load').remove();                                  // Clear message
        },
        success: function(data) {                               // Ajax請求成功時
        $content.html( $(data).find('#container') ).hide().fadeIn(400);
        },
        error: function() {                                     // Ajax請求失敗時
        $content.html('<div id="container">Please try again soon.</div>');
        }
    });