คำอธิบายโดยละเอียดว่า AngularJS ดำเนินการตามคำขอข้ามโดเมนอย่างไร

ข้ามโดเมนปัญหาที่พบบ่อยในการพัฒนาส่วนหน้า AngularJS ใช้วิธีการข้ามโดเมนคล้ายกับ AJAX และใช้กลไก CORS

ต่อไปนี้อธิบายการใช้ $ http เพื่อใช้ข้อมูลคำขอข้ามโดเมนใน AngularJs

AngularJS XMLHTTTPREQUEST: $ HTTP ใช้ในการอ่านข้อมูลจากเซิร์ฟเวอร์ระยะไกล

 $ http.post (url, data, [config]). ความสำเร็จ (ฟังก์ชั่น () {... }); $ http.get (url, [config]). ความสำเร็จ (ฟังก์ชั่น () {... }); $ http.get (url, [config]). ความสำเร็จ (ฟังก์ชั่น () {... });

1. $ http.jsonp [การใช้งานของ Cross-Domain]

1. ระบุชื่อฟังก์ชั่น callback และการโทรกลับ เมื่อชื่อฟังก์ชั่นคือ JSON_CALLBACK ฟังก์ชั่นการโทรกลับที่ประสบความสำเร็จจะถูกเรียก JSON_CALLBACK ต้องอยู่ในตัวพิมพ์ใหญ่

2. ระบุฟังก์ชั่นการโทรกลับอื่น ๆ แต่ต้องเป็นฟังก์ชั่นทั่วโลกที่กำหนดไว้ใต้หน้าต่าง จะต้องเพิ่ม callback ใน URL

2. $ http.get [การใช้งานของ cross-domain]

1. ตั้งค่าเซิร์ฟเวอร์เพื่ออนุญาตการเข้าถึงภายใต้ชื่อโดเมนอื่น ๆ

 Response.Setheader ("การควบคุมการควบคุม-Ollow-Origin", "*"); // อนุญาตให้ชื่อโดเมนทั้งหมดเพื่อเข้าถึงการตอบสนอง Setheader ("Access-Control-Oligin-Origin", "http://www.123.com"); // อนุญาต www.123.com เพื่อเข้าถึง

2. ด้าน Angularjs ใช้ $http.get()

3. $ http.post [การใช้งานของ Cross-Domain]

1. ตั้งค่าการตั้งค่าฝั่งเซิร์ฟเวอร์เพื่ออนุญาตการเข้าถึงภายใต้ชื่อโดเมนอื่น ๆ รวมถึงประเภทการตอบสนองและการตั้งค่าส่วนหัวการตอบกลับ

 Response.Setheader ("การควบคุมการควบคุม-Ollow-Origin", "*"); Response.Setheader ("การควบคุมการควบคุม-methods", "post"); Response.Setheader ("การควบคุมการควบคุม-หัวหน้า", "x-requested-with, content-type");

2. ด้าน AngularJS ใช้ $http.post() และตั้งค่าข้อมูลส่วนหัวคำขอในเวลาเดียวกัน

 $ http.post ('http: //localhost/ajax/getallindustrycategoty.pt', {languagecolumn: 'name_eu'}, {'content-ype': 'แอปพลิเคชัน/x-ww-form-urlencoded'}.

4. วิธีการใช้งาน

วิธีการข้ามโดเมนหนึ่ง [ JSONP ]:

วิธีที่ 1:

 $ http.jsonp ("http: //localhost/sitesettings/getBadgeInfo.pt? jsonp = json_callback & siteid = 137bd406"). success (ฟังก์ชั่น (ข้อมูล) {... });

วิธีที่ 2 [ค่าส่งคืนคุณต้องใช้วิธีการโทรกลับที่สอดคล้องกันเพื่อรับ แต่จะใส่ใน $scope ได้อย่างไร]:

 $ http.jsonp ("http: //localhost/sitesettings/getBadgeInfo.pt? jsonp = badgeabc & siteid = 137bd406") ฟังก์ชั่น badgeabc (ข้อมูล) {... Response.Setheader ("", ""); SiteHandlerAction SiteHandlerAction = (SiteHandlerAction) BeansFactory.getBean (SiteHandlerAction.class); BadgeHandlerAction BadgeHandlerAction = (BadgeHandlerAction) BeansFactory.getBean (BadgeHandlerAction.class); if ("". เท่ากับ (siteid) || siteid == null || stringutils.isblank ("jsonp")) {result = ล้มเหลว; } else {site site = siteHandlerAction.find (siteid); userbadgestatus userbadgestatus = badgeHandlerAction.getUserBadgestatus (site.getId ()); ถ้า (userbadgestatus! = null) {result = "{/"t/":"+userbadgestatus.getstyle()+",/"l/":"+userbadgestatus.getsuspend_location()+",/"pher jsonObject jsonobj = jsonobject.fromobject (ผลลัพธ์); สตริง json = jsonobj.toString (); ผลลัพธ์ = jsonp + "(" + json + ")"; }} printWriter write = response.getWriter (); write.print (ผลลัพธ์); เขียนฟลัช (); เขียน. close (); กลับไม่มี;}

วิธีการข้ามโดเมนสอง [ $http.get() ]:

 ฟังก์ชั่น getAdustryController ($ scope, $ http) {$ http.get ('http: //localhost/ajax/getallindustrycategoty.pt? languagecolumn = name_eu')

วิธีการข้ามโดเมนสาม [ $http.post() ]:

 ฟังก์ชั่น getAdustryController ($ scope, $ http) {$ http.post ('http: //localhost/ajax/GetAllIndustryCategoty.pt', {languagecolumn: 'name_eu'}, {'content-type': $ scope.industries = data;});} // ด้าน Java รองรับการร้องขอข้ามโดเมนเรียกใช้งานสาธารณะ () {Response.Setheader ("Access-Control-Ollow-Origin", "*"); // URL ใดที่ได้รับอนุญาตให้ขอข้ามโดเมนไปยังการตอบสนอง setheader ("access-control-allow-methods", "post"); // วิธีการร้องขอที่อนุญาตโดยทั่วไปจะได้รับ, โพสต์, ใส่, ลบ, การตอบกลับตัวเลือก. setheader ("การควบคุมการควบคุม-หัว", "x-requested-with, ประเภทเนื้อหา"); // อนุญาตให้ส่วนหัวคำขอใดได้รับอนุญาต

สามารถข้ามโดเมนได้

 SiteHandlerAction SiteHandler = (SiteHandlerAction) BeansFactory.getBean (SiteHandlerAction.class); list list = sitehandler.getAllindustryCategory (); // คอลเลกชันการจำแนกประเภททั้งหมด jsonarray jsonarray = jsonarray.fromobject (รายการ); // แปลงรายการเป็น jSonstring json = jsonarray.toString (); // แปลงเป็นสตริง JSON ลอง {printWriter write = response.getWriter (); write.print (JSON); write.close ();} catch (ioexception e) {e.printstacktrace ();} return none;}

สรุป

ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้การใช้ AngularJS