บทความนี้อ้างอิงและอ้างอิงคำพูด "Sharp JQuery" เพื่อให้คำอธิบายโดยละเอียดเกี่ยวกับ jQuery-Ajax และวิธีการหลัก
ก. ไม่ต้องใช้ปลั๊กอินของเบราว์เซอร์ <br/>ไม่ต้องใช้ปลั๊กอินของเบราว์เซอร์ และผู้ใช้ส่วนใหญ่สามารถรองรับ JavaScript ได้เท่านั้น เบราว์เซอร์ เพียงดำเนินการ
ข ประสบการณ์การใช้งานที่ยอดเยี่ยม
ข้อได้เปรียบที่ใหญ่ที่สุดคือสามารถอัปเดตข้อมูลได้โดยไม่ต้องรีเฟรชทั้งหน้า ซึ่งช่วยให้เว็บแอปพลิเคชันสามารถตอบสนองการทำงานของผู้ใช้ได้อย่างรวดเร็ว
c. ปรับปรุงประสิทธิภาพของโปรแกรมเว็บ <br/>เมื่อเปรียบเทียบกับโหมดดั้งเดิม ความแตกต่างที่ใหญ่ที่สุดในประสิทธิภาพของโหมด Ajax คือวิธีการส่งข้อมูล ในโหมดดั้งเดิม การส่งข้อมูลจะดำเนินการผ่านแบบฟอร์ม (จาก) และข้อมูลที่ได้รับคือการรับเนื้อหาทั้งหน้าโดยการรีเฟรชหน้าเว็บอย่างสมบูรณ์ โหมด Ajax จะส่งข้อมูลที่ต้องส่งไปยังเซิร์ฟเวอร์ผ่านออบเจ็กต์ XMLHttpRequest เท่านั้น กล่าวคือ จะถูกส่งตามความต้องการ .
d. ลดภาระบนเซิร์ฟเวอร์และบรอดแบนด์
หลักการทำงานของ Ajax เทียบเท่ากับการเพิ่มเลเยอร์ตัวกลางระหว่างผู้ใช้และเซิร์ฟเวอร์ ซึ่งจะประสานการทำงานของผู้ใช้และการตอบสนองของเซิร์ฟเวอร์ โดยจะสร้างกลไก Ajax บนไคลเอนต์และถ่ายโอนงานบางส่วนที่เซิร์ฟเวอร์ได้รับภาระในวิธีดั้งเดิม ไคลเอนต์ ซึ่งอำนวยความสะดวกในการประมวลผลทรัพยากรไคลเอนต์และลดภาระบนเซิร์ฟเวอร์และบรอดแบนด์
ก. การรองรับเบราว์เซอร์ไม่เพียงพอสำหรับวัตถุ XMLHttpRequest
ข้อบกพร่องประการหนึ่งของ Ajax มาจากเบราว์เซอร์ เฉพาะ IE5.0 และเวอร์ชันที่ใหม่กว่าเท่านั้นที่รองรับออบเจ็กต์ XMLHttpRequest (ไคลเอนต์ส่วนใหญ่ในขั้นตอนนี้คือ IE6 หรือสูงกว่า) Mozilla, Netscape และเบราว์เซอร์อื่น ๆ รองรับ XMLHttpRequest ในภายหลัง โดยปกติในเบราว์เซอร์ต่างๆ โปรแกรมเมอร์ต้องใช้ความพยายามอย่างมากในการเขียนโค้ดเพื่อคำนึงถึงความแตกต่างระหว่างเบราว์เซอร์ เพื่อให้แอปพลิเคชัน Aajx สามารถทำงานร่วมกับเบราว์เซอร์ต่างๆ ได้ดียิ่งขึ้น
ข. ทำลายฟังก์ชันปกติของปุ่มไปข้างหน้าและย้อนกลับของเบราว์เซอร์ <br/>ใน Ajax ฟังก์ชันของปุ่มไปข้างหน้าและย้อนกลับจะไม่ถูกต้อง แม้ว่าวิธีการบางอย่าง (การเพิ่มจุดยึด) จะสามารถใช้เพื่อให้ผู้ใช้สามารถใช้การส่งต่อได้ และปุ่มย้อนกลับ แต่เมื่อเทียบกับวิธีการแบบเดิม สำหรับผู้ใช้มักประสบปัญหานี้ เมื่อพวกเขาคลิกปุ่มเพื่อกระตุ้นการโต้ตอบของ Ajax พวกเขารู้สึกว่าพวกเขาไม่ต้องการทำเช่นนั้น จากนั้นพวกเขาก็คลิกปุ่มย้อนกลับเป็นประจำ ผลลัพธ์ที่ไม่พึงประสงค์ที่สุดก็เกิดขึ้น เบราว์เซอร์กลับไปที่หน้าก่อนหน้า และเนื้อหาที่ได้รับจากการโต้ตอบของ Ajax ก็หายไปโดยสิ้นเชิง
c. การสนับสนุนไม่เพียงพอสำหรับเครื่องมือค้นหา <br/>โดยปกติแล้วเครื่องมือค้นหาจะใช้โปรแกรมรวบรวมข้อมูลในการค้นหาและจัดระเบียบข้อมูลจำนวนมากบนอินเทอร์เน็ต อย่างไรก็ตาม โปรแกรมรวบรวมข้อมูลยังไม่สามารถเข้าใจโค้ด JavaScript แปลก ๆ เหล่านั้นได้ ดังนั้น การเปลี่ยนแปลงในเนื้อหาของหน้าเว็บที่เกิดจาก Ajax จึงสร้างเว็บไซต์ การใช้ Ajax เสียเปรียบเมื่อเทียบกับไซต์ดั้งเดิมในการโปรโมตเครือข่าย
ง. ขาดเครื่องมือในการพัฒนาและแก้ไขจุดบกพร่อง
JavaScript เป็นส่วนสำคัญของ Ajax ในปัจจุบัน เนื่องจากขาดเครื่องมือการพัฒนา JavaScript และการแก้ไขข้อบกพร่องที่ดี นักพัฒนาเว็บจำนวนมากจึงกลัว JavaScript ซึ่งทำให้การเขียนโค้ด Ajax ยากยิ่งขึ้น นักพัฒนาเว็บจำนวนมากจึงคุ้นเคยกับมัน เธอกลัวการใช้ Visual Tools และการเขียนโค้ดเอง ซึ่งส่งผลต่อการใช้งาน Ajax ของทุกคนในระดับหนึ่ง
วิธี AppServ Ajax จำเป็นต้องโต้ตอบกับเว็บเซิร์ฟเวอร์ ดังนั้นจึงต้องใช้สภาพแวดล้อม AppServe เป็นชุดเครื่องมือสำหรับการติดตั้งสภาพแวดล้อม
ที่อยู่การดาวน์โหลด: https://www.appserv.org/en/download/Installation
: กดปุ่ม Next บนเครื่องเดียวอย่างต่อเนื่องและป้อนข้อมูลทั่วไป เช่น ที่อยู่เว็บไซต์ อีเมล รหัสผ่าน ฯลฯ พอร์ตเริ่มต้นคือ 80
ป้อน "http://localhost:80" ในเบราว์เซอร์ และอินเทอร์เฟซต่อไปนี้จะปรากฏขึ้น แสดงว่าการติดตั้งสำเร็จ
การใช้งาน: คัดลอกโปรแกรมที่เขียนไปยังโฟลเดอร์ AppServwww ที่ติดตั้งไว้ จากนั้นป้อน "http://loaclhost:80/program file name" ในแถบที่อยู่เพื่อเข้าถึง
ไลบรารี jQuery มีชุดโปรแกรมที่รองรับ Ajax ที่สมบูรณ์ ฟังก์ชั่นและวิธีการภายในช่วยให้เราสามารถโหลดข้อมูลจากเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชเบราว์เซอร์
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
ในภาพด้านบน
และ $.getJSON()
เคยเผยแพร่บทความ "คำอธิบายโดยละเอียดของเมธอด jquery ajax-ajax()"
หากต้องการรายละเอียด โปรดคลิก: https://juejin.cn/post/7019188063704350756
จะแตกต่างจากวิธีอื่นๆ วิธีที่ง่ายที่สุดและใช้กันมากที่สุดคือสามารถโหลดโค้ด HTML ระยะไกลและแทรกลงใน DOM ได้
โหลดโครงสร้าง
( url , [data] , [callback] )
พารามิเตอร์
แอปพลิเคชัน
1) การโหลดเอกสาร HTML
ขั้นแรกให้สร้างไฟล์ HTML (test.html) ที่โหลดโดยเมธอด load() และต่อท้ายโค้ด HTML เป็นดังนี้:
<!DOCTYPE html> <html> <หัว> <meta charset="utf-8"> <title>ทดสอบ</title> </หัว> <ร่างกาย> <div> <p>สวัสดีชาวโลก!</p> <ul> <li>ค</li> <li>C#</li> <li>ซี++</li> <li>ชวา</li> <li>.เน็ต</li> <li>เจเอสพี</li> <li>เอเอสพี</li> <li> PHP </ li> <li>หลาม</li> <li>iOS</li> <li>แอนดรอยด์</li> <li>จาวาสคริปต์</li> <li>ซีเอสเอส</li> <li>HTML</li> <li>XML</li> <li>วิว</li> <li>โต้ตอบ</li> <li>เชิงมุม</li> <li>SQL</li> </ul> </div> </ร่างกาย> </html>
จากนั้นสร้างหน้าว่างใหม่ (main.html) รวมถึงปุ่มที่เรียกใช้เหตุการณ์ Ajax และรหัส "เนื้อหา"
ที่ใช้เพื่อแสดงเนื้อหา HTML ต่อท้าย (test.html)<!DOCTYPE html> <html> <หัว> <meta charset="utf-8"> <script src="jquery/jquery-2.1.1.js"></script> <title>หลัก</title> </หัว> <ร่างกาย> <!-- วิธีการโหลด() --> <button id="btn1">คลิกเพื่อโหลด</button> <h1>เนื้อหาที่โหลด:</h1> <div id="content1"></div> </ร่างกาย> </html>
จากนั้นเขียนโค้ด jQuery หลังจากโหลด DOM แล้ว ให้เรียกวิธีการโหลดโดยคลิกปุ่มเพื่อโหลดเนื้อหาใน test.html ลงในองค์ประกอบด้วยรหัส "content" รหัสจะเป็นดังนี้:
<script type="text/javascript"> $(ฟังก์ชั่น(){ // โหลด(url) วิธีการ $("#btn1").คลิก(function(){ $("#content1").load("test.html")//โหลดเนื้อหาของ test.html ไปยังหน้าปัจจุบันเมื่อคลิก }) - </script>ก่อนที่จะโหลด
ผลการวิ่ง
:
หลังจากโหลด:
2) กรองเอกสาร HTML ที่โหลด
ตัวอย่างข้างต้นคือการโหลดเนื้อหาทั้งหมดใน test.html ลงในองค์ประกอบด้วย id "content" ใน main.html หากคุณต้องการโหลดเนื้อหาบางส่วนเท่านั้น คุณสามารถใช้ load(url ตัวเลือก) เพื่อให้บรรลุ
หมายเหตุ: มีช่องว่างระหว่าง url และตัวเลือก
ตัวอย่างเช่น หากต้องการโหลดเฉพาะเนื้อหาของแท็ก p ใน test.html โค้ดจะเป็นดังนี้:
<script type="text/javascript"> $(ฟังก์ชั่น(){ // load(url, selector) filter $("#btn1").click(function(){ $("#content1").load("test.html p") - - </script>
เรียกใช้ผลลัพธ์
3) โหมดถ่ายโอน
โหมดถ่ายโอนวิธี load() จะถูกระบุโดยอัตโนมัติตามข้อมูลพารามิเตอร์ หากไม่มีการส่งผ่านพารามิเตอร์ จะใช้เมธอด GET มิฉะนั้น จะถูกแปลงเป็นเมธอด POST โดยอัตโนมัติ
// วิธีการโหลด(url,fn), ไม่มีการถ่ายโอนพารามิเตอร์, วิธี GET $("#btn1").click(function(){ $("#content1").load("test.html", function(){ // รหัส - - // วิธีการโหลด(url,fn) มีพารามิเตอร์ที่จะส่งผ่าน วิธีการ POST $("#btn1").click(function(){ $("#content1").load("test.html", {ชื่อ: "peiqi", อายุ: "18"}, function(){ // รหัส - })
4) พารามิเตอร์การโทรกลับ
สำหรับการดำเนินการที่ต้องดำเนินการต่อไปหลังจากโหลดเสร็จสิ้น เมธอด load() จะมีฟังก์ชันการโทรกลับ (การโทรกลับ) ฟังก์ชันนี้มี 3 พารามิเตอร์ ซึ่งแสดงถึง "คำขอเนื้อหาที่ส่งคืน" และ "สถานะคำขอ" object" รหัสจะเป็นดังนี้:
$("#content1").load("test.html p", function(responseText, textStates, XMLHttpRequest) { //responseText: เนื้อหาที่ส่งคืนโดยคำขอ //textStates: สถานะคำขอ: ข้อผิดพลาดสำเร็จไม่แก้ไขการหมดเวลา 4 ประเภท //XMLHttpRequest: XMLHttpRequest object});
หมายเหตุ: ในเมธอด load() ไม่ว่าคำขอ Ajax จะสำเร็จหรือไม่ก็ตาม ตราบใดที่คำขอเสร็จสมบูรณ์ (สมบูรณ์) ฟังก์ชันการโทรกลับ (โทรกลับ) จะถูกทริกเกอร์
การโหลด () มักจะได้รับไฟล์ข้อมูลแบบคงที่จากเว็บเซิร์ฟเวอร์
(หรือวิธี $.ajax())
สังเกต:
() เป็นฟังก์ชันสากลใน jQuery
1) วิธีการ $.get() วิธี
การ $.get() ใช้วิธี GET เพื่อทำการร้องขอแบบอะซิงโครนัส
โครงสร้าง
พารามิเตอร์
$.get(url, [data], [callback], [type])
แอปพลิเคชัน
ด้านล่างนี้เป็นส่วนหนึ่งของโค้ด HTML สำหรับหน้าแสดงความคิดเห็น ซึ่งแนะนำการใช้เมธอด $.get() รหัสเป็นดังนี้:
<!-- $.get() และ $.post() วิธีการ --> <h3>ความคิดเห็น</h3> <p>ชื่อ:<input type="text" name="" id="name"></p> <p>เนื้อหา:<textarea id="content2"></textarea></p> <button id="btn2">ฝากข้อความ</button> <div id="msg"></div>
เพจที่สร้างโดยโค้ดนี้ดังแสดงในรูป:
หลังจากกรอกชื่อและเนื้อหาของคุณแล้วคุณสามารถส่งความคิดเห็นได้
ก. ขั้นแรก คุณต้องกำหนดที่อยู่ URL ที่ร้องขอ
$("#btn2").คลิก(ฟังก์ชั่น(){ $.get("test.php", พารามิเตอร์ข้อมูล, ฟังก์ชั่นโทรกลับ) })
b. ก่อนส่ง ให้ส่งชื่อและค่าเนื้อหาไปที่พื้นหลังเป็นข้อมูลพารามิเตอร์
$("#btn2").คลิก(ฟังก์ชั่น(){ $.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, ฟังก์ชันโทรกลับ) })
c. หากเซิร์ฟเวอร์รับข้อมูลที่ส่งผ่านและส่งคืนสำเร็จ ข้อมูลที่ส่งคืนสามารถแสดงบนเพจผ่านฟังก์ชันโทรกลับ
ฟังก์ชันการเรียกกลับของเมธอด $.get() มีเพียง 2 พารามิเตอร์เท่านั้น
function(){ //data: เนื้อหาที่ส่งคืนอาจเป็นเอกสาร XML, ไฟล์ json, แฟรกเมนต์ XHML ฯลฯ //textStatus: สถานะคำขอ: ข้อผิดพลาดที่สำเร็จไม่ได้รับการแก้ไข หมดเวลา 4 ประเภท}
d พารามิเตอร์ data แสดงถึงเนื้อหาที่ส่งคืนโดยคำขอ และ textStatus พารามิเตอร์แสดงถึงสถานะคำขอ และฟังก์ชันการโทรกลับสามารถเรียกได้เมื่อข้อมูลสำเร็จเท่านั้น (เรียก load() โดยไม่คำนึงถึงความสำเร็จหรือความล้มเหลว)
// $.get() method$("#btn2").click(function(){ $.get("test.php", {"ชื่อผู้ใช้":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) { if(textStatus=="success"){ //success // รหัส $(data).appendTo("#msg") - - "html")//type })
จ. ผลการดำเนินงาน
2) เมธอด $.post()
มีโครงสร้างและการใช้งานเหมือนกับเมธอด $.get() แต่ยังคงมีความแตกต่างดังต่อไปนี้:
ก. เมธอด GET จะส่งผ่านพารามิเตอร์หลังจาก URL และข้อมูลจะถูกเรียกดู เซิร์ฟเวอร์แคชไว้ ในขณะที่วิธี POST ถูกส่งไปยังเซิร์ฟเวอร์เป็นเนื้อหาเอนทิตีของข้อความ HTTP (นั่นคือ รวมอยู่ในเนื้อหาคำขอ) จะเห็นได้ว่าความปลอดภัยของวิธี POST นั้นสูงกว่าของ วิธีการรับ
ข. วิธี GET มีการจำกัดขนาดข้อมูลที่ส่ง (ปกติแล้วจะไม่เกิน 2KB) ในขณะที่วิธี POST ไม่มีการจำกัดขนาดในทางทฤษฎี
ค. ข้อมูลที่ถ่ายโอนโดยวิธี GET และวิธี POST จะได้รับแตกต่างกันบนฝั่งเซิร์ฟเวอร์ ใน PHP สามารถ รับข้อมูลในโหมด GET ได้ด้วย "_GET[]" ในขณะที่ข้อมูลในโหมด POST สามารถรับได้ด้วย " _POST[]" สามารถรับทั้งสองวิธีได้โดยใช้ "$_REQUEST[]"
d ความเร็วในการส่งข้อมูลของวิธี GET สูงกว่าความเร็วของวิธี POST
เนื่องจากข้อมูลทั้งหมดที่ส่งโดยวิธี POST และ GET สามารถรับได้ผ่าน $_REQUEST[] ดังนั้นตราบใดที่ฟังก์ชัน jQuery มีการเปลี่ยนแปลง โปรแกรมก็สามารถสลับระหว่างคำขอ GET และคำขอ POST ได้ รหัสจะเป็นดังนี้:
// $ โพสต์() วิธีการ $("#btn2").คลิก(function(){ $.post("test.php", {"ชื่อผู้ใช้":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) { if(textStatus=="success"){ //success // รหัส $ (data) .appendto ("#msg") - - "html") // พิมพ์ })
นอกจากนี้ เมื่อส่งเมธอด load() พร้อมพารามิเตอร์ เมธอด POST จะถูกนำมาใช้เพื่อส่งคำขอ ดังนั้น คุณยังสามารถใช้เมธอด load() เพื่อทำหน้าที่เดียวกันให้สมบูรณ์ได้ โค้ดจะเป็นดังนี้:
$("#btn2").click(function(){ $("#msg").load("test.php", { "ชื่อผู้ใช้":$("#name").val(), "เนื้อหา":$("#content2").val() - })
4.
เมธอด $ .getScript ( )
บางครั้งการรับไฟล์ JavaScript ทั้งหมดที่จำเป็นเมื่อโหลดเพจครั้งแรกก็ไม่จำเป็นเลย แม้ว่าคุณสามารถสร้าง
$(document.createElement("script")).attr("src", "test.js").appendTo("head"); แบบไดนามิกได้ //Or $("<script type='text/javascript' src='test.js' />").appendTo("head");
แต่วิธีนี้ไม่เหมาะ jQuery จัดเตรียมเมธอด $.getScript() เพื่อโหลดไฟล์ js โดยตรง ซึ่งง่ายและสะดวกเหมือนกับการโหลดส่วน HTML และไม่จำเป็นต้องประมวลผลไฟล์ JavaScript เนื่องจากไฟล์ JavaScript จะถูกดำเนินการโดยอัตโนมัติ
โครงสร้าง
$.getScript( url , fn ); //url: ที่อยู่คำขอ //fn:
แอปพลิ เคชันฟังก์ชันโทรกลับ <br/>สร้างไฟล์ nowDate.js เพื่อรับวันที่ปัจจุบัน รหัสจะเป็นดังนี้:
ฟังก์ชัน getNowDate(){ var date = วันที่ใหม่ วันที่เดินทางกลับ; }
เมื่อคลิกปุ่ม "รับเวลาปัจจุบัน" เวลาและวันที่ล่าสุดจะปรากฏขึ้น โค้ดจะเป็นดังนี้:
//โค้ด HTML <!-- $.getScript() method --> <button id="btn3">คลิกเพื่อดูเวลา</button> <div id="message1"></div> //รหัส jQuery// $.getScript() วิธีการ $("#btn3").click(function(){ $.getScript("nowDate.js", function(){ var date1 = getNowDate(); //เรียกเมธอด getNowDate() ใน nowDate.js เพื่อรับวันที่ var txtHtml= "<div>"+ date1 + "</div>"; $ ("#message1"). html (txthtml); - })
ก่อนโหลด
ผลลัพธ์ที่กำลังทำงานอยู่
:หลังจากโหลด:
2) วิธีการ $.getJSON()
()
โครงสร้าง
$ .getJson (URL, FN); //url: ที่อยู่คำขอ //fn:
แอปพลิ
เคชันฟังก์ชันโทรกลับสร้างไฟล์ test.json ใหม่ รหัสจะเป็นดังนี้:
{ "เฮเลน":{ "เพศ": "ผู้หญิง", "อายุ":18, "น้ำหนัก":50กก.", "ส่วนสูง":165ซม." - "ปีเตอร์": { "เพศ": "ผู้ชาย", "อายุ": 28, "น้ำหนัก":65กก.", "ความสูง": "185 ซม." - }
สร้างไฟล์ HTML ใหม่ด้วยรหัสต่อไปนี้:
<!-$ .getJson () วิธี-> <button id = "btn4"> คลิกเพื่อโหลดไฟล์ JSON </button> <div id="message2"></div>
เมื่อคุณคลิกปุ่มโหลด จะไม่สามารถมองเห็นเอฟเฟกต์บนเพจได้ คุณสามารถดูได้บนคอนโซล รหัสจะเป็นดังนี้:
// $.getJSON() วิธีการ $("#btn4") .คลิก(ฟังก์ชั่น(){ $.getJSON("test.json", function(data){ console.log (ข้อมูล); })
เอาต์พุตคอนโซลดังแสดงในรูป:
แม้ว่าฟังก์ชันด้านบนจะโหลดไฟล์ JSON (test.json) แต่ไม่ได้บอก JavaScript ถึงวิธีการประมวลผลข้อมูลที่ส่งคืน ดังนั้นเราจึงสามารถประมวลผลข้อมูลที่ส่งคืนในฟังก์ชันโทรกลับได้
โดยปกติเราจำเป็นต้องวนซ้ำข้อมูลที่เราได้รับ แม้ว่าเราจะสามารถใช้ for loop แบบดั้งเดิมได้ที่นี่ แต่เราก็ยังสามารถส่งผ่านได้
each() รับอาร์เรย์หรือวัตถุเป็นพารามิเตอร์แรก และฟังก์ชัน callback เป็นพารามิเตอร์ตัวที่สอง เป็นสมาชิกของวัตถุหรือตัวห้อยของอาร์เรย์ บิตที่สองสอดคล้องกับตัวแปรหรือเนื้อหา รหัสจะเป็นดังนี้:
// $.getJSON() method $("#btn4").click(function() { $.getJSON("test.json", function(data){ console.log (ข้อมูล); $.each(data, function(index, item){ txthtml += "<div> <h4>" + index + ":</h4><ul><li>sex:" + item["sex"] + "</li><li>age:" + รายการ["อายุ"] + "</li><li>น้ำหนัก:" + รายการ["น้ำหนัก"] + "</li><li>ความสูง:" + รายการ["ความสูง"] + "</li></div>"; - $("#message2").html(txtHtml); - })
เอฟเฟกต์ดังแสดงในรูป:
ก่อนโหลด:
หลังจากโหลด:
[การเรียนรู้ที่แนะนำ: JQUERY VIDEA TUTORIAL วิดีโอหน้าเว็บ]
ด้านบนคือการพูดคุยเกี่ยวกับ AJAX ใน JQUERY และอธิบายรายละเอียดของวิธีการหลัก