Detailed explanation of how AngularJS implements cross-domain requests

Cross-domain, a common problem encountered in front-end development. AngularJS implements cross-domain method similar to Ajax and uses the CORS mechanism.

The following explains the use of $http to implement cross-domain request data in AngularJS.

AngularJS XMLHttpRequest: $http is 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(){ ... });

1. $http.jsonp [Implementation of Cross-Domain]

1. Specify callback and callback function name. When the function name is JSON_CALLBACK , the success callback function will be called. JSON_CALLBACK must be in uppercase.

2. Specify other callback functions, but must be global functions defined under window. callback must be added to the url.

2. $http.get [Implementation of Cross-Domain]

1. Set the server to 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 to access

2. AngularJS side uses $http.get()

3. $http.post [Implementation of Cross-Domain]

1. Set the server-side settings to allow access under other domain names, as well as response type and 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 side uses $http.post() and sets the 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; });

4. Implementation method

Cross-domain method one [ JSONP ]:

Method 1:

 $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 2 [Return value, you need to use the corresponding callback method to receive it, but how to put 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 method 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 method 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", "*"); // Which urls are allowed to request across domains to the response.setHeader("Access-Control-Allow-Methods","POST"); //The allowed request methods are generally GET, POST, PUT, DELETE, OPTIONS response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type"); //What request headers are allowed to be allowed

Can cross-domain

 SiteHandlerAction SiteHandler = (SiteHandlerAction) BeansFactory.getBean(SiteHandlerAction.class); List list = SiteHandler.getAllIndustryCategory(); //All classification collections JSONArray jsonArray = JSONArray.fromObject(list); //Convert list to jsonString 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 all about this article. I hope the content of this article will be helpful to everyone to learn to use AngularJS.