ได้กลับมาอับเดต blog อีกครั้งครับ เงียบเชียว blog นี้วันนี้จะมาพูดถึงการนำ Ajax มาใช้งานกับ php แบบฉบับพื้นฐาน
เดี่ยวนี้มี tools ในการเขียน Ajax มากขึ้นจนเรามองไม่เห็นว่า code จริงๆของ ajax เป็นอย่างไรมีบาง tools ชนิดที่ไม่ต้องเขียนjavascript หรือ xml ก็สามารถสร้าง ajax มาใช้งานได้เพราะถูกสร้างเป็น wrapper หรือ framework ครอบคลุมในส่วนของการทำงานของภายในทั้งหมดที่เป็นการทำงานผสมผสานกันระหว่าง javascript และ xml
เริ่มต้นด้วยการสร้าง file ในฝั่ง client ชื่อ client_request.html จะสร้าง function เพื่อทำการสร้างตัว XMLHttpRequestทำการส่งข้อมูลไปยัง serverในที่นี้จะทำการGETไปยังFileบนServerที่ชื่อserver_response.php

function xmlRequest(url){
var 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('Not create xmlhttp request :P .');
return false;
}
http_request.onreadystatechange = function() {
loadData(http_request);
};
http_request.open('GET', url, true);
http_request.send(null);
}//end function

ส่วนต่อไปเป็นfilephpที่ทำงานบนserverจะทำการสร้างxmlจากarrayตรงนี้สามารถประยุกค์ใช้งานซึ่งอาจจะดึงมาจากฐานข้อมูลก็ได้ นำข้อมูลทั้งหมดที่ได้มาสร้างXml Streamเพื่อส่งตอบกลับไปยังClientซึ่ง file client_request.htmlจะมีfunctionการตอบรับ

<? function getXML(){
$arr=Array("England","Thailand","Italy","Brazil");
$xmlStr="<?xml version=\"1.0\" ?>\";
$xmlStr.="<root>";
foreach($arr as $node){
$xmlStr.="<country>".$node."</country>";
}
$xmlStr.="</root>";
return $xmlStr;
}
echo getXML();
?>

http_request.onreadystatechange = function() {
loadData(http_request);
};

Function loadData จะทำงานก็ต่อเมื่อมีการตรวจสอบสถานะว่ามีการตอบรับเกิดขึ้นซึ่งจะมีการกำหนดสถานะดังต่อไปนี้
1: loading
2 : loaded
3 : Interactive
4 : Done
ภายในfunction loadDataจะมีการตรวจสอบสถานะถ้าสถานะเท่ากับ4ก็คือserver ทำการส่งข้อมูลมายัง client เรียบร้อยแล้ว จึงสามารถนำข้อมูลที่ได้รับจาก server นำออกไปแสดง
ดังcode ด้านล่าง

function loadData(http_request){
/* handle changed http request state
1 : loading
2 : loaded
3 : Interactive
4 : Done
*/
if(http_request.readyState == 1){
content.innerHTML="Loading..";
}
if (http_request.readyState == 4){
// 200 OK
if (http_request.status == 200){
content.innerText=http_request.responseText;
} else {
content.innerHTML="Sorry someThing wrong!";
}
}
}//end function

Html File

<input type="button" value=" xmlRequest " onClick="xmlRequest('server_response.php');" >
<div id="content" style="color:red"/>
ผลการรัน

<?xml version="1.0" ?><root><country>England</country><country>
Thailand</country>
<country>Italy</country><country>Brazil</country></root>

สุดท้ายเราสามารถประยุกต์ใช้โดยการนำเอาxml streamหรือfile xmlมาทำการparserหรือการท่อง node แต่ล่ะ nodeในxmlแล้วดึงข้อมูลออกมาใช้งานได้ ดัง function ด้านล่าง

function parseXML(obj){
if (obj.hasChildNodes()) {
document.write('<ul><li>');
if(typeof obj.tagName=='undefined'){
document.write('<b>xml : </b>');
}else{
document.write('<b>'+obj.tagName+' : </b>');
}
var nodes = obj.childNodes.length;
for(var i = 0; i < obj.childNodes.length; i++) {
parseXML(obj.childNodes(i));
}
document.write('</li></ul>');
} else {
document.write(obj.text);
}
}

testxml.xml

<?xml version="1.0" ?>
<root>
<country>England</country>
<country>Thailand</country>
<country>Italy</country>
<country>Brazil</country>
</root>

เรียกใช้
นำคำสั่ง

if(http_request.responseXML){
parseXML(http_request.responseXML);
}

ไปแทนที่
content.innerText=http_request.responseText;
ในfunction loadData
และในhtml code
<input type="button" value=" xmlRequest " onClick="xmlRequest('testxml.xml');" >
ผลการรัน

xml : version="1.0"

• root :
  • country : England
  • country : Thailand
  • country : Italy
  • country : Brazil

entryในวันนี้มีคนเข้ามาถามใน msnครับ เห็นว่ามีประโยชน์ก็เลยนำมาเขียนเก็บไว้ในวันนี้ ยินดีครับที่จะแบ่งปันความรู้กัน เพราะมีหลายเรื่องที่ตัวเองยากจะรู้แต่ไม่รู้จะถามใครดี