การรับข้อมูลจาก AJAX ที่เป็น Array

สามารถประยุกต์ใช้ในการส่งค่าตอบกลับจาก Server หลายๆค่าในครั้งเดียวได้ครับ  

เนื่องจาก AJAX (Javascript) ไม่สามารถรับข้อมูลคืนกลับมาในรูป array ได้นอกจากในรูปของข้อความ ดังนั้นในการคืนค่ากลับมายัง AJAX เราจึงต้องแปลง array ให้อยู่ในรูปข้อความก่อนโดยการ นำ array มาเชื่อมต่อกันเป็นข้อความด้วยฟังก์ชั่น implode ครับ โดยที่ในการนำมาเชื่อมต่อกัน ตัวแยก (seperater) ควรเป็นตัวอักษรที่ไม่ได้ใช้งาน เช่นจากตัวอย่างค่าของ array เป็นตัวเลข ผมจังใช้ ตัวแยก เป็น , (comma) (หากเป็นข้อความควรเลือกเอาตัวอักษรที่คาดว่าจะไม่ได้ใช้งานจริงๆ เช่น | หรืออาจเป็น ASCII เช่น chr(1)-chr(8) ก็ได้)

โค้ดในหน้าที่เรียกใช้ AJAX ครับ

<input type="button" name="test" value="Get" onclick="getarray()">
<div id="result"></div>

<script type="text/javascript">
function getarray() {
  //AJAX
  var req = Inint_AJAX();
  req.onreadystatechange = function () {
    if (req.readyState==4) {
      if (req.status==200) {
        var ret=req.responseText //รับค่ากลับมา
        datas=ret.split(',') //แยกกลับเป็น Array เหมือนเดิม
        var d="" //แสดงผล ค่า Array ที่ได้รับกลับมา
        for (n=0; n<datas.length; n++) {
          d=d+" datas["+n+"] = "+datas[n]+"<br />
"
        }
        document.getElementById("result").innerHTML=d //แสดงผล
      }
    }
  };
  //สร้าง connection
  req.open("POST", "getarray.php", true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  req.send(null); //ส่งค่า
}
</script>

โค้ดในหน้า getarray.php ที่ AJAX เรียกไป ทำการเชื่อมต่อข้อมูลในแอเรย์ด้วย comma (,) หรืออาจใช้ตัวอักษรอื่นก็ได้ที่เหมาะสม

<?
  //สมมุติให้ทำอะไรก็ได้ แล้วได้ผลลัพท์เป็น Array
  $result = array( 1 , 2 , 3 , 4 , 5 );
  
  echo implode($result, ",");
?>

ในการรับค่ากลับมาของ AJAX เมื่อ AJAX ได้รับข้อมูลกลับ ข้อมูลจะอยู่ในรูปข้อความ 1,2,3,4,5 (ตามที่กำหนดใน getarray.php) ซี่งเราจะแปลงกลับให้เป็น array ของ Javascript ด้วยฟังก์ชั่น split ครับ

datas = ret.split( ',' ) //แยกกลับเป็น Array เหมือนเดิม
โดยที่ paramrter ที่ส่งให้ฟังก์ชั่นก็คือ ตัวแยก ที่เราใช้ในหน้า getarray.php ครับ (หากเราใช้ตัวแยกเป็น ASCII chr(1)-chr(8) เราจะใช้ตัวแยกใน Javascript เป็น String.fromCharCode(1)-String.fromCharCode(8) ครับ)

ผู้เขียน Goragod

โพสต์เมื่อ 03 เม.ย. 2551 เวลา 09:39 น.

ความคิดเห็น 0

เปิดดู 10,079

ป้ายกำกับ AJAXForm

Related

^