ดังนั้น AJAX AJAX และ AJAX, นั่นคือสิ่งที่เราทำวันนี้อย่างกว้างขวาง จะช่วยประหยัดเวลาเพิ่มพลวัตและช่วยให้คุณรู้สึกของการใช้โปรแกรมซอฟต์แวร์ชนิดของความรู้สึก มีหลายวิธีที่จะใช้ AJAX กับห้องสมุดหลายเท่า แต่เป็นคุณสามารถดูเว็บไซต์นี้เป็นสำหรับ jQuery เราจะมองไปที่พื้นฐานหรือบางทีบางขั้นสูง AJAX ประเพณี
คุณทำอะไรที่เราต้อง?
ห้องสมุด jQuery (แน่นอน)
script php เล็ก ๆ
Let 's เริ่มพูด ใน jQuery มีพื้น 6 ประเภทของวิธีการจะทำดำเนินการ AJAX เหล่านี้คือ
- $. Ajax (ตัวเลือก)
- $. ได้รับ (URL ข้อมูลการโทรกลับ)
- $. getJSON (URL, ข้อมูล, โทรกลับ)
- $. getScript (URL โทรกลับ)
- โหลด (URL, ข้อมูล, โทรกลับ)
- $ โพสต์. (URL, ข้อมูล, โทรกลับ,
นอกเหนือจากหมายเลข 1 ทุกวิธีการอื่น ๆ ใช้ $. Ajax ภายใน ดังนั้นที่หมายถึง $. ajax () เป็นฟังก์ชั่นแม่ของเราสำหรับการดำเนินงาน AJAX jQuery ลองดูที่วิธี $. ajax () ดูเหมือนว่า
$. Ajax ({ , ประเภท: "POST", , url: "some.php" , ข้อมูล: "name = ปีเตอร์และสถานที่ตั้ง = นิวยอร์ก" ( msg ) { ประสบความสำเร็จ: ฟังก์ชัน (MSG) { "Server Response " + msg ) ; alert ("ตอบสนองของเซิร์ฟเวอร์" + msg); } });
ที่สวยมัน พารามิเตอร์ชนิดจะใช้เวลา "GET" หรือ "POST" ซึ่งหมายความว่าคุณสามารถส่ง requestion AJAX เป็น POST หรือ GET (ฉันชอบ POST เสมอ) ส่วนที่เหลือของพารามิเตอร์จะสวยอธิบายตนเองถ้าคุณดูที่รหัสอีกครั้ง
ตอนนี้เรากำลังจะทำให้สคริปต์ AJAX ขนาดเล็กที่อ่านลิงค์ของแท็กเชื่อมโยงหลายมิติ (<a>) และโหลดคำขอในบางองค์ประกอบ div ในเอกสาร
ครั้งแรกที่เราใช้ HTML ปกติของเอกสาร PHP ซึ่งจะมีลักษณะเช่นนี้
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <title> ทดสอบการเชื่อมโยง Ajax </ title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script> <หัว /> <body> </ body> </ html>
ตอนนี้ขอเพิ่มการเชื่อมโยงไปยังเอกสารบางอย่าง สำหรับประเภทเมนูที่ดีขึ้นของรูปลักษณ์ที่เราจะใช้ UL> LI และ Link ที่จะมีลักษณะเช่นนี้
id="nav"> <ul <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> โหลดในกอง 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> โหลดในกองที่ 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> โหลดใน 3 กอง </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> โหลดใน 4 กอง </ a> </ li> <ul />
ที่คุณสามารถดูเราได้นำการเชื่อมโยงในองค์ประกอบของรายการที่อยู่ภายในวัตถุเรียงลำดับรายชื่อ ใช้มองใกล้ที่คุณสมบัติของแท็ก <a> ขณะนี้มีแอททริบิ href ชั้นเรียนและ rel ซึ่งมีลักษณะที่แตกต่างกันไม่มีอะไรมากกว่าการเชื่อมโยงปกติ ถ้าคุณเห็นเราได้รับแอตทริบิวต์ rel ไปบางชื่อ div ได้แก่ div1, div2 .. ดังนั้นเมื่อ ซึ่งหมายความว่าเราต้องการการตอบสนองของ href จะโหลดลงใน divs เหล่านั้น วิธีการทำเช่นนั้น? Let 's เพิ่ม divs เหล่านั้นก่อน
<span> DIV -1 </ span> <div id="div1" class="content_loader"> </ div> <span> DIV -2 </ span> <div id="div2" class="content_loader"> </ div> <span> DIV -3 </ span> <div id="div3" class="content_loader"> </ div> <span> DIV -4 </ span> <div id="div4" class="content_loader"> </ div>
และส่วนที่จริงตอนนี้ - เราได้ให้การสนับสนุนระดับ "ajax_link" เราจะมีเฉพาะแบบไดนามิกเพิ่มการกระทำ Ajax เท่านั้นที่มีการเชื่อมโยงชื่อชั้นที่เรียกว่า "ajax_link" นรกเราจะไม่เชื่อมโยงทั้งหมดของหน้าเว็บที่จะมีการกระทำ Ajax, เราจะทำอย่างไร
ดังนั้นในการโหลดเอกสารที่เราต้องการทำเช่นนี้
. ready ( function ( ) { $ (เอกสาร). พร้อม (function () { ) . click ( function ( ) { $ ("a.ajax_link"). คลิกที่ (function () { this ) ; $ current_link = $ (this); $. Ajax ({ , ประเภท: "โพสต์" ( "href" ) , URL:. $ current_link attr ("href"), ( e ) { ประสบความสำเร็จ: ฟังก์ชัน (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ current_link attr ("rel")) HTML (e); } }); ; return false; }); });
ผมขออธิบายสคริปต์บิต เหตุการณ์ document.ready เป็นเหตุการณ์ที่ถูกทริกเกอร์ที่โหลดหน้า แล้วเรากำลังจัดเรียงของการกำหนดรหัสบางอย่างในกรณีที่คลิกการเชื่อมโยงที่มีคลาส "ajax_link" การทำเช่นนี้ $ current_link = $ (this); ช่วยให้การมีวัตถุเชื่อมโยงในปัจจุบันจะสามารถใช้ได้ภายในฟังก์ชันโทรกลับ และเรามี
$ ("#" + $ current_link.attr ("rel")). html ที่ (จ)
ซึ่งหมายความว่า $ ("div_id") HTML (server_response) และเราได้ตั้งพระราม url ของ $ ฟังก์ชัน ajax แบบไดนามิกที่มี url:.. $ current_link.attr ("href") ดังนั้นตอนนี้ทุกวิธีเหล่านั้น "ทั้งหมดลิงก์ผู้ที่มีคลาส" ajax_link "- เพิ่มตัวจัดการเหตุการณ์ค - แล้วดำเนินการและขอ AJAX การสนับสนุน href poperty และโหลดลงในการตอบสนองที่มี ID div ตรงกับ" rel แอตทริบิวต์ "ของ การเชื่อมโยง " และผลตอบแทนที่ผิดพลาดจะป้องกันไม่ให้การทำงานเชื่อมโยงเช่นการเชื่อมโยงปกติ 
วรรณาเห็นมันการกระทำ? นี่มันจะไป
และคุณสามารถ ดาวน์โหลดมา เช่นกัน
ในส่วนถัดไปของการกวดวิชาเล็ก ๆ น้อย ๆ นี้เราจะใช้สิ่งเดียวกัน แต่มีนิด ๆ หน่อย ๆ ของความสะดวกสบาย
การประยุกต์ใช้วิธีการที่ง่ายขึ้น
ทุกอย่างยังคงเป็นเกือบเดียวกัน เราก็จะเปลี่ยนวิธีการ Ajax ที่นี่ ดังนั้นแทนที่จะเขียนบล็อกทั้ง Ajax $. เราสามารถบรรลุสิ่งเดียวกันกับต่อไปนี้
. ready ( function ( ) { $ (เอกสาร). พร้อม (function () { ) . click ( function ( ) { $ ("a.ajax_link"). คลิกที่ (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; ภาระ $ ("#" + $ (นี้) attr ("rel").) ($ (นี้) attr ("href").). ; return false; }); });
มันมากน้อยซับซ้อนในขณะนี้ใช่มั้ย? วิธีการโหลดโหลดเนื้อหา Ajax ภายในองค์ประกอบที่มันติดกับ ถ้า $ ("# somediv_id"). โหลด ("mypage.php") ก็จะพยายามที่จะโหลดเนื้อหา mypage.php 's อยู่ในนั้น สวยเรียบง่าย, huh? แต่ผมขอแนะนำคุณได้ใช้วิธีการหลัก (แสดงในส่วนแรก)
ในไฟล์ซิปที่มีไฟล์อื่นที่เรียกว่าสถานที่ ajax2.php ซึ่งแสดงให้เห็นถึง methos นี้ซึ่งมีผลเดียวกัน
ดังนั้น AJAX ไม่เป็นยากอย่างที่มันฟังใช่มั้ย? เมื่อคุณเป็นได้อย่างคล่องแคล่วมากกับการดำเนินงาน AJAX, คุณจะสร้างเวทมนตร์
ขอขอบคุณที่อ่านนะ
ความเห็นล่าสุด