A-AA+then

เรื่องของภาษาไทย (รวมถึงภาษาอื่นๆ ที่ไม่ใช่ อังกฤษ) เนี่ยเป็นเรื่องปวดหัว สำหรับผู้เริ่มต้นใช้งาน AJAX ใหม่ๆ ครับ โดยทั่วไปแล้วการทดสอบว่า AJAX ของเราจะใช้ภาษาได้ถูกต้องหรือไม่ ก็ให้ลองเรียกหน้าที่ AJAX เรียกใช้ มาแสดงผลดู(โดยไม่ผ่านการเรียกใช้จาก AJAX) ว่ามันสามารถแสดงผลได้ถูกต้องหรือไม่ ถ้ามันสามารถแสดงผลได้ถูกต้อง แสดงว่าโค้ดของเราใช้ ภาษานั้นได้แน่ๆ (อย่างน้อยก็อ่านได้ละ....)

นอกจากนี้ เรื่องของภาษาเนี่ยยังอาจมีปัญหาอันเกิดจากความแตกต่างของ Server หรือ ความแตกต่างของ Browser ได้อีกด้วยซึ่งก็ทำให้เราจำเป็นต้องทดสอบกับ Server หลายๆแห่ง หรือ Browser หลายๆตัวด้วย

<?
    header("content-type: application/x-javascript; charset=TIS-620");
?>

ขั้นตอนที่ 1 กำหนด header เพื่อกำหนดภาษา เป็นการกำหนด Header การเข้ารหัสเอกสารหน้าที่ถูก AJAX เรียกไป (PHP) ให้เป็นภาษาตามที่ต้องการครับ

จริงๆแล้วถ้าเป็นไปได้ ผมแนะนำ UTF-8 ครับ ปวดหัวน้อยกว่ากันเยอะเลย สำหรับการกำหนดเป็นภาษาอื่นๆ ให้แทนที่ TIS-620 ด้วยรหัสภาษาที่ต้องการ ครับ

req.open("POST", "login.php");//สร้าง connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); // set Header
req.send("user="+encodeURIComponent(username)+
    "&passwd="+encodeURIComponent(passwd)+
    "&action="+action);//ส่ง

ขั้นตอนที่ 2 กำหนด headerให้กับ AJAX (Javascript) ตอนส่งเพื่อบอกว่าเป็นการเข้ารหัส

<meta http-equiv="Content-Type" content="text/html; charset=TIS-620" />
ขั้นตอนที่ 3 กำหนด ภาษาให้กับหน้าหลัก ทำได้ด้วยการแทรกโค้ด meta นี้ในส่วน <head>..</head> ของหน้าเพจหลัก (HTML)

เหมือนเดิมครับ แทนที่ TIS-620 ด้วยรหัสภาษาที่ต้องการ

ขั้นตอนที่ 4 บันทึกเพจทั้งหมดตามชนิดของรหัสภาษาที่ใช้ เช่น TIS-620 ให้ Save Page เป็น Ansi หรือถ้าเป็น UTF-8 ให้ Save Page ให้เป็น UTF-8

ทั้งหมดที่กล่าวถึงเป็นเทคนิคเบื้องต้น ที่ต้องทำ เมื่อต้องการให้ AJAX แสดงผลถาษาไทยได้อย่างถูกต้องครับ ต่อไปเรามาดูเคล็ดลับเล็กๆน้อยๆ ในการทำเพื่อให้มันแสดงผลได้ตามต้องการ

req.open( "POST", "login.php" );//สร้าง connection
การกำหนดชนิดของการส่งข้อมูล ผมแนะนำให้ใช้การส่งค่าแบบ GET สำหรับการใช้งานแบบ TIS-620 และใช้ POST สำหรับการใช้งานแบบ UTF-8 ครับ โดยกำหนดตอนสร้าง connection ด้วยฟังก์ชั่น open

var query = "user="+encodeURIComponent(username)+
    "&passwd="+encodeURIComponent(passwd)+
    "&action="+action;

และควรเข้ารหัสค่าที่ส่งด้วยฟังก์ชั่น encodeURIComponent() ก่อนส่งทั้ง POST หรือ GET เพื่อป้องกันตัวอักษรบางตัวหายเช่น & +

สำหรับเพจที่เป็น UTF-8 วิธีการทั้งหมดที่กล่าวมา ก็จะทำให้เพจสามารถทำงานกับ AJAX ได้อย่างสมบูรณ์แล้วครับ (ทุกภาษา) สำหรับเพจที่เป็น TIS-620 เราอาจต้องทำการแปลงรหัสภาษา จาก UTF-8 ให้เป็น TIS-620 ด้วยฟังก์ชั่น iconv() ตอนรับค่าจาก AJAX เนื่องจาก AJAX ทำการส่งค่าด้วยรหัสภาษา UTF-8 ครับ

$username = iconv( 'UTF-8' , 'TIS-620' , $_POST[username] );
ตัวอย่างการใช้งานฟังก์ชั่น iconv()

สำหรับฟังก์ชั่นนี้บาง Server อาจใช้ไม่ได้ เนื่องจากทาง Server อาจไม่เปิดให้ใช้งานฟังก์ชั่นในกลุ่มนี้ แต่เราก็สามารถเลี่ยงมาใช้ฟังก์ชั่นที่เขียนขึ้นเองเพื่อแปลงภาษาได้ครับ

function utf8_to_tis620($string)
{
    $str = $string;
    $res = "";
    for ($i = 0; $i < strlen($str); $i++) {
      if (ord($str[$i]) == 224) {
        $unicode = ord($str[$i+2]) & 0x3F;
        $unicode |= (ord($str[$i+1]) & 0x3F) << 6;
        $unicode |= (ord($str[$i]) & 0x0F) << 12;
        $res .= chr($unicode-0x0E00+0xA0);
        $i += 2;
      } else {
        $res .= $str[$i];
      }
    }
    return $res;
}

ฟังก์ชั่น utf8_to_tis620 สำหรับแปลง UTF-8 ให้เป็น TIS-620

ตัวอย่างการใช้งาน

$username = utf8_to_tis620( $_POST[username] );
ตัวอย่าง


ตัวอย่างการใช้งาน ฟังก์ชั่น utf8_to_tis620

<html>
<title>g-O-r-a-g-o-d.com [AJAX บทที่ 11]</title>
<head>
<!--Header หน้าหลัก-->
<meta http-equiv="Content-Type" content="text/html; charset=TIS-620">
<style>
body {
  font-family: Tahoma, MS Sans Serif;
  font-size: 8pt;
}

form }
  margin: 0px;
  padding: 0px;
{
</style>

</head>
<body>
<font color=red>คลิกขวา View Source เพื่อดูซอร์สโค้ด</font>
<br /><br />
ทดสอบโดยการพิมพ์ข้อความ เป็นภาษา อังกฤษ หรือ ไทย ลงในช่องกรอกข้อความ แล้วสังเกตุ ผลลัพท์
<br />(ผลลัพท์ถูกถอดรหัสด้วย utf8_to_tis620 ครับ ให้ลองสังเกตุเทียบกับบทที่ 4)
<form name=form1 action="" onsubmit="return false">
<input type=text name=txt value="test ทดสอบ">
<button onClick="sendget(form1.txt.value)">GET</button>
<button onClick="sendpost(form1.txt.value)">POST</button>
</form>
<br />
<div id=content>แสดงผล</div>
</body>
</html>
<script language=Javascript>
function Inint_AJAX() {
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
  try { return new XMLHttpRequest(); } catch(e) {}
  alert("XMLHttpRequest not supported");
  return null;
};


function sendget(value) {
  var req = Inint_AJAX();//สร้าง Object
  req.open('GET', 'test5.php?value='+encodeURIComponent(value), true);//กำหนด สถานะการทำงานของ AJAX แบบ GET และส่งข้อมูลผ่านทาง URL
  req.onreadystatechange = function() {//เหตุการณ์เมื่อมีการตอบกลับ
    if (req.readyState==4) {
      if (req.status==200) {//ได้รับการตอบกลับเรียบร้อย
        var data=req.responseText;//ข้อความที่ได้มาจากการทำงานของ test3.php
        document.getElementById("content").innerHTML="ข้อความที่ตอบกลับจาก server โดยการส่งแบบ GET คือ "+data;//แสดงผล
      }
    }
  };
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//Header ตอนส่ง GET
  req.send(null);//ทำการส่ง
};

function sendpost(value) {
  var req = Inint_AJAX();//สร้าง Object
  req.open('POST', 'test5.php', true);//กำหนด สถานะการทำงานของ AJAX แบบ POST
  req.onreadystatechange = function() {//เหตุการณ์เมื่อมีการตอบกลับ
    if (req.readyState==4) {
      if (req.status==200) {//ได้รับการตอบกลับเรียบร้อย
        var data=req.responseText;//ข้อความที่ได้มาจากการทำงานของ test3.php
        document.getElementById("content").innerHTML="ข้อความที่ตอบกลับจาก server โดยการส่งแบบ POST คือ "+data;//แสดงผล
      }
    }
  };
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//Header ตอนส่ง POST
  req.send("value="+encodeURIComponent(value));//ทำการส่งข้อมูลผ่านคำสั่ง SEND
};
</script>

ไฟล์ test5.php ที่ถูกเรียก

<?
  //ไม่ไปเอาจาก cache
  header("Expires: Sat, 1 Jan 2005 00:00:00 GMT");
  header("Last-Modified: ".gmdate( "D, d M Y H:i:s")."GMT");
  header("Cache-Control: no-cache, must-revalidate");
  header("Pragma: no-cache");
  
  //กำหนด header ตอนรับ
  header("content-type: application/x-javascript; charset=TIS-620");
  
  $value=(isset($_POST["value])) ? $_POST["value] : $_GET["value];
  
  //แปลงจาก UTF8 ให้เป็น TIS-620
  function utf8_to_tis620($string) {
    $str = $string;
    $res = "";
    for ($i = 0; $i < strlen($str); $i++) {
      if (ord($str[$i]) == 224) {
        $unicode = ord($str[$i+2]) & 0x3F;
        $unicode = (ord($str[$i+1]) & 0x3F) << 6;
        $unicode = (ord($str[$i]) & 0x0F) << 12;
        $res .= chr($unicode-0x0E00+0xA0);
        $i += 2;
      } else {
        $res .= $str[$i];
      }
    }
    return $res;
  }

  echo utf8_to_tis620($value);//แปลงกลับข้อความเป็น TIS-620
?>

AJAX

Relate

^