หลังจากประสบความสำเร็จ กับ 2 keywords หลัก jQuery และ codeigniter ในผลการค้นหาจาก Google ในหน้าภาษาไทย โดยได้อันดับที่ 1 และ 6 ตามลำดับ ตอนนี้จะขอมาเล่น keyword ต่อไป คือคำว่า "AJAX" ซึ่งตอนนี้ยังไม่มีตำแหน่งใดๆ เลย ฮ่าๆๆ

แต่ด้วยจำนวนคู่แข่งที่มีเพียง 375,000 เท่านั้นเอง เลยคิดว่า ไม่น่าจะยากเย็นอะไร โดยเป้าหมายไม่ได้หวัง ถึงอันดับ 1 ขอแค่หน้าแรกได้ก็ดีใจละ ดังนั้นเอาเป็นว่า บทความในวันนี้จะขอ พูดเรื่อง ajax เลยละกัน

หลายๆ คนที่ใช้ ajax ใน jQuery ก็คงจะรู้แล้วว่ามันง่ายแสนง่ายเพียง ไหน ไม่ต้องมาเสียเวลาเขียนโคด 30-40 บรรทัด เพียงแค่บรรทัดเดียวก็ วิ่งฉิว สบายใจเฉิบแล้ว

วันนี้ผมก็จะมาลองปรับแต่ง เพื่อ optimize การเขียนโคดอีกสักนิดนึงให้ performance โดยรวมของเว็บไซด์ ดีขึ้น เอาเป็นว่าวันนี้จะพูดถึงการใช้งาน ajax แล้วพักไว้ใน ตัวแปร เพื่อใช้งานต่อ ไปใน กรณีที่ ต้นทาง ไม่ได้มีข้อมูลที่เปลี่ยนไปตลอด ซึ่ง เทคนิค นี้ไม่ได้มีอะไรที่วุ่นวาย แล้วก็ไม่ได้ยากเย็นอะไร เพียงแต่ว่า บางคน อาจจะยังไม่รู้เท่านั้นเอง .ึ่งการ load data แบบนี้ พวก ไอ้หรั่งเรียกว่า "Loads data synchronously" ซึ่งมันตรงข้ามกับ asynchronously

บางคนอาจจะเคยเขียน jQuery Ajax ประมาณนี้

<script type="text/javascript">
 var xmlRs = null;
  $.ajax({
   url: ’some.xml’,
   success: function(rs) {
    xmlRs = rs
   }
 });
 alert( xmlRs );
</script>

แล้วสงสัยว่า ทำไง var xmlRs ใช้ไม่ได้ทั้งๆ ที่ประกาศเป็นตัวแปร Global เรียบร้อยแล้ว

งานนี้ปัญหามีนิดเดียวเองครับ ก็คือ asynchronously มัน เป็น true อยู่ ที่ถูกต้องจะต้องเขียนแบบนี้ครับ

<script type="text/javascript">
 var xmlRs = $.ajax({
  async: false,
  url: ’some.xml’
 }).responseText;
 alert( xmlRs );
</script>

และถ้าจะเอา var ที่ได้มา Find ต่อ เช่นหา node ของ xml ต้องแก้จาก responseText เป็น responseXML นะครับ ไม่งั้นมันจะมีปัญหากับ IE ตัวยุ่ง

เท่านี้ก็เป็นอันหมดปัญหา สบายๆ ลองกันดูนะครับ ^^