ฉาก
หากมีเซิร์ฟเวอร์สองตัวที่มีชื่อโดเมนที่แตกต่างกันคือ A.com และ B.Com ในอินเตอร์เฟส b.com/b_return_js.php ข้อมูลบางอย่างสามารถรับได้ แน่นอนถ้าอยู่ในหน้า B.Com คุณสามารถใช้ AJAX เพื่อขออินเทอร์เฟซนี้โดยตรง แต่ถ้ามีการร้องขอในหน้า A.COM
รหัสอินเตอร์เฟสของ b_return_js.php:
การคัดลอกรหัสมีดังนี้:
$ a = อาร์เรย์ (
อาร์เรย์ ('ชื่อผู้ใช้' => 'โทนี่', 'อายุ' => 25)
อาร์เรย์ ('ชื่อผู้ใช้' => 'yimeng', 'อายุ' => 23)
อาร์เรย์ ('ชื่อผู้ใช้' => 'ermeng', 'อายุ' => 22)
Array ('ชื่อผู้ใช้' => 'Sanmeng', 'อายุ' => 21)
-
Shuffle ($ a);
echo 'var userdata =' .json_encode ($ a). ';'; // โดยทั่วไปหากเป็นคำขอเว็บไซต์จาก B.Com มันจะส่งคืน JSON_ENCODE โดยตรง ($ A) อย่างไรก็ตามหากคุณต้องการใช้แอตทริบิวต์ SRC เพื่อให้ได้ข้ามโดเมนที่นี่เราจำเป็นต้องกำหนดค่านี้ให้กับตัวแปร JS เพื่อให้แน่ใจว่าข้อมูลนี้สามารถรับและใช้ในหน้าเว็บที่โหลดโดยแท็กสคริปต์
การใช้งานอย่างง่าย
มีวิธีที่ง่ายในการไปโดยตรงบนหน้าภายใต้ a.com
การคัดลอกรหัสมีดังนี้:
<script src = "http://b.com/b_return_js.php"> </script>
ด้วยวิธีนี้ข้อมูลที่ส่งคืนในอินเทอร์เฟซนี้สามารถรับได้โดยตรงจากหน้า A.COM
แต่มีข้อบกพร่องที่นี่ ข้อมูลนี้สามารถรับได้เมื่อโหลดหน้าเว็บเท่านั้น หากเราต้องการใช้ AJAX วิธีการที่สามารถรับข้อมูลอินเตอร์เฟสใหม่ได้ตลอดเวลาไม่เหมาะสมมาก ตัวอย่างเช่นการคลิกปุ่มเพื่อรับข้อมูลบางส่วนรีเฟรชจากอินเทอร์เฟซนี้วิธีนี้ค่อนข้างไม่เหมาะสม
การใช้งานระดับ AJAX
ในความเป็นจริงแนวคิดของการใช้คลาส AJAX ที่กล่าวถึงข้างต้นคือการสร้างแท็กข้างต้นใหม่เมื่อเงื่อนไข AJAX ถูกทริกเกอร์เพื่อรับข้อมูลจากอินเทอร์เฟซอีกครั้ง อย่างไรก็ตามในความเป็นจริงมันยังคงเป็นเรื่องยากที่จะนำไปใช้ (อย่างน้อยก็ต้องใช้ความพยายามอย่างมากสำหรับฉัน)
บนรหัส:
หากมีปุ่มภายใต้หน้า a.com/scriptsrc.php
<อินพุต type = "ปุ่ม" id = "ajax_request_from_b" value = "คำขอจาก b.com"/>
การคลิกแต่ละครั้งจะได้รับข้อมูลจากอินเตอร์เฟส b.com/b_return_js.php คล้ายกับรหัสการใช้งาน AJAX:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น createScript ()
-
//console.log(ELE);
Ele.src = 'http://b.com/b_return_js.php';
ele.type = 'ข้อความ/javascript';
Ele.Language = 'JavaScript';
-
ฟังก์ชั่น getData ()
-
console.log (userdata);
-
$ ('#AJAX_REQUEST_FROM_B') คลิก (ฟังก์ชัน () {
// แท็กสคริปต์จะต้องโหลดซ้ำทุกครั้งดังนั้นแท็กสคริปต์ใหม่จะต้องสร้างใหม่ทุกครั้งเพื่อให้แน่ใจว่าข้อมูลสามารถรับได้จากเซิร์ฟเวอร์ข้ามโดเมน
ถ้า (ele && ele.parentNode)
-
//ele.parentNode.removeChild(ELE); // การลบแบบนี้ไม่สามารถลบ ELE ออกจากหน่วยความจำได้อย่างสมบูรณ์ แต่จะลบตำแหน่งใน DOM ได้อย่างสมบูรณ์
สำหรับ (คุณสมบัติ var ใน ele) {
ลบ ele [ทรัพย์สิน]; // ลบอย่างสมบูรณ์
-
-
ele = document.createElement ('script'); // นี่คือ ele ใหม่
createScript ();
document.getElementsByTagname ("head") [0] .AppendChild (Ele);
ele.onload = function () {getData ()}; // สามารถรับ UserData ได้หลังจากโหลดองค์ประกอบสคริปต์ ทุกครั้งที่ข้อมูลผู้ใช้ได้รับตามลำดับแบบสุ่ม
-
ด้วยวิธีนี้ทุกครั้งที่คุณคลิกปุ่มคุณจะได้รับข้อมูลจากอินเทอร์เฟซอีกครั้งและเอฟเฟกต์จะคล้ายกับ AJAX แต่นี่เป็นวิธีการข้ามโดเมนของ JS แม้ว่ามันจะไม่เห็นคุณค่าเล็กน้อย แต่ก็ยังเป็นวิธีคิด