ทำงานที่ต้องดึงข้อมูลจากหลายตารางพร้อม ๆ กัน มีตารางโปรโมชั่น ตารางส่วนลด และตารางเก็บข้อมูลทำรายการของแต่ละ user เดิมทีจะใช้วีธี join ตารางเข้าด้วยกันแล้วส่งออกเป็น json ไฟล์เดียว วิธีนี้ไม่มีประสิทธิภาพเท่าไหร่นัก เพราะต้องดึงข้อมูลทั้งหมดใหม่ทุกครั้งทั้ง ๆ ที่ ตารางโปรโมชั่นและตารางส่วนลดเป็นข้อมูลเดิมทุกครั้ง
วิธีแก้คือ แบ่งข้อมูลออกเป็น json 2 ไฟล์ ในตัวอย่างนี้จะดึงข้อมูลจาก 2 แหล่ง คือ json เก็บข้อมูลเดือน และ json ที่เก็บข้อมูลวันหยุด
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) ;
เราจะใช้ $.when เช็คว่าโหลด json เสร็จรึยัง จริง ๆ มันสามารถเช็คไฟล์รูปแบบอื่น ๆ ได้ด้วย เช่น html หรือ javascript จากนั้นก็นำมารวมกันอีกที เพราะว่าดึงข้อมูลโดยใช้คำสั่ง $.getJSON จะ retuen ค่าออกมาเป็น XMLHttpRequest จึงต้องอ้างถึงข้อมูลโดยใช้ index[0]
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>