[Spring Boot] AJAX (비동기 통신)

AJAX (비동기 통신)

• Asynchronous JavaScript And Xml
• 비 동기로 통신 하는 JavaScript(JSON) 와 xml 이라는 뜻이다. (요즘은 xml을 잘 사용 안한다.)
• 동기화 : 요청한 일이 끝날 때 까지 다른 일을 하지 못한다. (싱크로나이즈드)
• 비 동기화: 요청 해 놓고 다른 일을 자유롭게 할 수 있다. (쓰레드)

그렇다면 생활 속의 동기화와 비 동기화는 무엇이 있을까?

콜센터 전화 📞
콜센터에 연결 가능할 때까지 기다린다 = 동기
예약하면 전화를 주는 경우 = 비동기

식당 🍔
줄 서서 기다리는 경우 = 동기
테이블 오더로 예약하는 경우 = 비동기

게임 🎮
게임 신청 후 매치 될 때까지 기다림 = 동기
매치 될 때까지 다른 기능 사용 가능 = 비동기

비동기에는 내가 무언갈 예약하면 그에 해당하는 답을 주는 누군가 가 필요하다.
즉, 요청을 받아서 전달하고 다 되면 나에게 알려주는 누군가(XML Http Request)가 필요하다는 것이다.

기존에는 다른 페이지로 이동을 하거나 해야했지만 ajax를 이용하면 페이지에 변화가 전혀 없는 상태에서 이용할 수 있다.

ajax는 데이터를 달라고 한 다음에 그 데이터로 그림을 그린다. (그래서 success 가 길어진다.)

ajax를 활용하면 실시간으로 변화하는 페이지를 만들 수 있다.

ajax를 사용하면 json 형태로 값을 주고받게 되는데 서버에서는 Map, List 로 바꿔서 받아줘야 한다.
이렇게 사용하는 이유는 만약 API로 데이터를 끌어와 사용할 때 그냥 문자열 그대로를 전달주기 때문에 그 내용을 DB에 넣을 때 Map, List 등으로 변환해서 넣어줘야 한다.

---

✨ AJAX 기본 작성법

$.ajax({
  	// 전송 방식 지정 (GET / POST)
	type:"get",
  	// 요청을 전송할 URL 주소 (controller 메서드와 매핑해준다.)
	url:”http://localhost:8080/api”,
  	// 요청 시 추가할 파라미터
	data:{ q:qry, result:10, ... },
    // 응답 받을 데이터 타입 [json | xml | text | jsonp]
	dataType:"JSON",
	// 요청 타임 아웃 (milliseconds)
    timeout:5000,
    // 성공 시 실행할 내용 (data : 응답 받은 데이터)
	success: function(data){
	}, 
    // 실패 시 실행할 내용
    error:function(request,status,error){
	}
});

• type : 전송 방식을 GET 으로 지정. [POST | GET]
• url : 요청을 전송 할 url 주소
• data : 요청시 추가할 파라메터
• dataType : 응답 받을 데이터 타입[json | xml | text | jsonp]
• timeout : 요청 타임 아웃(milliseconds)
• success : 성공 시 실행 할 내용(data : 응답 받은 데이터)
• error : 실패 시 실행 할 내용