1. cross-domain คืออะไร?
เนื่องจากเบราว์เซอร์ใช้ข้อ จำกัด ด้านนโยบายของต้นกำเนิดเดียวกันด้วยเหตุผลด้านความปลอดภัย jQuery จึงไม่สามารถใช้งานวัตถุหรือข้อมูลได้โดยตรงข้ามชื่อโดเมน ตัวอย่างเช่น: a.com
หน้า A.HTML ไม่สามารถใช้งานวัตถุหรือข้อมูลของหน้า B.HTML ภายใต้ชื่อโดเมน B.COM โดยใช้ jQuery และโดยค่าเริ่มต้นชื่อโดเมน test.a.com ไม่สามารถใช้งานได้
วัตถุหรือข้อมูลของ test.html ตราบใดที่ jQuery เป็นไปตามเงื่อนไขต่อไปนี้มันจะถูกพิจารณาว่าเป็นชื่อข้ามโดเมน:
1. โดเมนหลักเหมือนกันโดเมนย่อยแตกต่างกันเช่น xxx.aaa.com และ yyy.aaa.com
2. ชื่อโดเมนเหมือนกัน แต่พอร์ตแตกต่างกันเช่น xxx.aaa.com:8000 และ xxx.aaa.com
3. ชื่อโดเมนเหมือนกัน แต่โปรโตคอลนั้นแตกต่างกันเช่น http://www.aaa.com/ และ https://www.aaa.com/
เฉพาะในกรณีที่โปรโตคอลชื่อโดเมนและพอร์ตเป็น jQuery เดียวกันจะถูกพิจารณาว่าไม่ใช่ชื่อข้ามโดเมน
2. โซลูชันวัตถุการดำเนินงานชื่อข้ามโดเมน jQuery
1. สถานการณ์การมาถึงครั้งแรกของชื่อโดเมนระดับบนสุด
โดยค่าเริ่มต้นหน้า A.HTML ภายใต้ชื่อโดเมน A.COM ไม่สามารถใช้งานวัตถุหรือข้อมูล HTML ภายใต้ชื่อโดเมน test.a.com โดยใช้ jQuery แต่สำหรับสถานการณ์เช่นเดียวกับชื่อโดเมนระดับบนสุดเพียงรีเซ็ต document.domain = a.com ใน a.html และ test.html
2. สถานการณ์ที่ชื่อโดเมนระดับบนสุดแตกต่างกัน
มีสองวิธีสำหรับหน้า A.HTML ภายใต้ชื่อโดเมน A.COM, $ .getJson และ $ .AJAX
(1) ข้ามโดเมนผ่าน Ajax ของ JQuery ซึ่งใช้งานจริงโดยใช้วิธี JSONP
JSONP เป็นตัวย่อของ JSON ที่มีช่องว่างภายในเป็นภาษาอังกฤษ ช่วยให้การสร้างแท็กสคริปต์บนฝั่งเซิร์ฟเวอร์กลับไปที่ไคลเอนต์นั่นคือสร้างแท็ก JavaScript แบบไดนามิก
การอ่านข้อมูลจะรับรู้ผ่านรูปแบบของการโทรกลับ JavaScript
รหัสตัวอย่างสำหรับด้านหน้า HTML:
รหัสมีดังนี้:
// ก่อนอื่นคุณต้องแนะนำ jQuery ของ jQuery (เอกสาร) .ready (function () {$ .ajax ({ประเภท: "get", // jquey ไม่สนับสนุนวิธีการโพสต์ cross-domain async: false, url: "http://api.vevb.com/apitools/ajax_props "JSONP", // วางลงในตัวจัดการคำขอเพื่อรับชื่อพารามิเตอร์ของชื่อฟังก์ชันการโทรกลับ JSONP (ค่าเริ่มต้น: การเรียกกลับ) JSONP: "JSONCALLBACK", // ชื่อฟังก์ชั่นการเรียกกลับ JSONP ที่กำหนดเอง แบบไดนามิกโค้ดตัวอย่างฝั่งเซิร์ฟเวอร์ใช้ Java เป็นตัวอย่าง:
รหัสฝั่งเซิร์ฟเวอร์เป็นจุดสำคัญ ตอนแรกฉันคิดว่าตราบใดที่ไคลเอนต์สามารถเข้าถึงได้โดยตรงข้ามโดเมนผ่าน JSONP มันไม่ใช่กรณีและจำเป็นต้องมีการสนับสนุนด้านเซิร์ฟเวอร์
รหัสมีดังนี้:
โมฆะสาธารณะ jsonptest () พ่น IOException {httpservletRequest Request = servletactionContext.getRequest (); httpservletResponse response = servletactionContext.getResponse (); // รับชื่อของฟังก์ชั่นการโทรกลับตามชื่อพารามิเตอร์ของฟังก์ชันการโทรกลับ JSONP ที่ระบุโดย html // ค่าของการเรียกคืนชื่อจริง: success_jsonpcallback สตริง callbackName = (สตริง) request.getAttribute ("JSONCallback"); // จำลองสตริง JSON อย่างง่ายดาย อันที่จริงคุณสามารถใช้ GSON ของ Google เพื่อแปลง จำนวนครั้งที่มีการประกบผ่านการประกบสตริง // {"ชื่อ": "จางซาน", "อายุ": 28} /// มันคือการหลบหนี "เครื่องหมายสตริง jsonstr =" {/"ชื่อ/":/"จางซาน/",/"อายุ/": 28} "; San "," อายุ ": 28}) สตริง renderstr = callbackName+" ("+jsonstr+") "; response.setContentType (" text/plain; charset = utf-8 "); response.getWriter () เขียน (rendERSTR);}}หลักการของ JSONP:
ลงทะเบียนการโทรกลับ (เช่น 'JSONCallback') ครั้งแรกบนไคลเอนต์จากนั้นส่งชื่อการโทรกลับ (เช่น: Success_jsonpcallback) ไปยังฟังก์ชั่นการประมวลผลที่สอดคล้องกันทางฝั่งเซิร์ฟเวอร์
เซิร์ฟเวอร์สร้างข้อมูล JSON ที่ต้องส่งคืนไปยังไคลเอนต์ จากนั้นในรูปแบบของไวยากรณ์ JavaScript ฟังก์ชันจะถูกสร้างขึ้นและชื่อฟังก์ชันคือค่าของพารามิเตอร์ที่ผ่าน (JSONCallback) (Success_jsonpcallback)
ในที่สุดข้อมูล JSON จะถูกวางลงในฟังก์ชั่นโดยตรงเป็นพารามิเตอร์ดังนั้นจึงสร้างเอกสารของไวยากรณ์ JS และส่งกลับไปยังไคลเอนต์
เบราว์เซอร์ไคลเอ็นต์วิเคราะห์แท็กสคริปต์และใช้ข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์เป็นพารามิเตอร์
มันถูกส่งผ่านไปยังฟังก์ชั่นการโทรกลับที่กำหนดไว้ล่วงหน้าโดยลูกค้า (เช่นในตัวอย่างข้างต้นความสำเร็จ: ฟังก์ชั่น (JSON) ห่อหุ้มด้วยวิธี jQuery $ .ajax ())
ในความเป็นจริงการโหลดข้อมูลข้ามโดเมนโดยการเพิ่มสคริปต์แบบไดนามิกและไม่สามารถรับข้อมูลได้โดยตรงดังนั้นจึงจำเป็นต้องใช้ฟังก์ชั่นการโทรกลับ
(2) ใช้ getjson ของ jQuery เพื่ออ่านข้อมูลข้ามโดเมน
ในความเป็นจริงหลักการพื้นฐานของวิธี getJson นั้นเหมือนกับวิธีที่ Ajax ใช้ JSONP
Getjson มักใช้ใน jQuery เพื่อโทรหาข้อมูลระยะไกลและส่งคืนผ่านรูปแบบ JSON ต้นแบบของฟังก์ชั่นมีดังนี้:
jQuery.getJson (URL, ข้อมูล, ความสำเร็จ (ข้อมูล, สถานะ, XHR))
คำอธิบายพารามิเตอร์
จำเป็นต้องใช้ URL ระบุ URL ที่จะส่งไปยังคำขอ
ข้อมูลเป็นทางเลือก ระบุข้อมูลที่ส่งไปยังเซิร์ฟเวอร์พร้อมกับคำขอ
ความสำเร็จ (ข้อมูลสถานะ XHR) เป็นทางเลือก ระบุฟังก์ชั่นที่จะทำงานเมื่อคำขอสำเร็จ
พารามิเตอร์เพิ่มเติม:
การตอบสนอง - มีข้อมูลผลลัพธ์จากคำขอ
Status - มีสถานะของคำขอ
xhr - มีวัตถุ xmlhttprequest
ฟังก์ชั่นนี้เป็นฟังก์ชั่น AJAX แบบย่อซึ่งเทียบเท่ากับ:
รหัสมีดังนี้:
$ .AJAX ({URL: URL, ข้อมูล: ข้อมูล, ความสำเร็จ: การโทรกลับ, ข้อมูลประเภท: JSON});มาดูกันเถอะลองดูวิธีใช้ GetJSON เพื่อรับข้อมูลข้ามโดเมน
รหัสตัวอย่างสำหรับหน้า HTML:
รหัสมีดังนี้:
$ .getJson ("http://api.vevb.com/apitools/ajax_props.do&jsoncallback=?", ฟังก์ชั่น (ข้อมูล) {แจ้งเตือน (ข้อมูล);});หลักการดำเนินการ:
เมื่อส่งคำขอคุณต้องผ่านชื่อฟังก์ชันการโทรกลับกลับไปยังฝั่งเซิร์ฟเวอร์ ด้านเซิร์ฟเวอร์ได้รับชื่อฟังก์ชันการโทรกลับจากนั้นส่งคืนข้อมูลการส่งคืนไปยังไคลเอนต์ในรูปแบบของพารามิเตอร์เพื่อให้ไคลเอนต์สามารถเรียกได้
ดังนั้นหลังจากที่อยู่ของ URL คำขอคุณต้องใช้พารามิเตอร์เช่น JSONCallback =?, และ jQuery จะแทนที่โดยอัตโนมัติหรือไม่ หมายเลขที่มีชื่อของฟังก์ชั่นการโทรกลับที่สร้างขึ้นโดยอัตโนมัติ
ดังนั้นคำขอที่เกิดขึ้นจริงขั้นสุดท้ายคือ: http://api.vevb.com/apitools/ajax_props.do&jsoncallback=jsonp13224444422697
ดังนั้นหากคุณต้องการเปรียบเทียบกับวิธี AJAX นั่นคือฟังก์ชั่นการโทรกลับเป็นหนึ่งในชื่อฟังก์ชั่นที่สร้างขึ้นโดยอัตโนมัติและอีกชื่อหนึ่งคือชื่อฟังก์ชันที่ระบุด้วยตนเอง
ให้ความสนใจกับประเด็นต่อไปนี้:
1. ที่อยู่ที่ส่งไปยังผู้รับข้อมูลจะต้องเพิ่มด้วยพารามิเตอร์เช่น callback =?, และสิ่งนี้? เป็นชื่อของวิธีการโทรกลับที่จะถูกแทนที่ด้วย jQuery โดยอัตโนมัติ (ใน jQuery 1.4 คุณสามารถระบุชื่อของวิธีการโทรกลับด้วยตัวเอง)
2. โปรดทราบว่าข้อมูลที่ส่งโดยสคริปต์ JS ไม่สามารถเขียนเป็น var data = "{'ชื่อผู้ใช้': 'Sanjer', 'UserId': '110'}"; แต่ควรเขียนเป็น var data = {ชื่อผู้ใช้: 'Sanjer', userId: '110'} และคุณควรให้ความสนใจกับจุดนี้ ในการรับข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์เซิร์ฟเวอร์จะต้องห่อหุ้มข้อมูลลงในสตริงรูปแบบ JSON และส่งคืนพร้อมกับค่าการโทรกลับ (โปรดอ่านรหัสตัวอย่างข้างต้นอย่างระมัดระวัง)
3. เมื่อเรียกวิธีการ $. getjson ของ JQuery JQuery มีการประมวลผลของตัวเองซึ่งได้รับการร้องขอผ่าน SCR ของสคริปต์ แต่คุณควรรู้ว่าในที่สุดข้อมูลจะถูกส่งผ่าน URL ผ่าน Get สิ่งนี้กำหนดว่าจำนวนข้อมูลที่ส่งไม่สามารถมากเกินไปไม่เช่นนั้น URL จะไม่ได้รับนานเกินไป (เป็นไปไม่ได้ที่จะส่งในวิธีการโพสต์เมื่อมีการส่งวิธี getJSON)
หากคุณต้องการส่งข้อมูลขนาดใหญ่ข้ามโดเมนคุณสามารถเลือกวิธี AJAX ที่จัดทำโดย jQuery และเป็นการดีที่สุดที่จะไม่ใช้วิธี getJSON
4. ตัวอย่างข้างต้นขึ้นอยู่กับหลักฐานที่ว่าการพัฒนาทั้งสองด้านอยู่ภายใต้การควบคุมของคุณ นอกจากนี้โปรดระวังว่าปัจจัยความปลอดภัยของโปรแกรมเซิร์ฟเวอร์ไม่สูง (ขอแนะนำให้คุณไม่ได้วางหน่วยประมวลผลตรรกะที่สำคัญและละเอียดอ่อนไว้ในข้อมูลที่ได้รับ)
วิธีการด้านบนของ Java รวมกับ jQuery เพื่อให้ได้ข้อมูลการได้มาซึ่งชื่อข้ามโดเมนเป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น