พื้นฐานการใช้งาน jQuery ตอนที่ 5 AJAX

ใช้งาน AJAX
การตั้งค่าใช้งานทั่วไปที่มักใช้บ่อยสำหรับการใช้งาน $.ajax()
    data บอกว่าข้อมูลที่ส่งเป็นแบบไหนเช่น query string (key1=val1&key2=val2) หรือ JSON ({"key1":"val1","key2":"val2"})
    dataFilter(data,type) กรองข้อมูลที่ได้รับ
    dataType บอกชนิดข้อมูลที่ต้องการจากการร้องขอเช่น xml html script json jsonp text
    error(XMLHttpRequest, textStatus, errorThrow) เรียกเมื่อเกิดข้อผิพลาด
    success(data, textStatus, XMLHttpRequest) เรียกเมื่อทำสำเร็จ
    type ชนิดการร้องขอ ปกติคือ GET
    url ตำแหน่งที่ต้องการส่ง

ใช้งานพื้นฐาน
$.ajax({
    "type":"POST",
    "url":"jq.php",
    "data":"var1=var1&var2=var2",
    "success":function(data){
        $("#p1")
        .css("background","gold")
        .html(data);
    }   
});



ตั้งค่าปกติสำหรับการเรียกใช้ AJAX
$.ajaxSetup({
    "type":"POST",
    "url":"jq.php",
    "success":function(data){
        $("#p1")
        .css("background","gold")
        .html(data);
    }
});
เมื่อเรียกใช้ AJAX
$.ajax({
    "data":{
        "newval1":"value1",
        "newval2":"value2"
    }
});
ถ้าต้องการเขียนทับค่าที่ตั้งไว้แล้วเพียงเปลี่ยนค่าใหม่ใน $.ajax() เช่น
$.ajax({
    "type":"GET",
    "data":{
        "newval1":"value1",
        "newval2":"value2"
    }
});

ใช้ทางลัดใช้งาน AJAX ผ่าน $.get() และ $.post()
$.get("jq.php",function(data){
    $("#p2")
        .css("color","red")
        .html(data);
});
ถ้าต้องการส่งค่าด้วย
$.post("jq.php",{"var1":"var"},function(data){
    $("#p2")
        .css("color","red")
        .html(data);
});
จัดการโหลดข้อมูลแบบ JSON
$.getJSON("json.php",
    function(data){
    $("#p1")
    .css("background","silver")
    .html(data.abc+","+data.foo); //{"abc":12,"foo":"bar"}
    }
);
โหลด Javascrip จากภายนอก
$.getScript("script.php") //ใน script.php คือ alert("Load by getScript"); เมื่อโหลดเสร็จจะทำงานทันที

โหลดข้อมูลลงในส่วนที่เลือก ในส่วนของ HTML
$("#p2").load("jq.php",{"var1":"value1"});