ExtJS6 스무번째강의 - ExtJS 6 Ajax 클래스 사용법 이해(ExtJS 6 Understanding how to use the Ajax class)
ExtJS Ajax 클래스 사용법이해 관련 영상링크는 아래와 같습니다.
YOUTUBE 채널 구독해주세요!!
Ajax 클래스
Ajax 클래스는 Ext.data.Connection클래스의 싱글톤 인스턴스입니다.
이 클래스는 서버측 코드 즉, API와 통신하는데 사용이 됩니다.
jQuery의 Ajax 를 이용해보셨던 분들이시라면 쉽게 이해할만간 ExtJS 강좌입니다.
왜냐하면, 문법이 상당히 유사하기 때문이죠.
기본문법은 다음과 같이 표현할 수 있겠습니다.
기본적으로 jQuery에 사용되는 구조랑 거의 90%이상 유사합니다.
url : 내가 응답받은 API URL 을 작성해주시면 됩니다.
method : 서버에 내가 보낼 parameter에 대한 POST 또는 GET 관련 호출방식선언
params : JSON OBJECT 형식으로 KEY/VALUE 로 PARAMETER 전송
success : 서버에서 내려주는 오류 또는 응답받은 API CALLBACK 값이 내려옵니다.
failure : 서버에서 응답을 받지 못할 경우, 예를들어 서버가 다운됐거나 또는 저같은 경우에는 CORS 설정이 되있지 않을경우 접근이 불가하므로 FAILURE 부분에서 실패관련 응답값을 받을 수 있을겁니다.
JSON이 문자열로 내려온다면?
Ext.Ajax 를 이용하게 되면, 기본적으로 JSON 규격으로 문자열 형태로 내려오게 됩니다.
이럴 경우, Ext.decode 혹은 Ext.JSON.Decode 함수를 이용해서 JSON OBJECT 형식으로 변경 후, 작업진행을 해주면 되겠습니다.
ExtJS.Aajx 클래스에서 응답받은 response 객체 내에 담겨서 내려오는 대표적인 응답 key 값들
responseText : 서버로부터 내려 준 JSON OBJECT에 관련 된 JSON 규격의 문자열입니다. 이것은 Ext.decode를 이용해서 JSON OBJECT 로 파싱이 가능합니다.
status : 서버로부터 내려오는 상태코드
statusText : 서버응답을 정상적으로 받았을 경우 OK라는 문자열이 내려옵니다.
Ajax 클래스 VS Store 클래스
데이터 스토어를 이용해서 ajax 통신을 하셔도 무관합니다.
방식은 동일하기 때문!!
하지만, Store 클래스는 어떠한 값들을 담기위한 데이터 공간이므로 그냥 그리드 또는 트리컴포넌트 같은 데이터스토어와 패키지로 구성된 처리를 위할때 사용하시기를 권하며,
그외에 별도로 어떠한 값을 한꺼번에 SUBMIT 또는 각각의 컴포넌트들을 한번에 처리할경우, Ajax 클래스를 이용하길 권해드리고 싶습니다.
데이터스토어와 Ajax 사용에 대한 부분에 한가지 더 차이점을 말씀드리자면,
데이터 스토어로면 CRUD 처리를 하게 될 경우, DB 트랜잭션이 적용되지 않는다는 것입니다.
예를들어, 그리드의 데이터들을 일괄처리 하게 된다면 데이터스토어 proxy config에 정의된 URL에 따라서 각 데이터들이 나눠져서 서버 URL로 호출하게 됩니다.
그리드상에 신규로 등록된 로우들에 대한 일괄처리는 CREATE CONFIG에서
그리드 기존데이터들이 수정된 일괄처리는 UPDATE CONFIG에서
마지막으로 그리드상의 기존로드된 데이터들이 삭제된 다면 DESTROY CONFIG로 넘어가는 것이죠.
즉, 등록,수정,삭제된 모든 데이터들을 일괄로 처리하기 위해서는 데이터스토어가 아닌 Ajax 클래스를 이용해야 하는 것입니다.
