KOSTA 교육 (jQuery, Ajax, JSON, XML, JSP, get(), load(), post(), ajax(), getJSON())

배운 내용

1. jQuery 활용 Ajax(JSON, XML, JSP)

 

1. jQuery를 활용한 Ajax

jQuery를 활용하여 Ajax를 보다 편리하게 이용할 수 있다.

커맨드 종류

load 함수

• 비동기 방식으로 특정 위치에 있는 파일의 객체 또는 문서를 불러올 수 있는 Ajax 메소드이다.
• 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치한다.

get 함수

• get함수는 데이터 값이 없을 때 사용하며 전달받은 주소로 GET 방식의 HTTP 요청을 전송한다.

post 함수

• 전달받은 주소로 POST 방식의 HTTP 요청을 전송함.

getJSON 함수

• 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음.

load 예제

load 예제

• letter-a 의 a를 클릭하면 dictionary가 숨겨지고 load 함수를 사용하여 a.html의 데이터를 불러오고 function을 사용하여 클릭한 this에 대해 fadeIn()을 하면 천천히 나타난다.

get 예제

get 예제 1

• get으로 d.xml파일을 불러오고 dictionary의 값을 비운다.
  다음 data 중에서 entry를 찾아 each로 각각 적용시킨다.
• $entry로 entry를 클릭한 this를 선언하고 html에 entry 클래스를 선언하고 각 class별로 attr을 사용하여 term, part의 속성값을 추가한다.
  (여기서 attr은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다.)
• append를 이용하여 html을 dictionary뒤에 추가한다.

get 예제 2

• jsp파일을 불러오는 예제이다. 선택한 term의 text가 출력된다.
• Key와 value값을 가지고 있다.

getScript예제

getScript 예제

• JavaScript의 파일을 불러오는 역할을 한다.

getJSON 예제

getJSON 예제

• getJSON은 JSON 데이터를 불러들이는 역할을 한다.
• 각각의 data를 html에 선언하고 출력한다.

Ajax예제

ajax 예제

• ajax 함수는 비동기식 Ajax를 이용하여 HTTP 요청을 전송한다.
• Key와 Value값으로 이루어져 있다.
• url : 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
  type : HTTP 요청과 함께 서버로 보낼 데이터
  dataType : 서버에서 보내줄 데이터 타입
  type : 서버에서 보낼 타입
• serialize()는 데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩을 자동으로 해준다.
  때문에 data를 선택된 form을 serialize해서 출력한다.
• ajax 함수 안에 success를 선언하기도 하지만 가독성을 높이기 위해 변수만 선언해주고 해당 변수의 함수는 밖에서 처리한다.

자동 계산 페이지 예제

계산 페이지 예제

• change는 input값을 바꾸면 실행되는 함수이다. 저기에 총 금액과 총 개수를 두어 input값이 변하면 변할 수 있도록 선언하였다.
• tr의 price의 값을 꺼내주고 문자열을 제외하고 소숫점 포함 출력을 위하여 parseFloat로 형변환을 한다. 그리고 정규표현식을 사용하여 출력한다.
  삼항연산자를 통하여 안전검사를 한 번 해준다.
• input값을 출력하는데 parstInt로 형변환을 하고 val()을 통하여 value값이 있으면 출력하도록 한다. 동일하게 삼항연산자를 통하여 안전검사를 해준다.
• 가격 책정을 price와 quantity를 곱하면 되고 text로 소숫점 2자리 까지 나타낸다.
• 총 가격과 총 개수는 cost를 계속 더한 값, quantity를 계속 더한 값이 되겠고 이는 각 quantity, cost 클래스에 text로 나타내주면 되겠다.