Detailed Angularjs how to implement Cross-domain requests _angularjs

Cross-domain, front-end development often encountered problems, ANGULARJS implementation Cross-domain way similar to Ajax, the use of cors mechanism.

The following is a description of using $http to implement Cross-domain request data in Angularjs.

angularjs XMLHttpRequest:$http used to read data from a remote server

$http. Post (URL, data, [Config]). Success (function () {...});
$http. Get (URL, [config]). Success (function () {...});
$http. Get (URL, [config]). Success (function () {...});

First, $http. Jsonp "Implementing Cross-Domain"

1. The name of the specified callback and callback function, when the function name is called JSON_CALLBACK , invokes the success callback function and JSON_CALLBACK must be all uppercase.

2. Specify other callback functions, but it must be a global function defined under window. The URL must be added callback .

Second, $http. Get "implement cross-domain"

1. The server-side settings allow access under other domain names

Response.setheader ("Access-control-allow-origin", "*"); Allow all domain names
to access Response.setheader ("Access-control-allow-origin", "http://www.123.com");//Allow www.123.com access

2.AngularJS End Use$http.get()

Third, $http. Post "Implementing Cross-Domain"

1. The server-side settings allow access under other domain names, and response type, response header settings

Response.setheader ("Access-control-allow-origin", "*");
Response.setheader ("Access-control-allow-methods", "POST");
Response.setheader ("Access-control-allow-headers", "X-requested-with,content-type");

2.AngularJS End use $http.post() , set request header information at the same time

$http. Post (' http://localhost/ajax/getAllIndustryCategoty.pt ', {languagecolumn: ' Name_eu '},{' content-type ': ' Application/x-www-form-urlencoded '}). Success (function (data) {
  $scope. Industries = data;
 });

Iv. Ways of implementation

cross-domain mode one " JSONP ":

Method One:

$http. JSONP ("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406"). Success ( function (data) {...});
The name of the callback should be the string json_callback.

Method Two "Returns a value that needs to be received using the corresponding callback method, but how to place it in $scope ?":

$http. JSONP ("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=badgeabc&siteid=137bd406");

function Badgeabc (data) {...}
 public string Execute () throws Exception {string result = FAIL;
 Response.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{Site site = sitehandleraction.find (SiteID);
  Userbadgestatus userbadgestatus = Badgehandleraction.getuserbadgestatus (Site.getid ()); if (userbadgestatus!= null) {result = "{\ t\": "+userbadgestatus.getstyle () +", "l\": "+userbadgestatus.getsuspend_
   Location () + ", \" s\ ":" +site.getid () + "}";
   Jsonobject jsonobj = jsonobject.fromobject (result);
   String json = jsonobj.tostring ();
  result = Jsonp + "(" + JSON + "); } PrintWriter Write = Response.getWriter ();
 Write.print (result);
 Write.flush ();
 Write.close ();
return NONE; }

cross-domain mode two " $http.get() ":

function Getadustrycontroller ($scope, $http) {
 $http. Get (' http://localhost/ajax/getAllIndustryCategoty.pt? Languagecolumn=name_eu '). Success (function (data) {
  $scope. Industries = data;
 });

cross-domain mode three " $http.post() ":

function Getadustrycontroller ($scope, $http) {
 $http. Post (' http://localhost/ajax/getAllIndustryCategoty.pt ', {languagecolumn: ' Name_eu '},{' content-type ': ' application/x-www-form-urlencoded '}). Success (function (data) {
  $scope. Industries = data;}
 );

The Java side supports cross domain requests public
String execute () {
 response.setheader ("Access-control-allow-origin", "*"); Allow which URLs can be requested across domains to the domain
 response.setheader ("Access-control-allow-methods", "POST");//Allowed request methods, usually get,post,put, Delete,options
 response.setheader ("Access-control-allow-headers", "X-requested-with,content-type"); Which request headers are allowed

You can cross-domain

Sitehandleraction Sitehandler = (sitehandleraction) Beansfactory.getbean (sitehandleraction.class);
List List = Sitehandler.getallindustrycategory (); All categories Set
Jsonarray Jsonarray = jsonarray.fromobject (list)/////Convert list to JSON
String JSON = jsonarray.tostring (); Convert to JSON string
try {
 PrintWriter write = Response.getwriter ();
 Write.print (JSON);
 Write.close ();
} catch (IOException e) {
 e.printstacktrace ();
}
return NONE;
}

Summarize

The above is the whole content of this article, hope this article content can learn to use Angularjs to be helpful to everybody.