ตอนนี้ อะไร ๆ ๆ ก็คงต้อง AJAX (Asynchronous JavaScript and XML) นิยามที่ wikipedia
แต่เวลา่ใช้งานจริงมักเกิดปัญหา เล็ก ๆ น้อย ๆ น่ารำคาญมาก เพราะสาเหตุดังนี้
- เป็น javascript ดู debug ยาก และยังเป็นติดต่อแบบเบื้องหลัง อีก แก้ปัญหาได้ใน Mozilla โดยใช้ Fire Bug
ข
- ปัญหา cross platform ระหว่าง IE และ Mozilla เนื่องด้วยมันทำงานไม่เหมือกัน ทำให้เกิดหลากหลายเป็น นับตั้งแต่การสร้าง XHTMLRequest ซึ่งใน IE นั้นใช้เป็น ActiveX แล้วอีกทั้งการตอบการทำงานที่แตกต่างกัน การแก้ไขและรายละเอียดจะกล่าวข้างล่าง
- อีกหัวข้อหลักแบบ โง่ ๆ ของ IE คือกระบวนการสร้าง XhtmlRequest นั้นต้องอยู่ Head tag ตั้งแต่หัวของไฟล์ ซึ่ง Mozilla อยู่ไหนมันก็ตอบสนองทั้งสิ้น
1. ไฟล์ xmlhttp.js ให้ include ไว้สะตั้งแต่ head ไปเลย
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert('There was a problem creating the XMLHttpRequest object');
}
return req;
}
2. สร้าง XMLHTMLRequest เมื่อต้องการใช้งานและกำหนดค่าต่างๆ
ข้อสังเกต
- http.overrideMimeType(“text/xml”); นั้นเป็นการกำหนดว่าข้อมูลที่ตอบรับกลับมานั้นเป็นรูปแบบใด แต่ใน IE นั้นไม่สนับสนุน XML จึงไม่ควรกำหนด แต่ต้องดำเนินการขั้นตอน ต่อไปหากต้องการรับข้อมูลแบบ XML
- strsub นั้นเป็นตัวแปลว่างเปล่า เพราะใน IE ไม่ให้ส่งแบบ http.send(null)
- บางครั้ง IE ไม่ยอมให้ใช้ http.onreadystatechange = PointReq; แต่ให้ใช้ http.onload แทนแต่ Mozilla นั้นยอมรับทั้งสองอย่าง
// Make the XMLHttpRequest object
var http = createRequestObject();
var prog = "check.php";
var status_location = '';
var strsub ='';
function sendRequest() {
var t1 = encodeURI(document.getElementById("address").value);
// Open PHP script for requests
http.onreadystatechange = PointReq;
http.open('post',prog+"?address="+t1 ,true);
// http.overrideMimeType("text/xml");
http.send(strsub);
}
3.ตรวจรับผลของการเรียกใช้งาน
ข้อสังเกต
-จะเห็นว่า xmldoc นั้นมีการใช้รับค่าจาก Response ของ XMLHTMLRequest ที่แตกต่างกัน ตามที่ได้บอกไปแล้วว่าใน IE นั้นไม่ support .responseXML จึงต้องทำการสร้าง XMLDOC ขึ้นมาแล้วนำค่าใส่เข้าไปจาก .responseText แทน
-ใน IE นั้นควาย มากหากจะใช้ตัวแปลชื่อ status จงอย่าใช้ เพราะมันทำให้ผมติดเงก อยู่ 2 วัน
function PointReq(){
if(http.readyState == 4 && http.status == 200 ){
if (document.implementation && document.implementation.createDocument){
xmldoc = http.responseXML;
//In case to be the internet explorer
} else if (window.ActiveXObject){
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.loadXML(http.responseText);
}
root_node = xmldoc.getElementsByTagName("Result")[0];
results = root_node.getAttribute("search");
if(results == "Succeeded"){
......
}
else if (results =='Nomatch'){
......
}
}
}
ข้อมูลเพิ่มเติม อ้างอิงได้หลายที่ จากที่นี่ผมก้อเอามาครับ Blog
