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 น.