ดังนั้น AJAX AJAX และ AJAX ว่าเป็นสิ่งที่เราทำวันนี้อย่างกว้างขวาง จะช่วยประหยัดเวลาเพิ่มการเจริญเติบโตและช่วยให้คุณมีความรู้สึกของการใช้ชนิดของโปรแกรมซอฟต์แวร์รู้สึก มีหลายวิธีที่จะใช้ AJAX กับห้องสมุดจำนวนมากกำลัง แต่เป็นคุณสามารถดูเว็บไซต์นี้สำหรับ jQuery, เราจะดูที่พื้นฐานหรือบางทีอาจจะมีบางขั้นสูง AJAX ประเพณี
คุณจะทำสิ่งที่เราต้องการ?
ห้องสมุด jQuery (แน่นอน)
สคริปต์ PHP เล็ก ๆ
ขอเริ่มพูดคุย ใน jQuery มีพื้น 6 ประเภทของวิธีการที่จะดำเนินการ AJAX เหล่านี้เป็น
- $. อาแจ็กซ์ (ตัวเลือก)
- $. ได้รับ (URL ข้อมูลโทรกลับ)
- $. getJSON (URL ข้อมูลการติดต่อกลับ)
- $. getScript (URL โทรกลับ)
- โหลด (URL ข้อมูลการติดต่อกลับ)
- $ โพสต์. (URL, ข้อมูล, โทรกลับ,
นอกเหนือจากหมายเลข 1 ทุกวิธีการอื่น ๆ ใช้ $. Ajax ภายใน ดังนั้นนั่นหมายความว่า $. อาแจ็กซ์ () เป็นฟังก์ชั่นแม่ของเราสำหรับการดำเนินงาน AJAX jQuery ลองดูที่วิธีการที่ $. อาแจ็กซ์ () ดูเหมือนว่า
msg ) ; } } ) ; การตอบสนอง "+ msg);}}); |
ที่สวยมัน พารามิเตอร์ชนิดใช้ "GET" หรือ "POST" ซึ่งหมายความว่าคุณสามารถส่ง requestion AJAX เช่น POST หรือ GET (ผมชอบโพสต์เสมอไป) ส่วนที่เหลือของพารามิเตอร์จะสวยอธิบายตนเองถ้าคุณดูที่รหัสอีกครั้ง
ตอนนี้เรากำลังจะทำให้สคริปต์ 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> ทดสอบการเชื่อมโยงอาแจ็กซ์ </ 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> </ head> <body> </ body> </ html> |
ตอนนี้เราจะเพิ่มการเชื่อมโยงไปยังเอกสารบางอย่าง สำหรับชนิดเมนูที่ดีขึ้นของการมองเราจะใช้ UL> LI และการเชื่อมโยง ที่จะมีลักษณะเช่นนี้
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 เหล่านั้น วิธีการทำ? ขอเพิ่ม 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" นรกเราจะไม่เชื่อมโยงทั้งหมดของหน้าจะมีการกระทำของอาแจ็กซ์เราจะทำอย่างไร
ดังนั้นในการโหลดเอกสารที่เราต้องการทำเช่นนี้
. ready ( function ( ) { $ (document). พร้อม (ฟังก์ชัน () { ) . click ( function ( ) { $ ("a.ajax_link"). คลิก (ฟังก์ชัน () { this ) ; current_link $ = $ (this); $. อาแจ็กซ์ ({ , ประเภท: "โพสต์", ( "href" ) , URL:. $ current_link attr ("href") ( e ) { ความสำเร็จ: ฟังก์ชัน (E) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ current_link attr ("rel")) HTML (e); } }); ; กลับเท็จ; }); }); |
ผมขออธิบายสคริปต์บิต เหตุการณ์ 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 และโหลดการตอบสนองใน div ที่มี id ที่ตรงกับ" rel แอตทริบิวต์ "ของ การเชื่อมโยง " และผลตอบแทนการเท็จป้องกันไม่ให้การทำงานของการเชื่อมโยงเช่นการเชื่อมโยงปกติ 
อยากเห็นว่าการกระทำ? นี่มันไป
และคุณสามารถ ดาวน์โหลดแหล่งที่มา เช่นกัน
ในส่วนถัดไปของการกวดวิชาเล็ก ๆ น้อย ๆ นี้เราจะใช้สิ่งเดียวกัน แต่มีนิด ๆ หน่อย ๆ ของความสะดวกสบาย
การประยุกต์ใช้วิธีการที่ง่ายขึ้น
ทุกอย่างยังคงเป็นเกือบเดียวกัน เราก็จะเปลี่ยนวิธีการ Ajax ที่นี่ ดังนั้นแทนการเขียนบล็อกทั้ง Ajax $. เราสามารถบรรลุสิ่งเดียวกันกับต่อไปนี้
. ready ( function ( ) { $ (document). พร้อม (ฟังก์ชัน () { ) . click ( function ( ) { $ ("a.ajax_link"). คลิก (ฟังก์ชัน () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; โหลด $ ("#" + $ (นี้) attr ("rel").) ($ (นี้) attr ("href").). ; กลับเท็จ; }); }); |
มันมากที่ซับซ้อนน้อยลงในขณะนี้ใช่มั้ย? วิธีการโหลดโหลดเนื้อหา Ajax ภายในองค์ประกอบที่จะแนบมากับ ถ้า $ ("# somediv_id"). โหลด ("mypage.php") ก็จะพยายามที่จะโหลดเนื้อหา mypage.php 'อยู่ในนั้น สวยเรียบง่าย, huh? แต่ฉันขอแนะนำให้คุณได้ใช้วิธีการหลัก (แสดงในส่วนแรก)
ในไฟล์ซิปที่มีไฟล์อื่นที่เรียกว่าคน ajax2.php ซึ่งแสดงให้เห็นถึงเมธอนี้ซึ่งมีผลเหมือนกัน
ดังนั้น AJAX ไม่เป็นยากอย่างที่มันฟังใช่มั้ย? เมื่อคุณเป็นได้อย่างคล่องแคล่วมากกับการดำเนินงาน AJAX, คุณจะสร้างเวทมนตร์
ขอขอบคุณที่อ่านครับ
ความเห็นล่าสุด