22.08.19 - [ WAS ] Ajax : Asynchronous JavaScript and XML

 

 

 

-- Index --

 

 

1. Ajax란?	2. Ajax 사용해보기	3. data 다뤄보기	4. 사용자 입력 data로 요청
웹 페이지의 전체가 아닌 일부분만을 갱신	url , method data success, error	파라미터로 응답 값 받기 { key : value } 데이터 관리	$( #id ) . val() { key : value }

 

 

 

 

---

 

 

 

1. Ajax 란? 

 

 

---

 

## 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 ##

 

---

 

ex)

• 좋아요 버튼 하트를 누르면 하트가 칠해지고 끝난다.
• 근데 1.내가 2.게시글3번 3.좋아요 눌렀다는 것을 서버에 알려야 한다.
• 하트만 색칠해주면 되는데 + 서버에 알려주기만하면 되는데 + 새로운 페이지 다시 보여줄 필요 없는데
• 이런 상황에서 사용!

 

 

 

이것을 가능하게 하는 것이 AJAX (에이작스,아작스,에이잭스)

현재 페이지의 변화 없이 – 응답을 받을 수 있게 해주는 것이 Ajax

 

 

 

 

 

 

---

 

 

 

 

 

2. Ajax 사용해보기 

 

 

2-1 : 테스트 위해 버튼 하나 만들어서 click 이벤트 걸어주기

 

이벤트 잘 걸려서 콘솔창에 zzz 출력되는지 확인하기

 

---

 

2-2 : Ajax 에서 할 수 있는 일 체크

• ajax는 jQuery에 만들어져 있는 거 활용하면 된다.
• $.ajax(); 만 써주면 사용 가능하다. 호출만 해주면 가능하다.

 

 

 

원하는 곳에 요청 보내고 --- url 

요청 보내는 방식 정하고 --- method

data 실어 나를 수 있고

성공했을시 / 실패했을시 처리 가능하다. --- success / error

 

 

 

---

 

2-3 : Ajax 사용해보기 

 

• ajax에게 일 시키는 방법은? 파라미터로 할 수 있는 일 전달하면 된다.
• 이런 파라미터 하나하나 따로 주는 것이 아니라 객체로 전달하기!
• key:value 형식으로 전달되는 점 체크

 

• 요청할 때는 url / method / data 담아서 보낼 수 있고
• 요청 응답받아서 어떻게 할 건지 success / error 처리 가능하다.
• 이런 것들을 파라미터로 넣어주어야 한다. 
• 이 파라미터들을 가지고 있는 객체를 만들어서 파라미터로 넣어주어야 한다.

 

 

변수 하나 거쳐가지 말고 $.ajax() 안에서 - 바로 객체 만들기 { }

 

 

 

 

 

# CheckPoint

• success :
•  "통신 성공ㅋㅋ"이 출력되어도 성공한 것이고, 서버에서 "에러메시지" 출력된 것도 성공한 것이다.
• 일단 통신은 성공해서 - 전달이 된 것이고 판단은 서버에서 한 것이기 때문에 통신은 성공한 것!

• error
• "통신 실패ㅜㅜ"  - 아예 통신이 실패하였다. 안되었다는 의미이다.

 

 

 

---

 

 

 

3. Ajax로 data 다뤄보기

 

 

 

 

3-1 : 파라미터로 응답받은 값 받아주기

• 성공했을 때 success의 - 첫 번째 파라미터로 응답받은 값 받아준다.
• 실패했을 때 error의 - 첫 번째 파라미터로 응답받은 값 받아준다.
• 파라미터 변수명은 내가 지정!
• data와 e로 지정했음

 

 

 

---

 

 

 

3-2 : data 받아오는 거만 말고 - 받아온 값으로 알람이나 화면에 띄워주기 가능

• ajax를 이용해서 - 문자나 숫자 응답만 가능하다
• ( 객체는 json을 활용해서 가능 )
• write 안에 int 나 String 만 보낼 수 있다.
• -> 어떤 통로에다가 객체를 보낸다? 안된다.

 

 

# 서블릿에서 ajax로  "1"이라는 응답 보내기 #

 

 

---

 

# 서블릿이 보낸 응답받아서 작업하기 #

 

 

 

---

 

 

3-3 : 알람 아니더라도 특정 속성 값에 값 넣어주기 가능

 

 

 

 

---

 

 

3-4 : 내가 보낼 data 추가해주기 – key:value 형태로 보내주어야 한다.

 

• 키 밸류 형태로 보내주기 위해  -
• key:value 형태로 데이터를 관리하는 자바스크립트의 { 객체 }로 보내기
• --key값은 무조건 문자열이기 때문에 “ ” 생략 가능
• -- 자바스크립트의 객체는 { key:value } 형식으로 전달되는 점을 이용한 것

 

 

 

---

 

# 이렇게 클라이언트가 보낸 데이터를 꺼내볼 때에는getParameter #

# 요청과 함께 보낸 data의 값을 받을 때에는 getParameter로 받기 #

 

 

 

 

 

 

---

 

 

 

4. 내가 입력한 것이 아니라 사용자가 입력한 data로 요청 보내기

 

 

4-1. 사용자가 input 태그로 입력한 값을 data로 넘겨주기!

• userId 란 key값에
• temp변수에 담아놓은 value로
• { key : value } 요청!

 

 

---

 

 

4-2 : 요청 처리해줄 서블릿에서 data 꺼내서 작업 수행 후 응답해주기

• getParameter("key")
• userId (key값)으로 value 꺼내와서
• 필요한 작업 (id중복검사 등) 후에
• 실행 결과를 전달해준다.

 

 

---

 

 

4-3 : 서블릿으로부터 응답받은 결과받아와서 작업 

 

 

---

 

 

 

 

# 이걸 활용해서 id 중복검사 가능하다. #

 

 

---

 

 

이제 꼭 form태그나 url 방식으로만이 아닌

ajax를 활용해서 요청을 보낼 수 있다.

 

 

 

# form 태그와 ajax의 차이점! 

• form태그 요청은 – 응답 결과가 완전 새로운 페이지
• ajax 요청은 – 응답 결과를 내 마음대로 가능하다.(화면에 보여주던 , 어떤 div에 넣어주던, 마음대로 가능 )

 

 

---

 

 

 

 

 

가능합니다! 

근데 마지막 장소에서 처리한 결과가

success 첫 번째 파라미터 변수에 담기겠죠~

 

jsp로 포워딩이나 리다이렉트시 -문서 전체가 담기는 수도 있어서 많이 사용 안 한다..

 

 

 

 

---

 

 

 

이어서 -  JSON 활용해서 객체 응답하기

 

https://giggs.tistory.com/241

22.08.19 - [ WAS ] Ajax - Json 활용해서 응답하기 ( feat. Gson )