Ajax(2)

Posted by PunNeng, Tue Jan 03 23:42:00 UTC 2006

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

มาทำความเข้าใจในใส่ 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 น.

Filed Under: General | Tags: ajax howto javascript xml

Comments

Have your say

A name is required. You may use HTML in your comments.




codegent: we're hiring