Настройка ajax-запросов

В прошлой теме мы рассмотрели сервис $http. Теперь же рассмотрим более детально его применение и настройку. Так, в пошлой теме использовался следующий запрос:

$http({method: 'GET', url: 'question.json'}).
	then(function success(response) {
		$scope.question=response.data.question;
});

Это параметризованная форму записи сервиса, которая использует два параметра: параметр method принимает название метода HTTP, с помощью которого происходит запрос. А параметр url содержит адрес запроса.

С помощью вызова последующей функции then мы можем обработать ответ от сервера. Она имеет следующую форму: then(successFn, errorFn) - в качестве первого параметра передается функция, которая срабатывает при успешном завершении запроса, а вторая передаваемая функция вызывается, если возникает ошибка при выполнении запроса.

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
	
  }, function errorCallback(response) {
	  
  });
 

Обе функции, которые передаются в функцию then, в качестве параметра принимают информацию об ответе, которая в свою очередь может содержать до 5 параметров:

• data: представляет данные, полученные от сервера

• status: статусный код ответа

• headers: возвращает функцию, получающую заголовки ответа

• config: объект для конфигурации запроса

• statusText: текст статуса ответа

Так при успешном завершении запроса через значение response.data мы можем получить данные, которые прислал сервер.

Кроме параметризированной формы сервиса есть сокращенная форма для основных типов запросов. Так, вместо вызова сервиса:

$http({method:'GET', url: 'question.json'}).
	then(function success(response) {
			$scope.question=response.data.question;
	}, function error(response){
			console.log("Возникла ошибка");
	}
);

мы можем написать:

$http.get('question.json').
	then(function success(response) {
			$scope.question=response.data.question;
	}, function error(response){
			console.log("Возникла ошибка");
	}
);

Кроме метода get() сервис $http поддерживает еще ряд методов:

• get(url, config): выполняет GET-запрос по определенному url

• post(url, data, config): выполняет POST-запрос к определенному url с отправкой объекта data

• delete(url, config): выполняет DELETE-запрос

• put(url, data, config): выполняет PUT-запрос, отправляя объект data по определенному url

• head(url, config): выполняет HEAD-запрос

• jsonp(url, config): выполняет JSONP-запрос по определенному url

Таким образом, AngularJS предоставляет полноценную функциональность для взаимодействия с сервисами, применяющими архитектуру REST.

Используем вышеопределенные функции:

questApp.controller('QuestionController',
    function QuestionController($scope, $http){

		$scope.loaded=false;
     
		$scope.load = function (){
            $http.get('question.json').
				then(function success(response) {
						$scope.question=response.data.question;
						$scope.loaded=true;
						console.log("код ответа: " + response.status);
						console.log("объем данных: " + response.headers("content-length"));
					}, function error(response){
						console.log("Возникла ошибка");
						console.log("код ответа: " + response.status);
					}
			);
        };
        $scope.voteUp = function (answer){
            answer.rate++;
        };
        $scope.voteDown = function (answer){
            answer.rate--;
        };
    }
)

Конфигурация запроса

Параметр config является более сложным по функционалу. Он представляет объект, вкотором определены следующие параметры:

• data: данные, которые посылаются на сервер. Если не установить данный параметр, то отправляемые данные, например, методом post, будут автоматически сериализоваться в json

• headers: объект, представляющий набор заголовков

• method: HTTP-метод запроса

params: устанавливает параметры строки URL

• timeout: устанавливает число миллисекунд действия запроса

• transformRequest: функция, которая обрабоатывает данные запроса перед его осуществлением

• transformResponse: функция, которая обрабатывает ответ от сервера после осуществления запроса

• url: устанавливает запрашиваемый URL

• withCredentials: если параметр равен true, то в запросе также отправляются аутентификационные куки

• xsrfHeaderNamexsrfCookieName: используется для отправки CSRF-токенов

Используем параметр config:

questApp.controller('QuestionController',
    function QuestionController($scope, $http){

		$scope.loaded=false;
     
		$scope.load = function (){
			var conf={
				timeout: 600 // 600 миллисекунд
			};
            $http.get('question.json', conf).
				then(function success(response) {
						$scope.question=response.data.question;
						$scope.loaded=true;
						console.log(response.config);
					}, function error(response){
						console.log("Возникла ошибка");
						console.log("код ответа: " + response.status);
					}
			);
        };
        $scope.voteUp = function (answer){
            answer.rate++;
        };
        $scope.voteDown = function (answer){
            answer.rate--;
        };
    }
)

Метод get() получает объект conf в качестве параметра конфигурации, который устанавливает время истечения запроса - 600 миллисекунд. Затем в методе success мы можем вывести все конфигурационные данные запроса на консоль: console.log(config)