AJAX Cross-Domain Request

Standard
หลังจากที่ได้ลองทำ WPS Client/Server แล้วก็ได้รับรู้ว่ามันมีจำกัด ด้าน Cross-Domain Request ซึ่งเป็นข้อจำกัดของความปลอดภัย

ก็พยายามหาข้อมูลอยู่นาน ก็เพิ่งมาเจอ ประเด็นหลักที่ รับทราบก็คือต้องทำ proxy server ในการติดต่อกับ web service อีกทีหนึ่ง




รายละเอียดจะรายงาน คืบหน้าครั้งต่อไป

http://developer.yahoo.com/javascript/howto-proxy.html

http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.html?page=last


Powered by ScribeFire.

AJAX ปลีกย่อย

Standard

ตอนนี้ อะไร ๆ ๆ ก็คงต้อง 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