กลับมาจากบ้านแล้ววว พักผ่อนกันเต็มที่

มาทำความเข้าใจในใส่ code สำคัญๆ ของ AJAX ดีกว่า เริ่มจาก

if (window.XMLHttpRequest) { // Mozilla, Safari,...
    xmlhttp = new XMLHttpRequest();
    if (xmlhttp.overrideMimeType) {
        xmlhttp.overrideMimeType('text/xml');
    }
} else if (window.ActiveXObject) { // IE
    try {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e) {}
    }
}

code ชุดนี้ เป็นตัวสร้าง HTTPRequest ไม่่ต้องไปคิดอะไรมากสำหรับ code ชุดนี้ เอาไปแปะได้เลย

xmlhttp.onreadystatechange = function(){
    // do the thing
};

code ชุดนี้ จะทำการ ทำบางอย่าง เมื่อเราโหลดข้อมูลจาก XMLHttpRequest เสร็จแล้ว

xmlhttp.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

ตรงส่วนนี้ จะทำการส่งข้อมูล ไปยัง Link ที่เราต้องการส่งไป paremeter ตัวแรก จะเป็นตัวกำหนัด request method - get post หรือ head paremeter ตัวที่สอง คือ link ที่เราจะส่งไป parameter ตัวที่สาม เป็นตัวบอกว่าจะให้ทำการ execute JavaScript ในขณะที่ยังไม่มีการส่ง response กลับมา ถ้าต้องการส่งโดย POST ให้เพิ่่มไปว่า

xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

โดย function send ต้องส่ง parameter ไปด้วย เช่น

xmlhttp.send('myVar=myValue');

ต่อไป

if (xmlhttp.readyState == 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

โดย readyStage แต่ละตัวคือ 0 (uninitialized) 1 (loading) 2 (loaded) 3 (interactive) 4 (complete)

if (http_request.status == 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}

code ชุดนี้เป็นตัว check status ถ้าเป็น 200 ถือว่า ok แต่ถ้าไม่ใช่ ตัวเลขอื่นก็จะมีความหมายต่างออกไป โดยสามารถดูได้จาก W3C site

หลังจากเสร็จสิ้นแล้ว property ที่จะทำการส่งข้อมูลที่จะใช้กลับมาคือ

xmlhttp.responseXML - สำหรับ XML 
xmlhttp.responseText - สำหรับ text

ตัวอย่างง่ายๆ

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43

<script type='text/javascript' language='javascript'>;
var http_request = false;
function makeRequest(url) {
    http_request = false;
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/xml');
            // See note below about this line
        }
    } else if (window.ActiveXObject) { // IE
        try {
          http_request = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
         try {
          http_request=new ActiveXObject('Microsoft.XMLHTTP');
         } catch (e) {}
        }
    }

    if (!http_request) {
       alert('Giving up : Cannot create an XMLHTTP instance');
        return false;
    }
    http_request.onreadystatechange = alertContents;
    http_request.open('GET', url, true);
    http_request.send(null);
}

function alertContents() {
    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            alert(http_request.responseText);
        } else {
            alert('There was a problem with the request.');
        }
    }
}
</script>;
<span style='cursor: pointer; text-decoration: underline'
    onclick="makeRequest('test.html')">
        Make a request
</span>

ชุดนี้แทรกลงไปใน head tag ถ้าเราทำการ click ที่ Make a request มันจะทำการเรียก makeRequest() โดยส่ง URL ไปตัวนึง คือจุดหมายที่เราต้องการจะโหลดข้อมูล หลังจากที่ได้รับข้อมูลเสร็จสิ้น onreadystatechange ก็จะทำงานโดยไปเรียก alertContents() ถ้ามันโหลดข้อมูลมาเสร็จ ก็จะทำการ alert response text ออกมา

โดยตัว test.html ให้ใส่ code ไปว่า

up to you

ทดลองได้ที่นี่

ถ้าเป็น XML เราจะเปลี่ยนนิดหน่อย โดยสร้างตัว test.xml ยึ้นมา โดยข้างในใส่ว่า

  1
  2
  3
  4

<?xml version='1.0' >
<root>
    I am a test.
</root>

แล้วก้อเปลี่ยน URL ของเราหน่อย โดยเปลี่ยนจาก test.html เป็น test.xml แทน

จากนั้นเปลี่ยนตรง responseText ใ้ห้เป็น

  1
  2
  3

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

ทดลองได้ที่นี่

ข้อมูลจาก http://developer.mozilla.org/en/docs/AJAX:Getting_Started

แก้ไขล่าสุด วันที่ 29 มิถุนายน 2550 เวลา 1.31 น.

เคยรำคาญการ refresh บนเว็บหรือเปล่าครับ ลองเปรียบเทียบ app บน pc ของเราดูนะ มันเปลี่ยนนั่น เปลี่ยนนี่ โดยที่ไม่ต้องมีการ refresh หน้าใหม่ อย่าง MS word เวลาพิมพ์เกิน 1 หน้ากระดาษ หน้ากระดาษใหม่ ก็ขึ้นมาให้เองโดยไม่มีการ refresh หน้านั้นๆ เดี๋ยวนี้บนเว็บก็ทำได้แล้วนะครับ ลองดูตัวอย่างง่ายใน google map ใช้ arrow key ในการควบคุมเลื่อนแผนที่ขึ้นไปขึ้นมาได้ สวยงาม ดูดี มีชาติตระกูล หรือ google sugguest พอพิมพ์อะไรบางอย่างลงไป แล้วกดขึ้นหรือลง ก็จะมี suggestion โผล่มาให้ดู

ถ้าลำพังการทำให้อะไรต่างๆ บนหน้าเว็บเราเปลี่ยนไปโดยไม่ต้อง refresh แค่ JavaScript ก็พอแล้วครับ แต่ถ้าอยากจะต่อกับฐานข้อมูลล่ะ ตามปกติเวลาที่เรา request ไปยัง server แล้ว server ก็จะส่งสิ่งที่เราร้องขอไปกลับมา มันคงจะมีการ refresh บนหน้าเว็บแน่ๆ ถึงแม้จะใช้ JavaScript ควบคุมก็ตาม แต่สิ่งที่นักพัฒนาต่างๆ บนเว็บ เรียกมันว่า AJAX นี่แหละ จะช่วยจัดการปัญกาอันนี้ได้

AJAX คืออะไร

• XHTML หรือ HTML และ CSS ทำหน้าที่แสดงผลบนเว็บ
• Document Object Model(DOM) เป็นตัวช่วยให้การ output เปลี่ยนไปได้โดยอิสระ
• XML และ XSLT เป็นตัวเก็บ data ที่เราจะเอามา output
• XMLHttpRequest เป็นตัวช่วยในการดึง content ออกมาแสดง(ในความเป็นจริงจะใช้ XML เป็นหลัก แต่มันก็ดึงอย่างอื่นได้ด้วย)
• และ JavaScript เป็นตัวเชื่อมโยงทั้งหมดในตอนต้น เข้าด้วยกัน

มาดู หลักง่ายของ web app ทั่วๆ ไปกันก่อน User ทำอะไรบางอย่างบนหน้าเว็บ แล้วฝั่ง client จะติดต่อไปยัง server ว่าจะทำนั่นทำนี่ แล้ว server ก็จะประมวลผล ยัดนู่น ดึงนี่ออกจาก database แล้วส่งค่ากลับมายัง client ตามรูปฝั่งซ้าย แต่ทางฝั่งขวาที่เป็น AJAX ก่อนที่จะมีการส่งอะไรบางอย่างไปยัง server มันจะต้องมาส่งมายัง JavaScript ก่อน แล้วจึงส่งไปยัง server อีกที แล้วตอนที่ส่งข้อมูลกลับมา ก็ต้องส่งเข้า JavaScript ก่อน ก่อนที่จะมาแสดงผลบนหน้าเว็บ

กระบวณการแบบนี้ เหมือนจะยุ่งยากสำหรับนักพัฒนาอย่างเราๆ ทีเดียว แต่ในฝั่ง user เขาไม่รู้เรื่องหรอก แต่ทำไมเราต้องทำเรื่องยุ่งยากพวกนี้ด้วยล่ะ:b1: ลองนึกดู ในขณะที่ client ส่งการร้องขอไปยัง server แล้ว user ทำอะไร?? แน่นอนละ รอสถานเดียว ทำไมเราไม่สร้างสิ่งบางอย่างให้เขาทำ หรือเห็นในขณะที่รอล่ะ มันจะดีกว่าไหม แทนที่จะให้เขานั่งรออย่างเดียว AJAX ช่วยได้ครับ

AJAX แตกต่างอย่างไร

มาเริ่มตั้งแต่การโหลดหน้าเว็บเลย ตั้งแต่เปิด session browser จะทำการโหลด AJAX engine ซึ่งสร้างด้วย JavaScript ที่ถูกรวมๆไว้ในที่ลับตาสักแห่งหนึ่ง ตัว engine นี้แหละ เป็นทั้งตัวสั่งการแสดงผลออกทางหน้าเว็บ และยังทำการติดต่อไปยัง server อีกด้วย ผลที่ตามมาคือ เราจะไปขัดจังหวะกระบวณการที่ส่งจาก client ไปยัง server ได้(Asynchronus) จะทำให้เราแทรกเหตุการณ์บางอย่างเข้าไปในขณะที่ request มันกำลังเดินทางไปยัง server เพราะฉะนั้น กระบวณการเด้งหน้า windows ขึ้นมาใหม่ หรือไอคอนนาฬิกาทราย หรือการจิ้มแล้วรอ ก็จะไม่มีอีกต่อไป เราก็ทำการแทรกสิ่งต่างๆ ที่อยากจะให้ user ดู ไปบนหน้าเว็บในขณะที่ทำการโหลดสิ รูปฝั่งบนนะครับ นี่แหละ กระบวณการจิ้มแล้วรอ ถ้าช่วง system processing ใช้เวลานาน เราก็รอนาน แต่ฝั่งล่าง ลองดูฝั่ง user activity จะทำการส่งหลายๆ อย่าง(requests) มาที่ AJAX engine ก่อน แล้วมันก็จะเช็ค ตรวจสอบ ตามเรื่องตามราวของมัน จากนั้นจึงจะส่งไปยัง server อีกต่อหนึ่ง แต่ช่วงที่ส่งไปเนี่ย ในขณะนี้ เรายังจะทำการ สั่งนั่น สั่งนี่ ผ่าน JavaScript ได้ โดยการไปเก็บ XML ที่เราเตรียมไว้แล้ว โดยการสร้างเก็บไว้ หรือเขียนสั่งไปเก็บค่าใน DB มาสร้างเป็น XML อีกที ก็ได้ พอหลายๆ อย่างที่เราส่งมาตอนแรก server ทำการจัดการเสร็จเรียบร้อยแล้ว ก็จะทำการส่งกลับมาที่ AJAX engine ก่อน มันจึงจะสั่งแสดงผลทางหน้าจออีกที เห็นมะ มันไม่ต่อเนื่องกัน ไม่ต้องมานั่งรอตอนที่รอการตอบกลับของ server

ใครกำลังใช้ AJAX อยู่

แปลและเรียบเรียงใหม่จาก adaptivepath

แก้ไขล่าสุด วันที่ 30 มิถุนายน 2550 เวลา 0.58 น.