JavaScript XMLHttpRequest Object : สอน method และ property ของ XMLHttpRequest Object, เรียน method และ property ของ XMLHttpRequest Object
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • 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 ขึ้นมาใช้งาน

    example :
    var xhr = new XMLHttpRequest ();
    

    comment :
    ใช้กับ browser IE7 และ browser อื่นๆ เช่น firefox, chrome เป็นต้น

  • 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 );
              }
         }
    }

 
Share This Chapter Login with Facebook