AJAX в ExtJS 4

Получение данных в формате JSON

Сегодня наверное уже сложно представить веб-программирование без такой технологии как AJAX. AJAX представляет собой технологию асинхронной передачи данных, без которой не обходится не одно крупной приложение.

В Ext JS для работы с AJAX имеется класс Ext.Ajax. Он является наследником класса Ext.data.Connection и реализует функцию асинхронных запросов с помощью объекта в javascript XMLHttpRequest.

Чтобы отправить AJAX-запрос на сервер, надо задействовать метод request:

Ext.Ajax.request({
    url: 'ajaxData.json'
});

Параметр url указывает на ресурс, к которому мы осуществляем запрос. Это может быть страница php, aspx, данные в формате json или xml.

Для получения ответа с сервера мы можем задействовать параметр success, который в качестве значения принимает функцию, обрабатывающую результат успешного запроса.

Однако запрос по каким-то причинам может завершится неудачей, например, сервер возвратил нам ошибку 404 или 500, в этом случае для обработки данной ситуации мы можем использовать параметр failure, который также принимает в качестве значения функцию обработки:

Ext.Ajax.request({
		url: 'ajaxData.json',
		success: function(response, options){

		},
		failure: function(response, options){

		}
	});	

Обе этих функции принимают два параметра: response - объект XMLHttpRequest, который содержит данные ответа, и необязательный параметр options, который содержит дополнительные данные о запросе.

Используя параметр response мы и получаем ответ с сервера: var text = response.responseText;

Еще одним способом обработать ответ с сервера представляет функция параметра callback:

Ext.Ajax.request({
		url: 'ajaxData.json',
		callback: function(options, success, response){

        },
	});	

Как и две предыдущих функции эта функция имеет те же параметры options и response. А также параметр success, который позволяет проверить, был ли удачен запрос.

Получение данных в формате JSON

Поскольку одной из наиболее популярных форматов взаимодействия с сервером является JSON, создадим в этом формате на сервере файл ajaxData.json:

{
	"id": 1,
	"firstname": "Bill",
	"lastname": "Gates",
	"company": "Microsoft"
}

Положим файл ajaxData.json в один каталог с нашей веб-страницей, в который будет прописан следующий код:

Ext.onReady(function(){
    Ext.Ajax.request({
		url: 'ajaxData.json',
		success: function(response, options){
			alert(response.responseText);
		},
		failure: function(response, options){
			alert("Ошибка: " + response.statusText);
		}
	});	
});

И если все сделано правильно, то после выполнения запроса мы можем увидеть полученные данные с сервера:

Получив данные с сервера, мы можем оперировать ими по своему усмотрению, например, выводить на панель, в окне сообщения или что-то еще делать. Однако в данном случае при простом получении ответа в формате JSON нам довольно сложно оперировать данными. Почему бы их не декодировать в объект с соответствующими свойствами?

Декодирование данных JSON

ExtJS имеет встроенные средства декодирования ответа JSON в виде метода Ext.decode. Декодируем данные и загрузим их в соответствующие поля на форме:

Ext.onReady(function(){
    Ext.Ajax.request({
		url: 'ajaxData.json',
		success: function(response, options){
			var objAjax = Ext.decode(response.responseText); // декодируем полученные json-объекты
			// устанавливаем для каждого свойства декодированное значение
			panel.getComponent('txtName').setValue(objAjax.firstname);
			panel.getComponent('txtSurname').setValue(objAjax.lastname);
			panel.getComponent('txtCompany').setValue(objAjax.company);
		},
		failure: function(response, options){
			alert("Ошибка: " + response.statusText);
		}
	});	

	var panel=Ext.create('Ext.panel.Panel', {
        title:'Приложение ExtJS 4',
        width: 300,
        height: 150,
        padding:10,
		bodyPadding:5,
        items : [{
            xtype: 'textfield',
			fieldLabel: 'Имя',
            id: 'txtName',
            height: 20,
         },{
            xtype: 'textfield',
			fieldLabel: 'Фамилия',
            id: 'txtSurname',
            height: 20,
         },{
            xtype: 'textfield',
			fieldLabel: 'Компания',
            id: 'txtCompany',
            height: 20,
         }],
        renderTo: Ext.getBody()
    });
});

Подобным образом мы можем получать и более иерархически сложные данные. Например, изменим иерархию файла ajaxData.json следующим образом:

{
	"id": 1,
	"firstname": "Bill",
	"lastname": "Gates",
	"products": ["Windows", "Visual Studio"],
	"company": {
		"name": "Microsoft",
		"director":"Balmer"
	}
}

Тогда получить доступ к более сложным данным мы можем, получая всю цепочку сложений от корня до конечного свойства

Ext.onReady(function(){
	Ext.Ajax.request({
		url: 'ajaxData.json',
		success: function(response, options){
			var objAjax = Ext.decode(response.responseText); // декодируем полученные json-объекты
			console.log(objAjax.firstname); // здесь мы получим Bill
			console.log(objAjax.company.director); // Balmer
			console.log(objAjax.products[1]); // Visual Studio, так как products содержит массив
											 // обращаемся к нему как к массиву
		},
		failure: function(response, options){
			console.log('Запрос не удалось выполнить.');
		}
	});	
});