Perform an asynchronous HTTP (Ajax) request.

สมัยก่อนในอดีตที่นานมาแล้ว ผมหัดเขียน  Application ใหม่ๆ ด้วยภาษาๆ หนึ่งก็ลองผิดลองถูกดู แต่พอทำไปได้สักระยะนึงผมก็เริ่มมีขอสงสัยว่า ในบางครั้งผมเพียงต้องการเปลี่ยนค่าที่ Text Box เพียง Text Box นึงภายใน Web Page ของผมโดยค่าดังกล่าวจะถูก Set มาจาก Server ทำไมถึงจะต้อง โหลด Page ใหม่ทั้งหน้าทำไมถึงไม่เปลี่ยนแปลงแค่ค่าของ สิ่งที่เราจะเปลี่ยน ซึ่งตอนนั้นก็เข้าใจว่าเราต้องทำการ Post ค่ากลับไปที่ Server ทั้งหมดและ Server ก็จะตอบกลับมาเป็น Page ใหม่ และต่อมาภาษานี้ก็ได้นำสิ่งที่ผมอยากโดยให้ Control Script Manager มาวางๆ  แล้วๆ  ใช้  Panel ครอบไว้ ผมก็วาว!!!  มันเป็นสิ่งที่ผมอยากได้มานานแ แต่ด้วยเจ้า Control ตัวผมที่ผมคิดว่ามันวิเศษมากๆ  แต่ผมก็ยังหาคำตอบไม่ได้เลยว่ามันทำงานยังไง ซึ่งผมมารู้ตอนหลังว่าเจ้า Control ตัวนี้ก็ Gen Code  JavaScript ให้เรานั่นเองแล้วผมก็เริ่มคิดต่อไปว่า แล้วถ้าเราสามารถเขียน JavaScript ที่ถูก Gen ขึ้นมาได้เองละ  เราก็จะได้ไม่ต้องอยู่ในกรอบตามที่เขาวางมาให้และสามารถ Customize ได้อย่างใจเราต้องการ และแล้วผมก็มาเจอ Ajax ซึ่งเป็นทางออกของ Dev หลายๆคนที่มีความคิดเหมือนผม <<  เล่าอดีตมาสะยาวเลยมาเข้าเรื่องกันเลยครับ สิ่งที่ผมกำลังใจนำเสนอนี้โดยส่วนตัวผมๆชอบมันมากเลยเราลองมาดูกันเลย

Ajax ย่อมาจาก Asynchronous JavaScript and XML   ซึ่งเกิดจากการทำงานร่วมกันของ  3  เทคโนโลยีหลักตามตารางด้านล่าง(jQuery หรือ JavaScript ไม่ใช่ Ajax นะครับซึ่งอย่างที่บอก Ajax คือ เทคโนโลยีที่ทำงานร่วมกันดังตารางด้านล่างครับ )

เทคโนโลยี คำอธิบาย
JavaScript JavaScript ที่มีอยู่ในทุก browser
XMLHttpRequest (XHR)  เป็นทคโนโลยีที่ทำหน้าที่ควบคุมการแลกเปลี่ยนข้อมูลระหว่างเว็บบราวเซอร์กับเว็บเซิร์ฟเวอร์โดย AJAX ใช้ JavaScript เขียนโค้ดเพื่อควบคุมการทำงานของ XMLHttpRequest object การใช้งาน XMLHttpRequest object กับเว็บบราวเซอร์แต่ละรุ่น (เรียกได้ว่านี่คือหัวใจของ Ajax เลยทีเดียว)
XML XML ย่อมาจาก Extensible Markup Language เป็นภาษาหนึ่งที่ใช้ในการแสดงผลข้อมูล ถ้าเปรียบเทียบกับภาษา HTML จะแตกต่างกันที่ HTML ถูกออกแบบมาเพื่อการแสดงผลอย่างเดียวเท่านั้น เช่นให้แสดงผลตัวเล็ก ตัวหนา ตัวเอียง เหมือนที่คุณเคยเห็นในเวบเพจทั้วไป แต่ภาษา XML นั้นถูกออกแบบมาเพื่อเก็บข้อมูล โดยทั้งข้อมูลและโครงสร้างของข้อมูลนั้นๆไว้ด้วยกัน ส่วนการแสดงผลก็จะใช้ภาษาเฉพาะซึ่งก็คือ XSL (Extensible Stylesheet Language) <<เหมือนเป็น Stylesheet  ของ XML

แต่เนื่องจาก  XMLHttpRequest  ในแต่ละ Browser ค่อนข้างที่จะแต่ต่างกันจึงมี JavaScript Framework ต่างๆ ได้สร้าง function เพื่ออำนวยความสะดวกไว้ให้ รวมไปถึง jQuery ของเราด้วย ซึ่งวันนี้ผมขอยกตัวอย่าง Ajax โดยใช้ jQuery(ในคราวหน้าผมอาจจะแสดง XMLHttpRequest   Pure ให้อีกทีครับ) เพราะ function ที่ Jquery  ให้มานั้นน่าจะครอบคุมทุกสิ่งทุกอย่างแล้ว เรามาดูการทำงานของ Ajax ตามภาพด้านล่างกัน

AjaxProcess
กระบวนการทำงานของ Ajax

ลำดับขั้นตอนการทำงาน

1 JavaScript เรียกใช้งาน Object XMLHttpRequest   พระเอกของงาน

XMLHttpRequest  สร้าง Request ไปที่ Server

3 ส่ง Request ไปที่ Server โดยใช้ Protocol http

4 Server Process Request ที่ได้รับและตอบกกลับมาในรูปแบบ XML  โดยใช้ Protocol http เช่นกัน

XMLHttpRequest  หน้าที่ในการตรวจการตอบกลับของ Server

6 ก็ใช้ความสามารถของ JavaScript เรียกใช้งาน Document Object Model (DOM)  เพื่อทำการ แสดงข้อมูลในส่วนที่ต้องการ

ดูจากการทำงานด้านบนแล้วสิ่งที่ผมชอบอย่างนึงคือ จะสังเกตุเห็นนะครับว่า Server นั้น ตอบมาในรูปแบบ XML ซึ่งถ้าหากว่าเป็นแบบนี้ภาษาที่ฝั่ง Server จะเป็น ASP.NET PHP JSP Perl Python  หรือภาษาอื่นๆ อะไรก็ได้ขอให้อยุ่ในรูปแบบ XML ที่เป็นรูปเดียวกันก็สามารถทำงานร่วมกันได้โดยดูจากภาพด้านล่างประกอบAjaxXmlโดยที่ Ajax สามารถอยู่ได้ทุกที่ไม่ว่าจะเป็น .html .php .aspx หรืออื่นๆ  แต่ในที่นี่ผมขอบยกตัวอย่างเป็น Html นะครับเรารองมาดูตัวอย่าง Application กัน

refer http://api.jquery.com/jQuery.ajax/ ไว้ใช้อ้างอิง

ตัวอย่างโปรแกรมการเรียกใช้ web service

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Jqery Ajax by JavaScriptthai.com</title>
      <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
      <script type="text/javascript">
         /** 
         * Created in 12/10/2013 by www.JavaScriptthai.com
         * Ajax 
         * Set Select control
         *
         **/ 

         function SetOption() {
         var webserviceUrl;

         webserviceUrl= 'AjaxExamService.asmx/Get'; //Get คือชื่อ method ของ Webservice

         $.ajax({
         type: 'POST',
         url:  webserviceUrl,//URL ที่ต้องการเรียกใช้งาน
         data: "",//Data ที่ต้องการ ส่งให้กับ Server Ex  ในกรณีไม่ส่งอะไรเลย "" ในกรณีที่เป็นตัวเลข  "{PRODUCT_DETAILS_BARCODE:" + PRODUCT_DETAILS_BARCODE + "}" ในกรณีที่เป็นตัวหนังสือ"{PRODUCT_DETAILS_BARCODE:'" + PRODUCT_DETAILS_BARCODE + "'}"
         contentType: 'application/json; charset=utf-8',
         dataType: 'json',
         async:true,//Default จะเป็น True ซึ่งหมายถึงให้ให้ทำงานเป็นแบบ async คือไม่ต้องรอ response จาก Server  โดยจะทำงาน function อื่นต่อในทันทีโดยไม่รอ response จาก Server  เมื่อ Server ตอบกลับมาก็ค่อยทำงาน   ยกตัวอย่างถ้าระบุเป็น False  ถ้าเรียก Function นี้ใช้งานมันจะรอจนกระทั่ง Server ตอบถึงค่อยทำ function อื่นต่อ

         success: function(msg) //ทำงานเมื่อ Server ตอบกลับมา Status เป็น Success
         {
         $('#LocSelect1').get(0).options[0] = new Option('Please Select', '0');//Option( Text,  Value) innit ค่าเริ่มต้น
         $('#LocSelect1').get(0).options.length = 1;

         //รับ XML ที่ตอบกลับจาก Server เพื่อนำค่ามาใส่ select Option
         $.each(msg.d, function(index, item) {
         //Option( Text,  Value)
             $('#LocSelect1').get(0).options[$('#LocSelect1').get(0).options.length] = new Option(item.DataText, item.DataValue);
         });//End Of success

         }
         , error: function(msg) {
         //แสดง Error จะแสดงเมื่อเกิด Error เท่านั่น
         alert(msg.responseText);
         }
         });//.ajax
         }//End OF SetCountry

          $(document).ready(function() {

              SetOption();//เรียกใช้งาน Function

          });//End of document

      </script>
   </head>
   <body>
      <select id='LocSelect1'></select>
   </body>
</html>

Web service ที่ถูกเรียก http://javascriptthai.com/AppDesign/AjaxExamService.asmx (.Net C#)

AjaxXmlResponse

หลังจาก  Run Code ได้ผลตามตัวอย่างด้านล่าง


DOWNLOAD >>Source Code

หมายเหตุ ตัวอย่างการ เรียกใช้งาน XMLHttpRequest  โดยไม่ใช้ Frame Work

ตัวอย่างการเรียกใช้ XMLHttpRequest ใน IE7 และเว็บเบราว์เซอร์อื่น

if (window.XMLHttpRequest) {
  var xmlHttp = new XMLHttpRequest () ;
}

ตัวอย่างการเรียกใช้ XMLHttpRequest ใน IE5.x และ IE6

if (window.ActiveXObject) {
  var xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP") ;
}

เพื่อความเข้ากันได้ IE7 นั้นรองรับทั้งวิธีเดิมใน IE รุ่นก่อน และวิธีใหม่[1]

ตัวอย่างการเรียกใช้ ทั้งสองวิธีรวมกันเพื่อรองรับ IE รุ่นเก่า รุ่นใหม่ และเว็บเบราว์เซอร์อื่นๆ

if (window.XMLHttpRequest) {
  var xmlHttp = new XMLHttpRequest ()
} else {
  if (window.ActiveXObject) {
    var xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP") ;
  }
}

บทความนี้ค่อนข้างยาวแต่ก็หวังว่าคงจะมีประโยชน์บ้างนะครับ

Leave a Reply