Explicación detallada de cómo AngularJS implementa solicitudes de dominio cruzado

Dominio cruzado, un problema común encontrado en el desarrollo frontal. AngularJS implementa el método de dominio cruzado similar al AJAX y utiliza el mecanismo CORS.

A continuación se explica el uso de $ HTTP para implementar datos de solicitud de dominio cruzado en AngularJS.

AngularJS xmlhttprequest: $ http se usa para leer datos de un servidor remoto

 $ http.post (url, data, [config]). éxito (function () {...}); $ http.get (url, [config]). éxito (function () {...}); $ http.get (url, [config]. Succes (function () {...});

1. $ Http.jsonp [Implementación del dominio cruzado]

1. Especifique callback y devolución de llamada. Cuando el nombre de la función es JSON_CALLBACK , se llamará a la función de devolución de llamada de éxito. JSON_CALLBACK debe estar en mayúsculas.

2. Especifique otras funciones de devolución de llamada, pero deben ser funciones globales definidas en la ventana. callback debe agregarse a la URL.

2. $ Http.get [Implementación del dominio cruzado]

1. Establezca el servidor para permitir el acceso bajo otros nombres de dominio

 Respuesta.setheader ("Access-Control-Allow-Origin", "*"); // Permitir que todos los nombres de dominio accedan a Respuesta.Setheader ("Access-Control- Allow-origin", "http://www.123.com"); // Permitir www.123.com para acceder

2. El lado angularjs usa $http.get()

3. $ Http.post [Implementación del dominio cruzado]

1. Establezca la configuración del lado del servidor para permitir el acceso en otros nombres de dominio, así como la configuración del encabezado del tipo de respuesta y de respuesta

 Respuesta.setheader ("Access-Control-Allow-Origin", "*"); Response.Setheader ("Access-Control-Allow-Methods", "Post"); Response.Setheader ("Access-Control-Allow-Headers", "X-Concaluado, con el tipo de contenido");

2. El lado AngularJS usa $http.post() y establece la información del encabezado de solicitud al mismo tiempo

 $ http.post ('http: //localhost/AJAX/getAllindUntryCategoty.pt', {languageColumn: 'name_eu'}, {'content-type': 'aplicación/xwww-urlencoded'}) .success (function)

4. Método de implementación

Método de dominio cruzado uno [ JSONP ]:

Método 1:

 $ http.jsonp ("http: //localhost/sitesettings/getbadgeinfo.pt? jsonp = json_callback & siteId = 137bd406") .success (function (data) {...}); // El nombre de la devolución de llamada debería ser la cadena json_callback.

Método 2 [Valor de retorno, debe usar el método de devolución de llamada correspondiente para recibirlo, pero ¿cómo ponerlo en $scope ?]:

 $ http.jsonp ("http: //localhost/sitesettings/getbadgeinfo.pt? jsonp = badGeabc & siteId = 137bd406"); function badGeAbc (data) {...} public string Execute () Excepción {String Result = fall. respuesta.setheader ("", ""); SiteHandlerAction SiteHandlerAction = (SiteHandlerAction) Beansfactory.getBean (SiteHandlerAction.Class); BadgeHandlerAction BadgeHandlerAction = (BadgeHandlerAction) Beansfactory.getBean (BadgeHandlerAction.Class); if ("". Equals (SiteId) || SiteId == null || stringUtils.isblank ("jsonp")) {result = fail; } else {sitio sitio = SiteHandlerAction.Find (SiteId); UserBadgestatus UserBadgestatus = BadgeHandlerAction.GetuserBadgestatus (Site.getId ()); if (userbadgestatus! = null) {result = "{/"t/":"+userbadgestatus.getstyle()+",/"l/":"+userbadgestatus.getsuspend_location()+",/":":"+Site.getid()"} "; JsonObject jsonobj = jsonObject.FromObject (resultado); Cadena json = jsonObj.ToString (); resultado = jsonp + "(" + json + ")"; }} PrintWriter Write = Response.getWriter (); write.print (resultado); write.flush (); write.close (); no devuelve ninguno;}

Método de dominio cruzado dos [ $http.get() ]:

 función getAdUstryController ($ scope, $ http) {$ http.get ('http: //localhost/ajax/getallindustrycategoty.pt? languageColumn = name_eu') .success (function (data) {$ scope.industries = data;});}

Método de dominio cruzado tres [ $http.post() ]:

 función getAdUstryController ($ alcance, $ http) { $ http.post ('http: //localhost/AJAX/getAllindUntryCategoty.pt', {languageColumn: 'name_eu'}, {'content-type': 'aplicación/x-www-urlencoded'}) .success (function (data) {$ scope.industries;}; Java Side admite solicitudes de dominio cruzado de dominio público Execute () {Response.Setheader ("Access-Control-Allow-Origin", "*"); // qué URL puede solicitar a través de los dominios a la respuesta. // Los métodos de solicitud permitidos son generalmente, publicar, poner, eliminar, opciones de respuesta.setheader ("Access-Control-allow-Headers", "X-Requested-With, Content-Type"); // qué encabezados de solicitud pueden permitirse

Puede cruzarse cruzado

 SiteHandlerAction SiteHandler = (SiteHandlerAction) Beansfactory.getBean (SiteHandlerAction.Class); List list = SiteHandler.GetAllIndUstryCategory (); // Todas las colecciones de clasificación JSONArray JSonArray = jsonArray.FromObject (lista); // Convertir la lista a jsonstring json = jsonArray.ToString (); // Convertir a JSON String Try {PrintWriter Write = Response.getWriter (); Write.print (JSON); write.close ();} capt (ioexception e) {e.printstacktrace ();} return Ninguno;}

Resumir

Lo anterior se trata de este artículo. Espero que el contenido de este artículo sea útil para que todos aprendan a usar AngularJS.