[비동기 통신] 게시글 불러오기

비동기 통신

요청에 대한 응답을 기다리지 않고 계속 요청을 보내는 방식

 

페이지를 이동하지 않고 이미 사용중인 아이디라고 응답받는다.

 

동기 통신보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간동안 다른 작업을 할 수 있으므로

자원을 효율적으로 사용할 수 있는 장점이 있다.

Ajax (Asynchronous Javascript And XML)

자바스크립트를 통해서 비동기 통신으로 서버에 데이터를 요청하는 자바스크립트 라이브러리

 

Ajax 문법

 

---

1. 비동기 게시판 페이지 만들기

비동기 페이지 만들기

비동기 페이지 요청 url

 

버튼 클릭시 비동기 통신으로 게시판 불러오기

2. ajax를 사용해서 게시글 요청하기

ajax에는 객체가 들어가야한다  // 중괄호 한 쌍이 객체

 

컨트롤러에게 list.do 요청 후 리턴타입 JSON, 성공 시 listBoard 실행

통신 성공시 listBoard 함수에 자동으로 컨트롤러로부터 받아온 리턴값을 자동으로 전달

3. 컨트롤러에서 ajax 응답 받기

리턴타입이 JSON이므로 @ResponseBody

4. 게시글 출력하기

통신이 성공하면 listBoard 함수가 실행된다.

 

콘솔창에 출력되는 게시글 리스트

 

변수 html에 출력되야 할 html 코드를 적고 .html() 함수를 통해 list 클래스안에 html 코드를 넣어준다.

 

 

게시글 불러오기 버튼을 클릭하면

 

게시글이 페이지 이동을 거치지않고 바로 보여진다.