ทำงานที่ต้องดึงข้อมูลจากหลายตารางพร้อมๆ กัน มีตารางโปรโมชั่น ตารางส่วนลด และตารางเก็บข้อมูลทำรายการของแต่ละ user เดิมทีจะใช้วีธี join ตารางเข้าด้วยกันแล้วส่งออกเป็น json ไฟล์เดียว วิธีนี้ไม่มีประสิทธิภาพเท่าไหร่นัก เพราะต้องดึงข้อมูลทั้งหมดใหม่ทุกครั้งทั้งๆ ที่ ตารางโปรโมชั่นและตารางส่วนลดเป็นข้อมูลเดิมทุกครั้ง
วิธีแก้คือ แบ่งข้อมูลออกเป็น json 2 ไฟล์ ในตัวอย่างนี้จะดึงข้อมูลจาก 2 แหล่ง คือ json เก็บข้อมูลเดือน และ json ที่เก็บข้อมูลวันหยุด
[code language=”php” title=”holidays.php”]
<?php
$datas = [];
$datas[1][0][‘date’] = ‘2016-01-01’;
$datas[1][0][‘name’] = ‘New Year\’s Day’;
$datas[1][1][‘date’] = ‘2016-01-09’;
$datas[1][1][‘name’] = ‘National Children\’s Day’;
$datas[1][2][‘date’] = ‘2016-01-16’;
$datas[1][2][‘name’] = ‘Teachers\’ Day’;
$datas[2][0][‘date’] = ‘2016-02-08’;
$datas[2][0][‘name’] = ‘Chinese Lunar New Year\’s Day’;
$datas[2][1][‘date’] = ‘2016-02-09’;
$datas[2][1][‘name’] = ‘second day of Chinese Lunar New Year’;
$datas[2][2][‘date’] = ‘2016-02-10’;
$datas[2][2][‘name’] = ‘Third day of Chinese Lunar New Year’;
$datas[2][3][‘date’] = ‘2016-02-14’;
$datas[2][3][‘name’] = ‘Valentine\’s Day’;
$datas[2][4][‘date’] = ‘2016-02-22’;
$datas[2][4][‘name’] = ‘Makha Bucha’;
$datas[3][0][‘date’] = ‘2016-03-20’;
$datas[3][0][‘name’] = ‘March equinox’;
$datas[4][1][‘date’] = ‘2016-04-06’;
$datas[4][1][‘name’] = ‘Chakri Day’;
$datas[4][2][‘date’] = ‘2016-04-13’;
$datas[4][2][‘name’] = ‘songkran’;
$datas[4][3][‘date’] = ‘2016-04-14’;
$datas[4][3][‘name’] = ‘songkran’;
$datas[4][4][‘date’] = ‘2016-04-15’;
$datas[4][4][‘name’] = ‘songkran’;
$datas[5][0][‘date’] = ‘2016-05-01’;
$datas[5][0][‘name’] = ‘Labor Day’;
$datas[5][1][‘date’] = ‘2016-05-02’;
$datas[5][1][‘name’] = ‘Labor Day observed’;
$datas[5][2][‘date’] = ‘2016-05-05’;
$datas[5][2][‘name’] = ‘Coronation Day’;
$datas[5][3][‘date’] = ‘2016-05-06’;
$datas[5][3][‘name’] = ‘Coronation Day’;
$datas[5][4][‘date’] = ‘2016-05-09’;
$datas[5][4][‘name’] = ‘Royal Ploughing Ceremony Day’;
$datas[5][5][‘date’] = ‘2016-05-20’;
$datas[5][5][‘name’] = ‘Visakha Bucha’;
$datas[6][0][‘date’] = ‘2016-06-20’;
$datas[6][0][‘name’] = ‘June Solstice’;
$datas[7][0][‘date’] = ‘2016-07-01’;
$datas[7][0][‘name’] = ‘Mid Year Bank Holiday’;
$datas[7][1][‘date’] = ‘2016-07-18’;
$datas[7][1][‘name’] = ‘Extra holiday’;
$datas[7][2][‘date’] = ‘2016-07-19’;
$datas[7][2][‘name’] = ‘Asalha Bucha’;
$datas[8][0][‘date’] = ‘2016-08-12’;
$datas[8][0][‘name’] = ‘The Queen\’s Birthday’;
$datas[8][1][‘date’] = ‘2016-08-12’;
$datas[8][1][‘name’] = ‘Mother\’s Day’;
$datas[9][0][‘date’] = ‘2016-09-22’;
$datas[9][0][‘name’] = ‘september equinox’;
$datas[10][0][‘date’] = ‘2016-10-23’;
$datas[10][0][‘name’] = ‘Chulalongkorn Day’;
$datas[10][1][‘date’] = ‘2016-10-24’;
$datas[10][1][‘name’] = ‘Chulalongkorn Day observed’;
$datas[12][0][‘date’] = ‘2016-12-05’;
$datas[12][0][‘name’] = ‘The King\’s Birthday’;
$datas[12][1][‘date’] = ‘2016-12-05’;
$datas[12][1][‘name’] = ‘Father\’s Day’;
$datas[12][2][‘date’] = ‘2016-12-10’;
$datas[12][2][‘name’] = ‘Constitution Day’;
$datas[12][3][‘date’] = ‘2016-12-12’;
$datas[12][3][‘name’] = ‘Constitution Day observed’;
$datas[12][4][‘date’] = ‘2016-12-21’;
$datas[12][4][‘name’] = ‘December Solstice’;
$datas[12][5][‘date’] = ‘2016-12-24’;
$datas[12][5][‘name’] = ‘Christmas Eve’;
$datas[12][6][‘date’] = ‘2016-12-25’;
$datas[12][6][‘name’] = ‘Christmas Day’;
$datas[12][7][‘date’] = ‘2016-12-31’;
$datas[12][7][‘name’] = ‘New Year\’s Eve’;
header(‘Content-type: application/json; charset=utf-8’);
echo json_encode($datas);[/code][code language=”php” title=”months.php”]
<?php
$datas = [];
$datas[1][‘name’] = ‘January’;
$datas[1][‘description’] = ‘Janus, Roman god of doors, beginnings, sunset and sunrise, had one face looking forward and one backward’;
$datas[2][‘name’] = ‘February’;
$datas[2][‘description’] = ‘On February 15 the Romans celebrated the festival of forgiveness for sins; (februare, Latin to purify)’;
$datas[3][‘name’] = ‘March’;
$datas[3][‘description’] = ‘Mars, the Roman god of war’;
$datas[4][‘name’] = ‘April’;
$datas[4][‘description’] = ‘Roman month Aprilis, perhaps derived from aperire, (Latin to open, as in opening buds and blossoms) or perhaps from Aphrodite, original Greek name of Venus’;
$datas[5][‘name’] = ‘May’;
$datas[5][‘description’] = ‘Maia, Roman goddess, mother of Mercury by Jupiter and daughter of Atlas’;
$datas[6][‘name’] = ‘June’;
$datas[6][‘description’] = ‘Juno, chief Roman goddess’;
$datas[7][‘name’] = ‘July’;
$datas[7][‘description’] = ‘Renamed for Julius Caesar in 44 BC, who was born this month; Quintilis, Latin for fifth month, was the former name (the Roman year began in March rather than January)’;
$datas[8][‘name’] = ‘August’;
$datas[8][‘description’] = ‘Formerly Sextilis (sixth month in the Roman calendar);re-named in 8 BC for Augustus Caesar’;
$datas[9][‘name’] = ‘September’;
$datas[9][‘description’] = ‘September, (septem, Latin for 7) the seventh month in the Julian or Roman calendar, established in the reign of Julius Caesar’;
$datas[10][‘name’] = ‘October’;
$datas[10][‘description’] = ‘Eighth month (octo, Latin for 8) in the Julian (Roman) calendar. The Gregorian calendar instituted by Pope Gregory XIII established January as the first month of the year’;
$datas[11][‘name’] = ‘November’;
$datas[11][‘description’] = ‘Ninth Roman month (novem, Latin for 9). Catholic countries adopted the Gregorian calendar in 1582, skipping 10 days that October, correcting for too many leap years’;
$datas[12][‘name’] = ‘December’;
$datas[12][‘description’] = ‘Julian (Roman) year\’s tenth month (decem, Latin for 10)’;
header(‘Content-type: application/json; charset=utf-8’);
echo json_encode($datas);[/code]
เราจะใช้ $.when เช็คว่าโหลด json เสร็จรึยัง จริงๆ มันสามารถเช็คไฟล์รูปแบบอื่นๆได้ด้วยเช่น html หรือ javascript จากนั้นก็นำมารวมกันอีกที เพราะว่าดึงข้อมูลโดยใช้คำสั่ง $.getJSON จะ retuen ค่าออกมาเป็น XMLHttpRequest จึงต้องอ้างถึงข้อมูลโดยใช้ index [0]
[code language=”php” title=”multipleAJAX.html”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery: Multiple AJAX and JSON Requests, One Callback</title>
<meta name="author" content="Pitt Phunsanit">
</head>
<body>
<h1>thai public holidays 2016</h1>
<div id="calendar"></div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
$(function(){
var download1 = $.getJSON(‘months.php’);
var download2 = $.getJSON(‘holidays.php’);
$.when(download1, download2).done(function (months, holidays) {
console.log(months);
console.log(holidays);
var html = ”;
$.each(months[0], function(monthKey, month)
{
html += ‘<h3>’+month.name+'</h3>’;
html += ‘<p>’+month.description+'</p>’;
if(holidays[0][monthKey] != undefined)
{
html += ‘<dl>’;
$.each(holidays[0][monthKey], function(dateKey, holiday) {
html += ‘<dt>’+holiday.date+'</dt>’;
html += ‘<dd>’+holiday.name+'</dd>’;
});
html += ‘</dl>’;
}
});
$(‘#calendar’).append(html);
});
});
</script>
</body>
</html>[/code]