jQuery Academy · บทเรียน

การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ

สำรวจตัวเลือกที่ครอบคลุมสำหรับ .ajax() รวมถึงชนิดข้อมูล ส่วนหัว การแคช และระยะหมดเวลา เพื่อปรับแต่งคำขอแบบอะซิงโครนัสให้เหมาะกับสถานการณ์ต่าง ๆ

การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

ปลดปล่อยพลังของ .ajax()

เมธอด $.ajax() ของ jQuery เป็นตัวเลือกหลักสำหรับส่งคำขอ HTTP ที่ควบคุมได้อย่างเต็มที่ ต่างจากเมธอดที่เรียบง่ายกว่าอย่าง $.get() หรือ $.post() ตรงที่ $.ajax() ช่วยให้คุณปรับแต่งทุกแง่มุมของคำขอได้อย่างละเอียด

บทเรียนนี้จะสำรวจตัวเลือกต่าง ๆ อย่างครอบคลุม ตั้งแต่การกำหนดชนิดข้อมูลไปจนถึงการจัดการแคชและเวลาจำกัด เพื่อสร้างแอปพลิเคชันแบบอะซิงโครนัสที่แข็งแกร่งและมีประสิทธิภาพ

โครงสร้างพื้นฐานของ .ajax()

โดยพื้นฐานแล้ว $.ajax() รับออบเจกต์ของคู่คีย์-ค่าที่แสดงตัวเลือกการกำหนดค่า คำขอที่พื้นฐานที่สุดต้องการเพียง url เท่านั้น

นี่คือตัวอย่างวิธีดึงข้อมูลจาก API

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
  console.log("Fetched data:", data.title);
});

URL และเมธอด (type)

ตัวเลือก url ระบุปลายทางสำหรับคำขอของคุณ ตัวเลือก type (หรือ method ใน jQuery รุ่นใหม่) กำหนดเมธอด HTTP เช่น GET, POST, PUT หรือ DELETE

url: URL เป้าหมายของคำขอ
type: เมธอด HTTP (เช่น "GET", "POST")

$.ajax({
  url: "/api/users",
  type: "POST"
});

การส่งข้อมูลด้วย `data`

ใช้ตัวเลือก data เพื่อส่งข้อมูลไปพร้อมกับคำขอ สำหรับคำขอ GET ข้อมูลจะถูกต่อท้าย URL เป็นพารามิเตอร์คำค้นหา ส่วนคำขอ POST จะส่งข้อมูลไว้ในเนื้อหาคำขอ

คุณสามารถส่งออบเจกต์ธรรมดาได้ แล้ว jQuery จะทำการแปลงรูปแบบให้โดยอัตโนมัติ

$.ajax({
  url: "/api/save-item",
  type: "POST",
  data: {
    id: 123,
    name: "New Gadget"
  }
});

การตอบกลับที่คาดหวัง: `dataType`

ตัวเลือก dataType จะบอก jQuery ว่าคุณคาดว่าจะได้รับข้อมูลชนิดใดกลับมาจากเซิร์ฟเวอร์ (เช่น "json", "xml", "html", "text") ซึ่งช่วยให้ jQuery แยกวิเคราะห์การตอบกลับได้อย่างถูกต้อง

หากไม่ได้ระบุไว้ jQuery จะพยายามอนุมานชนิดข้อมูลจากชนิด MIME ของการตอบกลับ

$.ajax({
  url: "/api/products",
  dataType: "json"
});

ส่วนหัวแบบกำหนดเอง: `headers`

ตัวเลือก headers ช่วยให้คุณกำหนดส่วนหัว HTTP แบบกำหนดเองสำหรับคำขอได้ ซึ่งสำคัญอย่างยิ่งสำหรับงานอย่างการยืนยันตัวตน (เช่น การส่งคีย์ API) หรือการระบุชนิดเนื้อหา

ส่งออบเจกต์ที่มีชื่อส่วนหัวเป็นคีย์และเนื้อหาของส่วนหัวเป็นค่า

$.ajax({
  url: "/api/secure-data",
  headers: {
    "Authorization": "Bearer your_token",
    "X-Requested-With": "XMLHttpRequest"
  }
});

ควบคุมการแคช: `cache`

เบราว์เซอร์มักแคชคำขอ GET เพื่อให้การโหลดครั้งถัดไปเร็วขึ้น แม้จะมีประโยชน์ แต่บางครั้งคุณก็ต้องการข้อมูลใหม่ทุกครั้ง

กำหนด cache: false เพื่อป้องกันไม่ให้เบราว์เซอร์แคชการตอบกลับ ทำให้มั่นใจได้ว่าคำขอของคุณจะดึงข้อมูลล่าสุดจากเซิร์ฟเวอร์เสมอ

$.ajax({
  url: "/api/dynamic-content",
  cache: false
});

ขีดจำกัดคำขอ: `timeout`

คำขอที่ใช้เวลานานอาจทำให้ประสบการณ์ของผู้ใช้แย่ลง ตัวเลือก timeout ช่วยให้คุณระบุเวลาสูงสุด (เป็นมิลลิวินาที) ที่คำขอจะดำเนินการให้เสร็จได้

หากคำขอไม่เสร็จภายในเวลานี้ คำขอจะถูกยกเลิก และทำให้การเรียกกลับ .fail() ทำงาน

$.ajax({
  url: "/api/slow-report",
  timeout: 8000 // 8 seconds
});

ถ่ายทอดสด: การกำหนดค่า AJAX ขั้นสูง

มาดูตัวอย่างที่ครอบคลุมซึ่งรวมตัวเลือก $.ajax() หลายรายการเข้าด้วยกัน คำขอนี้จะดึงรายการสิ่งที่ต้องทำ ระบุ JSON ที่คาดหวัง เพิ่มส่วนหัวแบบกำหนดเอง ปิดการแคช และกำหนดเวลาจำกัด

ลองเรียกใช้เพื่อดูว่าย่อหน้าผลลัพธ์จะอัปเดตอย่างไร

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Config Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h3>Check Console & Output:</h3>
  <p id="output">Fetching data...</p>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        dataType: "json",
        headers: {
          "X-App-ID": "CoddyKit-Demo"
        },
        cache: false,
        timeout: 7000 // 7 seconds
      })
      .done(function(data) {
        $("#output").html(
          "<b>Todo fetched!</b><br>ID: " + data.id + 
          "<br>Title: " + data.title
        );
        console.log("Success:", data);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $("#output").html(
          "<b>Request failed!</b><br>Status: " + textStatus + 
          "<br>Error: " + errorThrown
        );
        console.error("Error:", textStatus, errorThrown);
      })
      .always(function() {
        console.log("Request completed.");
      });
    });
  </script>
</body>
</html>

ตรวจสอบการกำหนดค่า AJAX

ลองนึกภาพว่าคุณกำลังสร้างฟีเจอร์สำหรับส่งความคิดเห็นใหม่ของผู้ใช้ไปยัง /api/comments คำขอนี้ต้องเป็นคำขอ POST ต้องมี commentText และ userId และคาดว่าจะได้รับออบเจกต์ JSON กลับมา นอกจากนี้ เพื่อให้ความคิดเห็นเป็นข้อมูลล่าสุดเสมอ คุณต้องการป้องกันไม่ให้เบราว์เซอร์แคชข้อมูล

ตัวเลือก $.ajax() รายการใดต่อไปนี้จำเป็นสำหรับสถานการณ์นี้โดยเฉพาะ

ทบทวน: เชี่ยวชาญการกำหนดค่า AJAX

คุณเชี่ยวชาญศิลปะการกำหนดค่าเมธอด $.ajax() ของ jQuery แล้ว

คุณได้เรียนรู้การระบุ url และ type ของ HTTP
เรียนรู้การส่งข้อมูลโดยใช้ตัวเลือก data
กำหนดรูปแบบการตอบกลับที่คาดหวังด้วย dataType
เพิ่ม headers ของ HTTP แบบกำหนดเองสำหรับกรณีการใช้งานขั้นสูง
ควบคุมการแคชของเบราว์เซอร์ด้วย cache
กำหนดขีดจำกัดสำหรับคำขอที่ช้าด้วย timeout

ตัวเลือกอันทรงพลังเหล่านี้ช่วยให้คุณสร้างการโต้ตอบแบบอะซิงโครนัสในแอปพลิเคชันเว็บที่ปรับแต่งได้อย่างสูงและเชื่อถือได้

คำถามที่พบบ่อย

บทเรียน “การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ”

สำรวจตัวเลือกที่ครอบคลุมสำหรับ .ajax() รวมถึงชนิดข้อมูล ส่วนหัว การแคช และระยะหมดเวลา เพื่อปรับแต่งคำขอแบบอะซิงโครนัสให้เหมาะกับสถานการณ์ต่าง ๆ คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ
การจัดการข้อผิดพลาดและความสำเร็จของ AJAX
AJAX ข้ามโดเมน (CORS/JSONP)

← กลับไปที่ jQuery Academy