ตัวอย่างการสร้างและเรียกใช้ API ด้วยคชสาร ตอนที่ 2

บทที่ 2 จะเป็นโค้ดตัวอย่างในการรับค่าจาก API ด้วยคชสาร (สามารถรับค่าด้วยวิธีใดๆก็ได้ เนื่องจากเป็นการรับค่าด้วยวิธี GET ธรรมดา) ซึ่ง API จะคืนค่าผลลัพท์เป็น JSON กลับมา

วิธีแรก รับค่าโดยการเรียกผ่าน URL ตรงๆพร้อมการส่งค่าพารามิเตอร์ที่ต้องการด้วยวิธี GET ธรรมดา ที่ URL https://www.kotchasan.com/projects/api/api.php?method=getTime&id=0123456789

วิธีที่สอง รับค่าโดยใช้คลาส Curl ของคชสารตามตัวอย่าง

// เวลาปัจจุบัน
$mktime = time();
// init Curl
$ch = new \Kotchasan\Curl;
// call API get.php
$json = $ch->get(WEB_URL.'api.php', array('method' => 'getTime', 'id' => $mktime));
// JSON to Array
$array = json_decode($json, true);

ผลลัพท์อยู่ที่ $array รูปแบบแอเรย์ สามารถ print_r() ออกมาดูผลลัพท์ได้

วิธีที่สามเป็นการเรียกโดย ใช้ Ajax โค้ดส่วนแรกจะเป็น HTML ที่เกี่ยวข้องในการรับและส่งค่าด้วย Ajax ซึ่ง {MKTIME} จะถูกแทนที่ด้วยเวลาที่ได้จากตัวแปร $mktime

<!-- ฟอร์มสำหรับรับค่า เพื่อส่งไปโดย Ajax -->
<label for="demo_txt">เรียก API ด้วย Ajax</label>
<input type="text" id="demo_txt" value="{MKTIME}">
<button id="demo_send">Call API</button>
<!-- แสดงผลลัพท์ -->
<div id="demo_result"></div>

โค้ดอีกส่วนเป็น Javascript ที่ใช้ในการเรียก API

<script>
// button click
$G('demo_send').addEvent('click', function () {
    // ข้อมูลสำหรับส่งไป
    var q = 'method=getTime&id=' + $E('demo_txt').value;
    // send Ajax
    new GAjax({method: 'get'}).send('api.php', q, function (xhr) {
      // ค่าตอบกลับ แปลงเป็น JSON
      var ds = xhr.responseText.toJSON();
      if (ds) {
        if (ds.error) {
          // ถ้ามีข้อผิดพลาด
          alert(ds.error);
        } else if (ds.result) {
          // แสดงผลข้อมูลที่ส่งกลับ
          $E('demo_result').innerHTML = ds.result;
        }
      } else if (xhr.responseText != '') {
        // ข้อมูลที่ตอบกลับไม่ใช่ JSON
        alert(xhr.responseText);
      }
    });
});
</script>

คำสั่ง Javascript ตามด้านบนเป็นการใส่อีเว้นต์ onclick ให้กับปุ่ม ซึ่งเมื่อมีการกดปุ่มจะเป็นการอ่านค่าจาก input และส่งไปประมวลผลที่ API ด้วย Ajax ซึ่งเมื่อมีการรับค่ากลับมา (ที่ xhr) ก็จะถูกแปลงเป้น JSON เพื่อใช้กับ Javascript ก่อนแสดงผลต่อไป

โค้ดส่วนอื่นๆ ผมไมได้อธิบายนะครับ เนื่องจากเป็นโค้ดส่วนแสดงผลหน้าเว็บธรรมดา และตามตัวอย่างนี้มีการเรียกใช้ GAjax (js/gajax.js) ซึ่งเป็น Javascript Library ที่ออกแบบมาเพื่อใช้ร่วมกับ Kotchasan อย่างสมบูรณ์ด้วย

โค้ดตามตัวอย่างทั้งหมดอยู่ใน https://github.com/.../master/projects/api