Ajax 페이지들 관계 정리 1 - 기본

Ajax : 비동기적으로 데이터를 요청해서 화면을 갱신하는 기술적인 집합

- 프론트엔드의 꽃 ! 

 

cf) 

Json 형태로 해주기 위해 key 값을 다 ""로 묶어주는 작업을 한 

 

cf)

---

26. NoticeService를 사용할거야

27. 이 list를 사용자에게 돌려주도록 해보자

 

 

29. 출력이 collection일 경우 자연스럽게 배열로 준다. 

 

---

 

 

9. XMLHtppRequest를 request로 이제 활용 가능

17. (2) request 객체가 / get 방식으로 / url 이 주소로 통신을 하게 된다. 

18. (1) send를 하게 되면 

 

14. (3) 통신이 성공적으로 끝나면 끝나면 ~(request.readyState===4 && request.status ===200)

 

cf)

load : transaction이 완료되었을 때 <- 성공했을 때만

loadend : request가 완료되었을 때 <- 성공 or 비성공 둘 다! 

 

맨 위 사진에서 주석 처리 해준 상태로 처음에는 출력됐었지

 

-> 이래서 Json 형태로 해서 배열로 활용하게 해주는 작업이 필요했던 것

 

m.blog.naver.com/PostView.nhn?blogId=agensoft&logNo=221172319094&proxyReferer=https:%2F%2Fwww.google.com%2F

[예제코드 : javascript] 110.자바스크립트 JSON 파싱(parsing) - JSON.parse()

 

---

// 데이터를 가지고 온거 

-> 이제 이 데이터를 화면에 넣어보자. 

 

화면에 넣을 공간이 필요해서 html에 테이블을 만들어보자. 

 

 

뿌리는 방법

1. innerHTML 

2. DOM 직접 생성해서 추가하는 방법

3. template tag 이용한 콜론 방법 

4. (최근에는) append가 아니라 이웃에 insert 하는 방법

- insertAdjacentElement 이게 만능이다. (!) 이거 이용해서 '문자열'로 추가

 

6버전에서 등장. 

- ` 이거로 감싸야 함 (esc 아래) - 템플릿/포맷 문자열

- $하고 {} 중괄호로 감싸면 데이터를 자유롭게 꽂을 수 있음 (이제 +로 복잡하게 꽂아줬던거 안녕~!)

-> 2가지 방식 다 되는 것 (아래 47, 48행의 형식을 바꿔서 해봐도 결과는 같음을 확인) 

 

html

js

45-48행을 위에 보라색 글씨 방법으로 만들어주고 / 반복문으로 / tbody에 넣되 tr의 beforeend에 데이터들을 넣자는 것

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

 

cf)

1. "beforebegin", tr

2. "afterbegin", tr

3. "beforeend", tr

4. "afterend", tr

 

---

html

back단

 

24. 아래 사진 26번째줄 p= 에서 만약 넘겨주는게 없다면 그냥 p니까 "p"가 넘겨진 페이지가 없는거로 되는 것인듯  

 

이 경로 때문에 오류 찾는데 정말 오래 걸렸던 ㅠ 잘봐야 한다! 

상황) 1,2,3,4,5 영역을 하나하나씩 class 설정하지 않고 '전체'를 pager라고 했지.

 

15. 우선 a 태그 원래! 속성 상 새로운 페이지를 띄우는데, 그 속성 말고 지금은 그냥 콘솔창에 출력하고 싶기에 원래 성격 죽여주고~ ㅎㅎ

 

17. 지금 전체 영역을 pager로 줬기 때문에, 태그명에 A가 없는건 return (빈 손으로 돌아가게 해주기)

- 이때 A를 꼭 대문자로 써야 된다고 한다. (소문자로 하니까 아예 아무것도 안나옴...) 

 

20. e.target의 innerText라고 하면 위에 html 사진에서 1,2,3,4,5 를 말하는데 

     이걸 page로 명명한 이유는 for 26행. 저렇게 전달해주기 위함이지! 

 

// 이거 다음에 위에 사진 back단을 보면 이해가 바로 될거다! 

 

31. 'click' 버튼을 누르면 어떻게 되냐면

32,52,53번이 세트 - 자바스크립트로 '다른 파일' 불러올 수 있는 것

36. 그리고 실행. 

 

37. 이미 request.response의 값이 notice/list 가보면 List 타입으로 (즉, 배열) 반환되고 있는데 Json 파싱을 왜 또 해주지? 

-> JSON 쓰면 객체 배열로 그냥 뽑아 쓸 수 있게 됨 

44~49. 

 

상황) html에서 '레코드가 존재하지 않습니다' 없애주기 위해서 작성된 코드

html에서 empty 꺼내와서 그냥 remove()만 해주는 굉장히 쉬운 코드 

41. 조건만 추가.  

- 만약 이 41번째줄 조건문이 없으면, 'click' 버튼 눌렀을 때 -> 그냥 아무 조건도 없이 empty.remove()가 되어서 '레코드가 존재하지 않습니다'는 없어질 것. 그런데 또 click 버튼을 누르면? 그 때는 삭제해줄 empty가 없어서 오류남

- list.length > 0 이 조건은... 없애고 해봐도 잘 돌아가는뎅...