Domínio cruzado, um problema comum encontrado no desenvolvimento do front-end. AngularJS implementa o método de domínio cruzado semelhante ao Ajax e usa o mecanismo CORS.
A seguir, explica o uso de $ http para implementar dados de solicitação de domínio cruzado no AngularJS.
AngularJS xmlHttPrequest: $ http é usado para ler dados de um servidor remoto
$ http.post (url, dados, [config]). Sucesso (function () {...}); $ http.get (url, [config]). Sucesso (function () {...}); $ http.get (url, [config]). success (function () {});1. $ Http.jsonp [Implementação de domínio cruzado]
1. Especifique callback e retorno de chamada. Quando o nome da função é JSON_CALLBACK , a função de retorno de chamada de sucesso será chamada. JSON_CALLBACK deve estar em maiúsculas.
2. Especifique outras funções de retorno de chamada, mas deve ser funções globais definidas na janela. callback deve ser adicionado ao URL.
2. $ Http.get [Implementação de domínio cruzado]
1. Defina o servidor para permitir o acesso em outros nomes de domínio
Response.setheader ("Access-Control-Alow-Origin", "*"); // permite que todos os nomes de domínio acessem a resposta.setheader ("Access-Control-allow-origin", "http://www.123.com"); // Permite www.123.com acessar 2. O lado AngularJS usa $http.get()
3. $ http.post [Implementação de domínio cruzado]
1. Defina as configurações do lado do servidor para permitir o acesso em outros nomes de domínio, bem como as configurações do tipo de resposta e do cabeçalho de resposta
Response.setheader ("Access-Control-Alow-Origin", "*"); Response.Setheader ("Access-Control-Alow-Methods", "Post"); Response.setheader ("Access-Control-Arn-clow-header", "X-requested-with, conteúdo-tipo"); 2. O lado AngularJS usa $http.post() e define as informações do cabeçalho da solicitação ao mesmo tempo
$http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){ $scope.industries = data; });4. Método de implementação
Método de domínio cruzado Um [ JSONP ]:
Método 1:
$ http.jsonp ("http: //localhost/sitesettings/getbadgeinfo.pt? jsonp = json_callback & siteId = 137bd406") .success (function (data) {...}); // o nome do retorno deve ser o string, Método 2 [Valor de retorno, você precisa usar o método de retorno de chamada correspondente para recebê -lo, mas como colocá -lo em $scope ?]:
$ http.jsonp ("http: //localhost/sitesettings/getbadgeinfo.pt? jsonp = badgeAbc & siteId = 137bd406"); função badgeAbc (dados) {...} public string Execute () Throws Exception {string; Response.setheader ("", ""); SiteHandlerAction siteHandlerAction = (SiteHandlerAction) beansFactory.getBean (siteHandleraction.class); BadgeHandlerAction BadgeHandlerAction = (BadgeHandlerAction) BeansFactory.getBean (BadgeHandleraction.class); if ("". Equals (siteId) || siteId == null || stringUtils.isblank ("jsonp")) {resultado = falha; } else {site site = siteHandleraction.find (siteId); UserBadgestatus userBadgestatus = badgeHandlerAction.getUserbadgestatus (site.getId ()); if (userbadgestatus! = null) {resultado = "{/"t/":"+userbadgestus.getstyle()+",/"l/":"+userbadgestsatus.getsuspend_location(). JsonObject jsonObj = jsonObject.FromObject (resultado); String json = jsonObj.toString (); resultado = jsonp + "(" + json + ")"; }} PrintWriter write = Response.getWriter (); write.print (resultado); write.flush (); write.close (); retornar nenhum;} Método de domínio cruzado dois [ $http.get() ]:
function getadustrycontroller ($ scope, $ http) {$ http.get ('http: //localhost/ajax/getallindustrycatetoty.pt? languageColumn = name_eu') .success (function) {$ scope.industries =;}; Método de domínio cruzado três [ $http.post() ]:
function getadustrycontroller ($ scope, $ http) {$ http.post ('http: //localhost/ajax/getallindustrycatetoty.pt', {languecolumn: 'name_eu'}, {'content-type': '. $ scope.industries = dados; // quais URLs podem solicitar em domínios para a resposta.setheader ("Access-Control-Allow-Methods", "Post"); // Os métodos de solicitação permitidos geralmente são obtidos, post, put, excluir, options Response.setheader ("Access-Control-Alow-headers", "x-requestado com, tipo conteúdo"); // Quais cabeçalhos de solicitação podem ser permitidosPode domínio cruzado
SiteHandlerAction siteHandler = (SiteHandlerAction) beansFactory.getBean (siteHandleraction.class); Lista da lista = siteHandler.getAllIndustryCategory (); // todas as coleções de classificação jsonArray jsonArray = jsonArray.FromObject (List); // Converta Lista para JSonstring json = jsonArray.toString (); // converte em json string try {printWriter write = Response.getWriter (); write.print (json); write.close ();} catch (ioexception e) {e.printStackTrace ();} retorna nenhum;}Resumir
O acima é tudo sobre este artigo. Espero que o conteúdo deste artigo seja útil para que todos aprendam a usar o AngularJs.