ฉันจะรู้ได้อย่างไรว่าวิธีใดดีที่สุดสำหรับสถานการณ์ ใครช่วยยกตัวอย่างเพื่อให้ทราบถึงความแตกต่างของฟังก์ชันการทำงานและประสิทธิภาพ
คำตอบ:
XMLHttpRequest คือออบเจ็กต์เบราว์เซอร์ดิบที่ jQuery รวมไว้ในรูปแบบที่ใช้งานง่ายและง่ายขึ้นและฟังก์ชันการทำงานที่สอดคล้องกันระหว่างเบราว์เซอร์
jQuery.ajax เป็นผู้ร้องขอ Ajax ทั่วไปใน jQuery ที่สามารถร้องขอประเภทและเนื้อหาใดก็ได้
jQuery.getและjQuery.postในทางกลับกันสามารถออกได้เฉพาะคำขอ GET และ POST เท่านั้น หากคุณไม่ทราบว่าสิ่งเหล่านี้คืออะไรคุณควรตรวจสอบโปรโตคอล HTTPและเรียนรู้เล็กน้อย ภายในทั้งสองฟังก์ชั่นการใช้งานjQuery.ajaxแต่พวกเขาใช้การตั้งค่าเฉพาะที่คุณจะได้ไม่ต้องตั้งตัวเองจึงลดความซับซ้อนของคำขอ GET หรือ POST jQuery.ajaxเทียบกับการใช้ GET และ POST เป็นเมธอด HTTP ที่ถูกใช้มากที่สุด (เมื่อเทียบกับ DELETE, PUT, HEAD หรือแม้แต่ exotics อื่น ๆ ที่แทบไม่ได้ใช้)
ฟังก์ชัน jQuery ทั้งหมดใช้XMLHttpRequestออบเจ็กต์อยู่เบื้องหลัง แต่มีฟังก์ชันเพิ่มเติมที่คุณไม่ต้องทำเอง
ดังนั้นหากคุณกำลังใช้ jQuery ผมขอแนะนำให้คุณใช้ฟังก์ชัน jQuery เท่านั้น ลืมXMLHttpRequestไปโดยสิ้นเชิง ใช้ jQuery เหมาะสมรูปแบบฟังก์ชั่นการร้องขอและในกรณีอื่น ๆ $.ajax()ทุกคนใช้ ดังนั้นอย่าลืมมีอื่น ๆทำงานร่วมกัน jQuery Ajax ที่เกี่ยวข้องกับการ$.get(), และ$.post() $.ajax()คุณสามารถใช้$.ajax()สำหรับคำขอทั้งหมดของคุณได้ แต่คุณจะต้องเขียนโค้ดเพิ่มอีกเล็กน้อยเพราะต้องมีตัวเลือกเพิ่มเติมเล็กน้อยในการเรียกมัน
เหมือนกับว่าคุณจะสามารถซื้อเครื่องยนต์รถยนต์ให้ตัวเองได้ซึ่งคุณจะต้องสร้างรถทั้งคันพร้อมพวงมาลัยเบรกและอื่น ๆ ... คุณจึงไม่จำเป็นต้องทำเองทั้งหมด
$.postและ$.getสิ่งเดียวที่ช้าลงคือรหัสจำนวนเล็กน้อยก่อนที่จะ$.ajaxถูกเรียก แต่ถ้าคุณเขียนกิจวัตรของคุณเองโดยใช้ XHR โดยตรงสิ่งต่างๆอาจได้รับการปรับให้เหมาะสมเล็กน้อย แต่อาจมีปัญหามากกว่านี้ ฉันขอแนะนำให้คุณอยู่ในฝั่ง jQuery มันจะทำให้ชีวิตของคุณง่ายขึ้น และเมื่อพิจารณาถึงความจริงที่ว่าการโทรแบบ async นั้นใช้เวลานานกว่าการออกรหัสคุณอาจจะไม่สังเกตเห็นความแตกต่างที่ชัดเจนระหว่างการโทรเหล่านี้
$.ajaxโทรออกอย่างสม่ำเสมอได้ทุกที่หากต้องการ ตราบใดที่คุณไม่ได้ใช้ XHR โดยตรงคุณก็ทำได้ดีไม่ว่าจะด้วยวิธีใดก็ตาม
แต่ละคนใช้ XMLHttpRequest นี่คือสิ่งที่เบราว์เซอร์ใช้ในการร้องขอ jQuery เป็นเพียงไลบรารี JavaScript และใช้เมธอด$ .ajaxเพื่อสร้าง XMLHttpRequest
$ .postและ$ .getเป็นเพียงเวอร์ชันสั้น ๆ ของ$.ajax. พวกเขาทำสิ่งเดียวกัน แต่ทำให้การเขียนคำขอ AJAX เร็วขึ้น - $.postสร้างคำขอ HTTP POST และส่งคำขอ$.getHTTP GET
GETคำขอจะส่งข้อมูลทั้งหมดในสตริง URL - ซึ่งสามารถถูก จำกัด โดยลูกค้า / เซิร์ฟเวอร์ ( stackoverflow.com/questions/2659952/... ) POSTร้องขอส่งข้อมูลทั้งหมดที่อยู่ในส่วนหัวเพื่อ จำกัด ขนาด URL ที่ไม่ควรจะมีปัญหา (ยกเว้นกรณีที่คุณมีจริงๆไฟล์และโฟลเดอร์ยาวชื่อสคริปต์ของคุณ!)
GETการใช้ หากคุณกำลังมองหาบางสิ่งบางอย่างที่จะส่ง (เช่นการโพสต์ทวีต) แล้วใช้POST,
jQuery.getเป็น wrapper สำหรับjQuery.ajaxซึ่งเป็น wrapper ไปยัง XMLHttpRequest
XMLHttpRequest และ Fetch API (ทดลองในขณะนี้) เป็นเพียง DOM เท่านั้นดังนั้นควรเร็วที่สุด
ฉันเห็นข้อมูลมากมายที่ไม่ถูกต้องอีกต่อไปฉันจึงสร้างหน้าทดสอบที่ทุกคนสามารถทดสอบเวอร์ชันจากเวอร์ชันที่ดีที่สุดได้ตลอดเวลา:
https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch
จากการทดสอบของฉันในวันนี้แสดงให้เห็นว่ามีเพียง jQuery เท่านั้นที่ไม่ใช่วิธีการแก้ปัญหาที่สะอาดหรือรวดเร็วผลลัพธ์สำหรับฉันในมือถือหรือเดสก์ท็อปแสดงให้เห็นว่า jQuery ช้ากว่า XHR2 อย่างน้อย 80% หากคุณใช้ ajax มากเกินไป ในอุปกรณ์เคลื่อนที่จะต้องใช้เวลามากในการโหลดไซต์ง่ายๆ
การใช้งานเองอยู่ในลิงค์ด้วย
jQuery.post และ jQuery.get จำลองการโหลดหน้าเว็บโดยทั่วไปกล่าวคือคุณคลิกที่ปุ่มส่งและจะนำคุณไปยังหน้าใหม่ (หรือโหลดหน้าเดิมซ้ำ) โพสต์และได้รับแตกต่างกันเล็กน้อยในลักษณะที่ข้อมูลจะถูกส่งไปยังเซิร์ฟเวอร์ (บทความดีดีเกี่ยวกับเรื่องนี้สามารถพบได้ที่นี่
jQuery.ajax และ XMLHttpRequest เป็นหน้าที่โหลดคล้ายกับโพสต์และรับยกเว้นว่าเพจจะไม่เปลี่ยนแปลง ข้อมูลใดก็ตามที่เซิร์ฟเวอร์ส่งคืนสามารถใช้โดยจาวาสคริปต์ในเครื่องเพื่อใช้ในลักษณะใดก็ได้รวมถึงการแก้ไขโครงร่างหน้า โดยปกติจะใช้เพื่อทำงานแบบอะซิงโครนัสในขณะที่ผู้ใช้ยังคงสามารถนำทางไปยังหน้านั้นได้ ตัวอย่างที่ดีคือความสามารถในการเติมข้อความอัตโนมัติโดยการโหลดจากค่าฐานข้อมูลแบบไดนามิกเพื่อกรอกฟิลด์ข้อความ ความแตกต่างพื้นฐานระหว่าง jQuery.ajax และ XMLHttpRequest คือ jQuery.ajax ใช้ XMLHttpRequest เพื่อให้ได้เอฟเฟกต์เดียวกัน แต่มีอินเทอร์เฟซที่ง่ายกว่า หากคุณใช้ jQuery ฉันขอแนะนำให้คุณใช้ jQuery.ajax
โพสต์เก่า. แต่ยังคงต้องการคำตอบความแตกต่างอย่างหนึ่งที่ฉันต้องเผชิญขณะทำงานกับWeb Workers (javascript)
ผู้ปฏิบัติงานบนเว็บไม่สามารถเข้าถึงระดับ UI ได้ นั่นหมายความว่าคุณไม่สามารถเข้าถึงองค์ประกอบ DOM ใด ๆ ในโค้ด JavaScript ที่คุณตั้งใจจะเรียกใช้โดยใช้ Web Worker ไม่สามารถเข้าถึงวัตถุเช่นหน้าต่างเอกสารและพาเรนต์ในรหัสผู้ปฏิบัติงานบนเว็บได้
อย่างที่เราทราบกันดีว่าไลบรารีjQueryเชื่อมโยงกับ HTML DOM และการปล่อยให้ไลบรารีนั้นละเมิดกฎ“ no DOM access” สิ่งนี้อาจเจ็บปวดเล็กน้อยเนื่องจากไม่สามารถใช้วิธีการเช่นjQuery.ajax, jQuery.post, jQuery.getใน Web Worker โชคดีที่คุณสามารถใช้ วัตถุXMLHttpRequestเพื่อสร้างคำขอ Ajax
เท่าที่วิธีการ jQuery ดำเนินไป.postและ.getเพียงแค่ทำ.ajaxภายในวัตถุประสงค์ของพวกเขาคือการแยกตัวเลือกที่ไม่จำเป็นบางอย่างออกไป.ajaxและให้ค่าเริ่มต้นบางอย่างที่เหมาะสมกับคำขอประเภทนั้นตามลำดับ
ฉันสงสัยว่ามีประสิทธิภาพแตกต่างกันมากระหว่าง 3 อย่างใดอย่างหนึ่ง
.ajaxวิธีการในตัวเองไม่ XMLHttpRequest ก็จะได้รับการปรับอย่างหนักเป็นต่อส่วนที่เหลือของ jQuery แต่มันอาจจะไม่เป็นที่มีประสิทธิภาพถ้าคุณปรับแต่งการปฏิสัมพันธ์ทั้งตัวเอง .. แต่ที่แตกต่างระหว่างการเขียนจำนวนมากรหัสหรือ การเขียนjQuery.ajax.