Java EE Fetch 예제

fetch 함수 예제1)

 

button 을 누른경우와 링크를 누른경우의 동작의 차이점

 

메세지 입력 팝업 출력

 

메세지 입력> 확인 누를 경우 Console 창에 인덱스 페이지의 코드 내용이 출력됨.

 

링크를 누른 경우

 

인덱스 페이지로 이동됨.

 

결론) 위 코드에서 버튼을 누른 경우엔 콘솔창에 인덱스페이지의 코드가 출력됨.

링크를 클릭했을때에는 인덱스페이지로 이동됨.

 

 

 

fetch 함수 예제2)

test02.jsp

위코드는 fetch 함수를 호출하여 send.jsp 페이지를 요청한다.

 

send.jsp

send.jsp 페이지에서는 GET 방식 요청 파라미터를 읽어와서 <strong> 사이에 출력한다.

메세지 입력 후 전송 버튼을 클릭하면

 

입력한 문자열이 send.jsp 페이지에 입력받아 전달받는다.

 

 

 

fetch 함수 예제3)

위코드는 fetch 함수를 호출하여 get_msg.jsp 페이지를 요청한다.

 

get_msg.jsp

get_msg.jsp 페이지에서는 li 요소안에 어쩌구, 저쩌구, 이러쿵 문자열을 작성하여 전달한다.

 

 

웹페이지로 구현하면 '더보기' 버튼을 클릭할때마다 get_msg.jsp 에서 전달받은 li 요소들이 추가된다.

 

 

더보기 버튼을 두번 클릭한 결과 어쩌구, 저쩌구, 이러쿵 li 요소가 두번 추가되었다.

 

 

 

fetch 함수 예제4) 

test4에서는 JSON 형식의 문자열을 받아서 사용하는 모습이다.

get_msg2.jsp

 

test3과 동일한 동작을 하지만 JSON 형식으로 받아와서 사용한다.

 

 

 

fetch 함수 예제 5)

test5 에서는 backtick 을 활용하여 출력한다. 

동작은 test3,4 와 동일하다.

 

 

 

fetch 함수 예제 6)

test6.jsp 에서는 서버에서 응답한 문자열이 json 형식일 경우에 res.text() 이 아닌 res.json() 을 사용하여

JSON.parse(data) 함수를 사용하지 않고 작성한 코드이다.

동작은 test 3,4,5 와 동일하다.