Ajax

ajax

Ajax ใน jQuery เค้าได้เตรียมฟังก์ชั่นให้เราเรียบร้อยแล้ว คือ ajax()

โดยจะมีรูปแบบตามนี้เลยครับ คือ

 $.ajax(settings); 

ซึ่งเจ้า settings นี้แหละ จะใช้เป็นรูปแบบ JSON Object เพื่อกำหนดคุณสมบัติ โดยรูปแบบก็จะเป็นแบบข้างล่างนี้เลยครับ

$.ajax({ property : value, property : value, ..... ไปเรื่อยๆเลย });

คุณสมบัติจริงๆมีใช้อยู่หลายค่า แต่เอาที่ใช้บ่อยๆ ก็ละกันนะครับ

  • url ใช้กำหนด URL ที่เราจะส่งข้อมูลไป
  • data ข้อมูลที่เราต้องการจาก server
  • dataType ประเภทข้อมูล ที่จะส่งกลับมา HTML, XML, JSON
  • error ตรวจดูว่ามี error ไหม?
  • success เรียก Callback function เมื่อติดต่อกับ server สำเร็จแล้ว
  • type ส่งข้อมูลไปที่ server แบบ GET หรือ POST

เราจะมายกตัวอย่างกันนะครับ กรณีมี files อยู่ด้วยกัน 2 file

  • file ที่ 1 ชื่อว่า index.html
  • file ที่ 2 ชื่อว่า server.html

index.html

<div id="showData"></div>

<script>
$(document).ready(function(){
     helloAjax();
});

function helloAjax(){
     $.ajax({
          url : 'server.html';
          success : function(data) {
               $('#showData').html(data);
          }
     });
}
</script>

server.html

<body>
     <h1>ทดสอบ รับส่งข้อมูลแบบ Ajax</h1>
     <p>ข้อความนี้มาจากไฟล์ชื่อ server.html นะครับ</p>
</body>

อธิบายการทำงาน

เมื่อหน้าเว็บเพจโหลดเสร็จ จะไปเรียก function ที่ชื่อว่า helloAjax()

จากนั้นที่ function helloAjax ที่ไฟล์ index.html ก็จะส่งข้อความร้องขอไปที่ไฟล์ server.html

และเมื่อร้องขอสำเร็จ ติดต่อไฟล์ server.html ได้สำเร็จ ไฟล์ที่ชื่อว่า server.html ก็ส่งข้อมูลกลับไป ซึ่งก็คือ data

จากนั้น index.html ก็ทำการเอาข้อมูลที่อยู่ใน data ยัดเข้าไปใน <div> ที่มี id ชื่อว่า showData นั่นเอง

คอร์สเรียนที่แนะนำ HTML CSS JAVASCRIPT

คอร์สเรียนที่แนะนำ PHP JAVASCRIPT MYSQL

อ่านบทความเพิ่มเติม

กดติดตามข่าวสารได้ที่เพจ Facebook

ใส่ความเห็น