| XmlHttpRequest Object คืออะไร | ใช้ช่วยในการนำผลลัพธ์มาแสดงผลบนหน้าจอ โดยไม่จำเป็นต้อง refresh หน้าจอใหม่ทั้งหมด |
|---|---|
| XMLHttpRequest() | ใช้สร้าง XHR Object ขึ้นมาใช้งาน |
| ActiveXObject() | ใช้สร้าง XHR Object ขึ้นมาใช้งาน |
| open() | ใช้ในการติดต่อกับ web server |
| onreadystatechange | ใช้กำหนดให้ function ที่กำหนด ทำหน้าที่ตรวจสอบสถานะการทำงานของการ request |
| send() | ใช้กำหนดค่าข้อมูลที่จะส่งไปยัง page ปลายทาง |
| readyState | ใช้คืนค่าสถานะการทำงานปัจจุบันของการ request |
| status | ใช้คืนค่าสถานะกรทำงานว่าการ request ถูกต้องหรือไม่ |
| responseText | ใช้คืนค่าข้อมูลที่ response มาจาก server แบบข้อความ |
| responseXML | ใช้คืนค่าข้อมูลที่ response มาจาก server แบบ xml |
subject:XmlHttpRequest Object คืออะไร
content:XmlHttpRequest Object ( XHR Object ) คือ ออบเจ็กค์ที่ทำหน้าที่ติดต่อร้องขอข้อมูลจากฝั่ง server โดยที่ ข้อมูลร้องขอนั้นเป็นเพียงข้อมูลเล็กๆ และทางเว็บ server จะจัดหาและตอบกลับมาในรูปแบบข้อมูล xml จากนั้น จะเป็นหน้าที่ของ JavaScript ในการนำผลลัพธ์มาแสดงผลบนหน้าจอ โดยไม่จำเป็นต้อง refresh หน้าจอใหม่ทั้งหมด
method:new XMLHttpRequest ();
return type:XMLHttpRequest
content:ใช้สร้าง XHR Object ขึ้นมาใช้งาน
comment:ใช้กับ browser IE7 และ browser อื่นๆ เช่น firefox, chrome เป็นต้น
example:var xhr = new XMLHttpRequest ();
method:new ActiveXObject ( "Microsoft.XMLHTTP" );
return type:void
content:ใช้สร้าง XHR Object ขึ้นมาใช้งาน
example:var xhr = new ActiveXObject ( "Microsoft.XMLHTTP" );
comment:ใช้กับ browser IE6 และ IE เวอร์ชันที่ต่ำกว่า 6 ดังนี้ Microsoft.XMLHTTP ใช้กับ IE6 และต่ำกว่า MSXML2.XMLHTTP ใช้กับ IE6 และต่ำกว่า MSXML2.XMLHTTP.6.0 ใช้กับ IE6.0 MSXML2.XMLHTTP.5.0 ใช้กับ IE5.0 MSXML2.XMLHTTP.4.0 ใช้กับ IE4.0 MSXML2.XMLHTTP.3.0 ใช้กับ IE3.0
method:open ( method, url, asynchronous, user, pass );
return type:void
content:ใช้ในการติดต่อกับ web server
example:var xhr = new XMLHttpRequest (); xhr.open ( "GET", "localhost/test.php?param=value" );
comment:method คือกำหนดรูปแบบการ request เช่น GET, POST url คือ page ปลายทาง asynchronous คือกำหนดว่าเป็นการสื่อสารแบบต่อเนื่องหรือไม่ ( ต่อเนื่อง false, ไม่ต่อเนื่อง true )
property:onreadystatechange = function;
return type:void
content:ใช้กำหนดให้ function ที่กำหนด ทำหน้าที่ตรวจสอบสถานะการทำงานของการ request และสิ่งที่จะเกิดขึ้นหลังจากการ request ( ทั้งกรณีที่ request สำเร็จ และไม่สำเร็จ )
example:var xhr = new XMLHttpRequest (); xhr.open ( "GET", "localhost/test.php?param=value" ); xhr.onreadystatechange = responseXHR; function responseXHR() { if ( xhr.readyState == 4 ) { alert ( "request success" ); if ( xhr.status == 200 ) { alert ( "complete" ); } } }
method:send ( string );
return type:void
content:ใช้กำหนดค่าข้อมูลที่จะส่งไปยัง page ปลายทาง โดยมีรูปแบบคือ ชื่อตัวแปร=ค่าตัวแปร&ชื่อตัวแปร=ค่าตัวแปร&ชื่อ...
example:var xhr = new XMLHttpRequest (); xhr.open ( "GET", "localhost/test.php?param=value" ); xhr.onreadystatechange = responseXHR; xhr.send ( null ); function responseXHR() { if ( xhr.readyState == 4 ) { alert ( "request success" ); if ( xhr.status == 200 ) { alert ( "complete" ); } } }
comment:ถ้าเป็นการ request แบบ GET ให้ส่ง send เป็น null ถ้าเป็นการ request แบบ POST ให้ส่ง send ตามรูปแบบที่กำหนด และต้องเพิ่มคำสั่งคือ xhr.setRequestHeader ( "Content-type", application/x-www-form-urlencoded" );
property:readyState;
return type:number
content:ใช้คืนค่าสถานะการทำงานปัจจุบันของการ request
example:var xhr = new XMLHttpRequest (); xhr.open ( "POST", "localhost/test.php" ); xhr.onreadystatechange = responseXHR; xhr.setRequestHeader ( "Content-type", application/x-www-form-urlencoded" ); xhr.send ( "name=bamboo&pass=labcode" ); function responseXHR() { if ( xhr.readyState == 4 ) { alert ( "request success" ); } }
comment:ถ้าคืนค่า 0 คือยังไม่เริ่มทำงาน ( ยังไม่ได้เริ่มเรียกใช้ open() ) ถ้าคืนค่า 1 คือกำลังโอนถ่ายข้อมล ( ประมวลผลใน open() อยู่ ) ถ้าคืนค่า 2 คือโอนถ่ายข้อมูลเสร็จแล้ว ( ประมวลผลใน send() อยู่ ) ถ้าคืนค่า 3 คือกำลังทำงานอยู่ ( server กำลัง response กลับมา ) ถ้าคืนค่า 4 คือการทำงานเสร็จสมบูรณ์
property:status;
return type:number
content:ใช้คืนค่าสถานะกรทำงานว่าการ request ถูกต้องหรือไม่
example:var xhr = new XMLHttpRequest (); xhr.open ( "POST", "localhost/test.php" ); xhr.onreadystatechange = responseXHR; xhr.setRequestHeader ( "Content-type", application/x-www-form-urlencoded" ); xhr.send ( "name=bamboo&pass=labcode" ); function responseXHR() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert ( "complete" ); } } }
comment:ถ้าคืนค่า 200 คือการ request ถูกต้องสมบูรณ์ ถ้าคืนค่า 404 คือการ request ไม่ถูกต้องไม่สมบูรณ์
property:responseText;
return type:string
content:ใช้คืนค่าข้อมูลที่ response มาจาก server แบบข้อความ ซึ่งเป็นได้ทั้ง ข้อความแบบธรรมดา, แบบ html หรือแบบ xml โดย page ปลายทางจะต้อง echo ค่าออกมาเพื่อเป็นการ response ค่ากลับ
example:var xhr = new XMLHttpRequest (); xhr.open ( "POST", "localhost/test.php" ); xhr.onreadystatechange = responseXHR; xhr.setRequestHeader ( "Content-type", application/x-www-form-urlencoded" ); xhr.send ( "name=bamboo&pass=labcode" ); function responseXHR() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert ( xhr.responseText ); } } }
property:responseXML;
return type:string
content:ใช้คืนค่าข้อมูลที่ response มาจาก server แบบ xml โดย page ปลายทางจะต้อง echo ค่าออกมาเพื่อเป็นการ response ค่ากลับ
example:var xhr = new XMLHttpRequest (); xhr.open ( "GET", "localhost/test.php?param=value" ); xhr.onreadystatechange = responseXHR; xhr.send ( null ); function responseXHR() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert ( xhr.responseXML ); } } }
