ตัวอย่างการสร้างและเรียกใช้ 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