เมื่อพบปัญหาข้ามโดเมนในการพัฒนาโครงการพวกเขามักจะแก้ไขผ่าน JSONP แต่ JSONP คืออะไรและหลักการของการดำเนินการคืออะไร คุณสามารถศึกษาได้อย่างรอบคอบในช่วงเวลาว่างของโครงการ
1. JSONP คืออะไร?
เพื่อให้เข้าใจ JSONP ฉันต้องพูดถึง JSON ดังนั้น JSON คืออะไร?
JSON เป็นชุดย่อยของสัญกรณ์ตัวอักษรของ JavaScript เนื่องจาก JSON เป็นชุดย่อยของ JavaScript จึงสามารถใช้ในภาษาที่ไม่มี muss หรือ muss หรือ muss
JSONP (JSON with padding) เป็นโปรโตคอลที่ไม่เป็นทางการที่ช่วยให้การรวมแท็กสคริปต์ในฝั่งเซิร์ฟเวอร์กลับไปที่ไคลเอนต์และการเข้าถึงข้ามโดเมนทำได้ผ่านรูปแบบของการเรียกกลับ JavaScript (นี่เป็นเพียงการใช้งาน JSONP อย่างง่าย)
2. การใช้ JSONP คืออะไร?
เนื่องจากข้อ จำกัด ของนโยบายต้นกำเนิดเดียวกัน xmlhttprequest อนุญาตให้ทรัพยากรของแหล่งที่มาปัจจุบันเท่านั้น (ชื่อโดเมน, โปรโตคอล, พอร์ต) ในการใช้คำขอข้ามโดเมนสามารถนำคำขอข้ามโดเมนผ่านแท็กสคริปต์แล้วเอาท์พุทข้อมูล JSON บนเซิร์ฟเวอร์และเรียกใช้ฟังก์ชั่นการโทรกลับดังนั้นจึงแก้ไขคำขอข้อมูลข้ามโดเมน
รุ่น JSONP
1. อย่างที่เราทราบกันดีว่าทรัพยากรการร้องขอ AJAX ถูก จำกัด โดยโดเมนเดียวกันไม่ว่าจะเป็นทรัพยากรคงที่หน้าไดนามิกหรือบริการเว็บ
2. ในเวลาเดียวกันเราพบว่าเมื่อโทรหาไฟล์ JS บนหน้าเว็บพวกเขาจะไม่ได้รับผลกระทบจากการข้ามโดเมน (ไม่เพียงแค่นั้นเรายังพบว่าแท็กทั้งหมดที่มีแอตทริบิวต์ 'SRC' มีความสามารถข้ามโดเมนเช่น <Script>
3. สามารถจินตนาการได้ว่าในปัจจุบันหากคุณต้องการเข้าถึงข้อมูลข้ามโดเมนผ่านเว็บ (การควบคุม ActiveX, ตัวแทนเซิร์ฟเวอร์, HTML5 WebSockets ฯลฯ ) มีความเป็นไปได้เพียงอย่างเดียวนั่นคือเซิร์ฟเวอร์จะโหลดข้อมูลลงในไฟล์รูปแบบ JS เพื่อให้ไคลเอ็นต์เรียกและประมวลผล
4. การส่งข้อมูล เรารู้ว่ารูปแบบข้อมูลอักขระบริสุทธิ์ที่เรียกว่า JSON สามารถอธิบายโครงสร้างข้อมูลที่ซับซ้อนได้อย่างรัดกุมและยังได้รับการสนับสนุนโดย JS สามารถประมวลผลข้อมูลในรูปแบบนี้บนไคลเอนต์ได้อย่างง่ายดาย
5. วิธีแก้ปัญหาชัดเจนได้อย่างรวดเร็ว ด้านเว็บเรียกไฟล์ JS ที่สร้างขึ้นแบบไดนามิกบนเซิร์ฟเวอร์ข้ามโดเมนในลักษณะเดียวกับสคริปต์การโทร เหตุผลที่เซิร์ฟเวอร์ต้องการสร้างไฟล์ JS แบบไดนามิกคือการรับชื่อฟังก์ชันการโทรกลับของลูกค้าและส่งผ่านข้อมูลที่ลูกค้าต้องการในรูปแบบ JSON (หรือสตริงบริสุทธิ์)
6. หลังจากไคลเอนต์เรียกไฟล์ JS สำเร็จแล้วพารามิเตอร์ในฟังก์ชันการโทรกลับจะได้รับ ส่วนที่เหลือคือการประมวลผลของข้อมูล วิธีนี้ดูคล้ายกับ AJAX มาก แต่ก็ไม่เหมือนกัน (jQuery ห่อหุ้ม JSONP และ AJAX ด้วยกันและถ้าคุณไม่เข้าใจคุณจะสับสน)
7. เพื่ออำนวยความสะดวกให้ลูกค้าใช้ข้อมูลโปรโตคอลการส่งข้อมูลที่ไม่เป็นทางการได้ถูกสร้างขึ้นอย่างค่อยเป็นค่อยไป ผู้คนเรียกมันว่า JSONP หนึ่งในประเด็นสำคัญของโปรโตคอลนี้คือการอนุญาตให้ผู้ใช้ส่งพารามิเตอร์การโทรกลับไปยังเซิร์ฟเวอร์ เมื่อเซิร์ฟเวอร์ส่งคืนข้อมูลพารามิเตอร์การโทรกลับจะถูกใช้เป็นชื่อฟังก์ชันเพื่อห่อข้อมูล JSON เพื่อให้ไคลเอนต์สามารถปรับแต่งฟังก์ชั่นของตัวเองเพื่อประมวลผลข้อมูลการส่งคืนโดยอัตโนมัติ
ตกลงฉันไม่รู้ว่าคุณเข้าใจ JSONP หรือไม่ ถ้าไม่ฉันจะสรุป หากคุณไม่มีมันอย่าตีฉัน
ในความเป็นจริงหลักการคือลูกค้าร้องขอลิงก์และเพิ่มพารามิเตอร์ที่ต้องการ การโทรกลับหมายความว่ามันเป็นคำขอ JSONP (ส่วนหน้าและส่วนหลังสามารถรวมเป็นหนึ่งเดียวได้ด้วยตนเอง) พื้นหลังแยกวิเคราะห์ลิงค์คำขอและพบว่าเป็นคำขอ JSONP จากนั้นสร้างวิธีการโทรและสร้างสตริงแบบไดนามิก (สามารถเป็น JSON หรือสตริงบริสุทธิ์) ตามพารามิเตอร์คำขอ ด้วยวิธีนี้ไคลเอนต์สามารถเข้าถึงข้อมูลและดำเนินการประมวลผลที่ตามมา
ต้องพูดมากมันไม่ใช่สไตล์ของฉันที่จะไม่เพิ่มรหัสฉันกำลังเพิ่มรหัส -
การทดสอบฟังก์ชั่น (data) {console.log (data)} var url = "http://www.x.com/test?a=1&callback=test" // ส่งพารามิเตอร์ค่า 1 ถึง x.com/test และบอกเขาว่าชื่อฟังก์ชั่นที่เรียกว่า การประมวลผลพื้นหลังสร้างการทดสอบ (ข้อมูลที่เป็นจริง) ต่อไปนี้ ("AAAAAA") การทดสอบ ({a: 1, b: 2}) // จากนั้นปลายด้านหน้าเข้าถึงและเรียกใช้งานผ่านแท็กสคริปต์, สคริปต์ var ข้างต้น = document.createLelement ('สคริปต์'); script.setAttribute document.getElementByTagname ('head') [0] .AppendChild (สคริปต์); // จากนั้นวิธีการทดสอบหน้าจะถูกเรียกซึ่งเป็นหลักการดำเนินการของ JSONPเกี่ยวกับความเป็นจริงของ JSONP ใน jQuery
$ .ajax ({type: "get", url: "http: //xdcn/asych/adv.html? loc = 8 & callback =?", // บอกพื้นหลังว่านี่เป็นคำขอ JSONP ใด ๆ Triggered on success) พิมพ์: "post", // jsonp สามารถส่งคำขอได้รับเท่านั้นแม้ว่าฉันจะตั้งค่าประเภทคำขอเป็น postdatype: "jsonp", // บอก jQuery นี่คือข้อมูล JSONP คุณต้องสร้างแท็กสคริปต์เพื่อโหลด JSData: {a: "1"} "?") $ ("ร่างกาย") ผนวก (ข้อมูล);},*/ข้อผิดพลาด: ฟังก์ชั่น (xmlhttprequest, textstatus, errorthrown) {//alert(errorthrown);หลังจากอ่านรหัสและความคิดเห็นข้างต้นฉันเชื่อว่าทุกคนเข้าใจมัน แม้ว่า jQuery จะห่อหุ้ม JSONP ลงใน AJAX แต่ก็แตกต่างกันเป็นหลัก
แกนกลางของ AJAX คือการได้รับเนื้อหาอื่นนอกเหนือจากหน้านี้ผ่าน XMLHTTPREQUEST ในขณะที่แกนกลางของ JSONP คือการเพิ่มแท็ก <Script> แบบไดนามิกเพื่อเรียกสคริปต์ JS ที่ให้โดยเซิร์ฟเวอร์
ดังนั้นความแตกต่างระหว่าง AJAX และ JSONP ไม่ว่าจะเป็น Cross-Domain หรือไม่ AJAX ยังสามารถบรรลุข้ามโดเมนผ่านพร็อกซีฝั่งเซิร์ฟเวอร์และ JSONP นั้นไม่ได้ยกเว้นการได้มาซึ่งข้อมูลในโดเมนเดียวกัน
ดังที่ได้กล่าวไว้ข้างต้นรูปแบบข้อมูลของ JSONP และ AJAX ไม่จำเป็นต้องเป็น JSON แต่อาจเป็นสตริงบริสุทธิ์
ในระยะสั้น JSONP ไม่ใช่ชุดย่อยของ AJAX และแม้ว่า jQuery จะห่อหุ้ม JSONP ลงใน AJAX แต่ก็ไม่สามารถเปลี่ยนสิ่งนี้ได้
ข้างต้นเป็นคำอธิบายโดยละเอียดของตัวอย่างคำขอข้ามโดเมนของ JS JSOP แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!