มาทำความเข้าใจกันว่าทำไม AJAX จึงมีอยู่ เพื่อให้คุณมีแนวคิดที่ดีขึ้นเกี่ยวกับวิธีใช้งานในโครงการ Rails ของคุณ
เมื่อคุณเยี่ยมชมเว็บไซต์ จะเกิดอะไรขึ้น
หน้าถูกโหลดจากเซิร์ฟเวอร์ แต่ถ้าคุณต้องการดูข้อมูลใหม่ คุณต้องโหลดหน้าเว็บซ้ำเพื่ออัปเดต หรือคลิกลิงก์เพื่อไปยังหน้าอื่น
นี่เป็น โฟลว์แบบซิงโครนัส .
ข้อมูลใหม่จะแสดงเมื่อมีการร้องขอหน้าใหม่จากเซิร์ฟเวอร์เท่านั้น
แต่…
จะเกิดอะไรขึ้นถ้าคุณไม่ต้องการให้หน้านี้โหลดซ้ำ
จะทำอย่างไรถ้าคุณต้องการดึงข้อมูลจากแบ็กเอนด์ ได้ทุกเมื่อที่ต้องการ เพื่อให้คุณสามารถอัปเดตส่วนใดส่วนหนึ่งของหน้าปัจจุบันได้
นี่คือที่มาของ AJAX
AJAX ย่อมาจาก Asynchronous Javascript &XML .
เป็นเทคนิคที่ไม่ขึ้นกับเฟรมเวิร์กเว็บของคุณ แต่ Rails มีการสนับสนุนที่ดีโดยเฉพาะ คุณจะได้เรียนรู้ในบทความนี้
โปรดทราบว่าการเพิ่ม AJAX ในแอปทำให้ซับซ้อนยิ่งขึ้น
คำขอ AJAX โดยตรง
AJAX มีสองส่วน คือ คำขอที่คุณสร้างจากเบราว์เซอร์โดยใช้ Javascript และการตอบสนองที่คุณจัดการจากแอป Ruby
คุณสามารถส่งคำขอ AJAX ด้วย Javascript ธรรมดา
แต่เนื่องจากต้องใช้โค้ดสำเร็จรูปจำนวนมาก เราจึงมักจะทำผ่านไลบรารี Javascript เช่น jQuery
นี่คือลักษณะของคำขอ jQuery :
$.get( "/vegetables", function(data) {
alert("Vegetables are good for you!");
});
อย่างไรก็ตาม เนื่องจาก Rails 5.1 jQuery ไม่พร้อมใช้งานโดยค่าเริ่มต้น (แต่คุณสามารถเพิ่มกลับได้)
หมายเหตุ :คุณจะได้รับ
InvalidAuthenticityTokenเกิดข้อผิดพลาดเมื่อคุณส่งคำขอ jQuery POST ซึ่งหมายความว่าคุณต้องส่งcsrf-tokenจากหน้าปัจจุบันเป็นมาตรการรักษาความปลอดภัย การใช้Rails.ajaxทำสิ่งนี้ให้คุณโดยอัตโนมัติ
มีทางแก้!
Rails มีฟังก์ชัน AJAX ของตัวเอง :
Rails.ajax({
url: "/books",
type: "get",
data: "",
success: function(data) {},
error: function(data) {}
})
โปรดจำไว้ว่า นี่ยังคงมาจากด้านคำขอของสิ่งต่างๆ จากเบราว์เซอร์
หมายความว่า นี่คือโค้ด Javascript .
ใน Rails ฟังก์ชัน AJAX นี้มีให้โดยสิ่งที่เรียกว่า “Unobtrusive JavaScript” หรือเรียกสั้นๆ ว่า “UJS”
การอัปเดตบางส่วนด้วย AJAX
หากคุณต้องการอัปเดตเพียงบางส่วนของเพจด้วยข้อมูลที่คุณได้รับจาก AJAX คุณมีสองตัวเลือกเป็นส่วนใหญ่
- คุณสามารถเขียนมุมมอง Javascript + ERB ซึ่งจะอัปเดตองค์ประกอบ
- คุณสามารถส่งคืนการตอบสนอง JSON จากคอนโทรลเลอร์ของคุณด้วย HTML ใหม่เป็นสตริง จากนั้นใช้ Javascript เพื่ออัปเดตองค์ประกอบ
นอกจากนี้ยังมีตัวเลือกที่ 3
มันเกี่ยวข้องกับการส่งคืน เฉพาะข้อมูลในรูปแบบ JSON แล้วสร้างองค์ประกอบ HTML ด้วย Javascript โดยใช้ข้อมูลนั้น
นี่คือที่มาของ JS frameworks เช่น React
ในความคิดของฉัน พวกเขาเพิ่มความซับซ้อนที่ไม่จำเป็น .
แต่เราสามารถจัดการสิ่งนี้ได้ด้วย Javascript ธรรมดา!
นั่นคือตัวเลือกที่ 1 และ 2
ตอนนี้ขอยึดติดกับสิ่งเหล่านั้นก่อน 🙂
ตัวอย่างการดู JavaScript :
Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")
jเป็นนามแฝงสำหรับescape_javascript
ตัวอย่าง jQuery :
$('.random-number').html("<%= j (render partial: 'random') %>")
ทั้ง html &innerHTML แทนที่เนื้อหาขององค์ประกอบเป้าหมาย
คุณยังสามารถผนวก (jQuery) องค์ประกอบใหม่ลงในรายการแทนการแทนที่ทั้งหมดได้
ใส่รหัสนี้ในไฟล์ที่มีนามสกุลเป็น .js.erb ด้วยชื่อของการกระทำปัจจุบัน (เช่น create.js.erb ) &ภายในโฟลเดอร์มุมมอง
บนคอนโทรลเลอร์ คุณสามารถแสดงมุมมองนี้เหมือนกับมุมมองอื่นๆ
ตอนนี้ :
เมื่อคุณโทร AJAX โค้ด Javascript นี้จะทำงานโดยอัตโนมัติและอัปเดต HTML
มาดูตัวเลือกที่ 2 กันดีกว่า
นี่คือรหัสตัวควบคุม :
render json: { html: render_to_string(partial: 'random') }
จากนั้นจากโค้ด Javascript ของคุณ :
Rails.ajax({
url: "/books",
type: "get",
success: function(data) { Rails.$(".random-number")[0].innerHTML = data.html; }
})
นั่นเป็นอีกวิธีหนึ่งในการทำเช่นนี้!
ควรใช้อะไร
วิธีแรกที่ DHH ชื่นชอบคือวิธีแรก ซึ่งเขาเรียกว่า “SJR” (จาวาสคริปต์ที่สร้างโดยเซิร์ฟเวอร์)
ฉันเดาว่านี่คือวิธีที่ Rails ต้องการให้คุณทำ แต่อย่าลังเลที่จะลองทั้งสองอย่าง (SJR &render_to_string ) ตัวคุณเองและดูว่าอันไหนที่เหมาะกับคุณที่สุด
วิธีใช้ HAML สำหรับมุมมอง JS ของคุณ
ได้เลย
สมมติว่าคุณเป็นผู้ใช้ HAML
เป็นไปได้ไหมที่จะใช้ SJR . นี้ เทคนิค &การแสดงผล .js.haml ยอดวิว?
ใช่!
นี่คือตัวอย่าง :
- content = j (render partial: "random")
Rails.$('.random-number')[0].innerHTML = ("#{content}")
มันดูน่าเกลียดกว่าเวอร์ชัน ERB เล็กน้อย แต่ใช้งานได้
วิธีการส่งแบบฟอร์ม Rails โดยไม่ต้องรีเฟรชหน้า
หากคุณต้องการส่งแบบฟอร์มโดยใช้ AJAX คุณสามารถทำได้โดยไม่ต้องเขียนคำขอ AJAX
Rails จัดการให้คุณได้
อย่างไร
ใช้ remote: true ตัวเลือกด้วย form_for .
นี่คือตัวอย่าง :
<%= form_for @fruit, remote: true do |f| %> <%= f.label :name, 'Fruit' %> <%= f.text_field :name %> <%= f.submit 'Create' %> <% end %>
ตอนนี้เมื่อคุณคลิก "สร้าง" Rails จะส่งคำขอ AJAX ให้กับคุณ &หน้าจะไม่โหลดซ้ำ
หากคุณต้องการแสดงข้อผิดพลาดในการตรวจสอบความถูกต้อง คุณจะต้องสร้างและแสดงมุมมอง Javascript (.js.erb ไฟล์) ที่แทนที่ข้อผิดพลาดปัจจุบันด้วยข้อผิดพลาดใหม่
เช่นเดียวกับตัวอย่างใน “การอัปเดตบางส่วนด้วย AJAX”
Btw remote . นี้ สามารถใช้ตัวเลือกกับลิงก์ได้ ดังนั้นคุณจึงทำ AJAX delete ขอ.
ตัวอย่าง :
<%= link_to "Delete", book_path(book), { method: "delete", remote: true, data: { confirm: "Are you sure?" } }
คุณสามารถจัดการการตอบกลับโดยใช้มุมมอง Javascript
หากคุณต้องการจัดการทั้งคำขอ HTML (มาจากการโหลดหน้าซ้ำ) &คำขอ AJAX คุณจะต้องใช้บางอย่างเช่น respond_to วิธีการ
ตัวอย่าง :
respond_to do |f|
f.html { redirect_to :index }
f.js
end
ในตัวอย่างนี้ ปล่อยให้ Turbolinks จัดการเรื่องนี้ได้ง่ายขึ้น
คุณยังสามารถทำการร้องขอ AJAX &a redirect_to จากคอนโทรลเลอร์ (ไม่มี respond_to ) จากนั้น Turbolinks จะแทนที่เนื้อหาของหน้าโดยไม่ต้องโหลดซ้ำ
AJAX ไม่ทำงาน? นี่คือเคล็ดลับบางส่วน
หากคำขอ AJAX ของคุณไม่ทำงาน แสดงว่าคุณมีการแก้ไขข้อบกพร่องที่ต้องทำ
ขั้นแรก เปิดเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ของคุณ
คุณต้องการ ดูที่แผงคอนโซลเพื่อหาข้อผิดพลาด Javascript .
แก้ไขสิ่งเหล่านั้น
นอกจากนี้ ตรวจสอบให้แน่ใจว่าตัวเลือก CSS ที่คุณกำหนดเป้าหมายนั้นถูกต้อง และคุณไม่ได้พิมพ์ผิด
จากนั้น ตรวจสอบบันทึกราง สำหรับข้อผิดพลาดใดๆ
จากนั้น ตรวจสอบให้แน่ใจว่าได้แสดงมุมมองที่ถูกต้อง
หากคุณทำตามขั้นตอนนี้ คุณจะพบว่าเหตุใดคำขอ AJAX ของคุณจึงไม่ทำงานและแก้ไขได้
สรุป
คุณได้เรียนรู้เกี่ยวกับ AJAX ซึ่งเป็นเทคนิคการพัฒนาเว็บที่ช่วยให้คุณสามารถสร้างคำขอแบบอะซิงโครนัสได้!
คุณยังได้เรียนรู้วิธีใช้งานสิ่งนี้ใน Rails โปรดจำไว้ว่า ไม่จำเป็นต้องใช้ AJAX เพื่อให้แอป Rails ปกติ (ไม่ใช่เฟรมเวิร์ก) ของคุณทำงาน แต่การมีไว้ในกล่องเครื่องมือมีประโยชน์อย่างยิ่ง
อย่าลืม แชร์บทความนี้ เพื่อให้ผู้คนได้รับประโยชน์จากมันมากขึ้น 🙂
ขอบคุณสำหรับการอ่าน!
