#38 스프링(Ajax쿼리문)

오늘의 노래!!!

 

몰랐어

아티스트

ENHYPEN

앨범

DIMENSION : DILEMMA

발매일

1970.01.01

---

AJAX (Asynchronous Javascript And XML) 란 무엇인가?

• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능
• 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다

AJAX의 장점

• 웹페이지 속도향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
• 기존 웹에서 불가능했던 UI를 가능하게 해줌

AJAX의 단점

• 페이지 이동이 없는 통신으로 보안상의 문제가 있을수 있음
• 연속으로 데이터 요청시 서버 부하가 증가
• 히스토리 관리가 안된다.
• Script로 작성되서 디버깅이 용이하지 않음

		Ajax(Asynchronous JavaScript And XML) : 비동기식 자바스크립트 XML
			: HTML만으로 어려운 다양한 작업을 웹페이지에 구현해 이용자가 웹페이지와 자유롭게 상호 작용할 수 있도록 하는 기술
			: jsp 페이지 이동 없이 데이터베이스에서 정보를 가져올 수 있다.
			: ajax를 사용하려면 JSON에 대해 알아야 한다
			
			JSON(JavaScript Object Notation) : 자바스크립트 객체를 만들 때 사용하는 표현식
			 - 중괄호를 사용해서 key와 value를 구분
			 - key는 이름, value는 값
			 - 예시)
			 {
			 
			 	"key" : value,
			 	"String" : "문자열",
			 	"숫자" : 1234,
			 	"boolean" : true,
			 	"mId" : "icia"
			 }
			 
			 Ajax 사용법 : 반드시 jQuery가 있어야 한다!
			 
			 $.{ajax}({
			 	type : 통신타입(GET과 POST중 선택),
			 	url : 요청할 주소(Controller에서 RequestMapping으로 받을 값),
			 	data : 서버에 요청시 보낼 파라미터(매개변수) <- JSON으로 보낸다
			 	
			 	{"KeyName" : keyValue}, !! 콤바 필요
			 	dataType : 응답받을 데이터의 타입(text, html, xml, json 등등),
			 	succes : funtion(result){
			 		요청 및 응답에 성공 했을 경우, result(결과)를 가져온다
			 	},
			 	
			 	error : function(){
			 	
			 		요청 및 응답에 실패 했을 경우
			 	
			 	}
			 });

• type : GET 또는 POST 지정
• url : ajax로 요청할 대상 URL 지정
• async : 동기, 비동기 지정(boolean)
• dataType : 받아올 테이터의 자료형 지정
• data : 요청 할때 보낼 데이터 지정
• success : ajax 요청 성공시 실행할 이벤트 지정 (function, array)
• error(xhr, status, error): ajax 요청 실패 시 실행할 이벤트 지정(function)
• complete : ajax 요청 완료시 실행할 이벤트 지정(function)

 

# ajax 참고 문헌

https://scoring.tistory.com/entry/AJAX%EB%9E%80-JQuery%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-AJAX%EC%82%AC%EC%9A%A9%EB%B2%95#AJAX%EB%AC%B-%EB%B-%--

 

---

// 카카오 주소 검색

https://postcode.map.daum.net/guide 우편주소 서비스 

• Key를 발급 받을 필요가 없습니다.
• 사용량에 대한 제한이 없습니다.
• 기업용이든 상업적 용도이든 상관없이 무료로 사용 가능합니다.
• 기초구역번호가 발급된 도로명 주소, 영문 주소를 확인 가능합니다.
• 행정안전부에서 제공하는 "도로명 주소" DB를 직접 업데이트 받고 있으므로 가장 최신의 데이터를 이용하실 수 있습니다.