KOSTA DAY34
JavaScript
Ajax(JQuery 활용)
Ajax : 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법
앞서 xhr을 활용한 ajax에 대해서 앞서 다룬적이 있었다. JQuery를 활용하여 보다 편하게 ajax 사용하는법에 대해 알아보자.
Ajax 관련 JQuery 커맨드
html타입 결과 불러오기
- load(url, parameters, callback)
- url : 요청주소
- parameters : 전달 data
- callback : load 된 이후 호출되는 함수
- load함수의 경우에는 callback함수를 사용하지 않아도 된다.
JSON 타입 결과 불러오기
- get JSON(url, parameters, callback) : 응답이 json문자열로 해석되며 결과는 callback 함수에 전달된다.
- getJSON 함수를 통해서 url 주소 안의 데이터값을 function의 매개변수값으로 사용하게 된다.
javascript 타입 결과 불러오기
- getScript(url) : javascript를 불러온다.
xml 타입 결과 불러오기
- xml 타입 전용 방식은 없다.
- get or post 메소드를 통해 적용가능
- 대부분 get 방식 (파라미터 값이 없으면 무조건 get 방식)
- get함수를 사용하여 xml파일을 받는다.
- $(data).find(‘entry’) → xml파일안의 모든 entry → each함수를 통해 하나씩 대입한다.
- $entry.attr(‘term’) = entry태그안의 term 속성값
- 만들어진 html을 dictionary의 자식으로 삽입한다.
JSP 타입 파일 불러오기
- jsp파일의 term값에 클릭한 a태그의 속성 term의 값을 넣는다.
- 나온값들이 function의 매개변수인 data에 담긴다.
- 담긴 data들이 id=”dictionary”의 html값으로 들어간다.
- return false; 를 통해 a태그의 defualt이벤트를 제거
Ajax 전역함수
- 전역 이벤트가 발생시 어떠한 DOM엘리먼트에도 핸들러가 할당됨
- 함수는 ajax요청이 처리되는 각 단계나 요청성공 혹은 실패시 수행한다.
- success 이벤트를 성공 시 실행 (항상 필요)
- serialize() : 데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩한다.
선택되지 않은 체크박스나 라디오 버튼, 선택된 옵션이 없는 드롭다운, 비활성화 된 컨트롤은 변회시 무시
(form 안의 submit 이벤트에만 사용가능)
- id=”letter-f”의 form의 입력된 text가 data에 담긴다.
- 담긴데이터가 success 함수에 의해 dictionary의 html 들어간다.
예제
- 입력버튼 클릭 시, json타입으로 form의 값들을 jsp에 담는다.
- 모두수행되면 , successHandler 실행
- 담긴 내용들로 div 태그를 작성한다. List에 자식으로 귀속하여 게시한다.
- $(.quantity input)의 value가 변하면 메소드를 실행한다.
- replace(/^[^\d.]/ , ‘’) : 숫자로 시작하지 않으면 ‘’(삭제함)
- quantity or cost에 parseInt로 변환하여 값을 저장한다.
- 해당값을 계산하여 total_cost, total_quantity값에 넣어준다.
- total_cost, total_quantity 의 변수 선언 위치에 주의해야한다.
슬라이드쇼
