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

18.12.17(월)

 

배운 내용

 

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

---

1. jQuery를 활용한 Ajax

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

 

커맨드 종류

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

 

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

 

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

 

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

 

load 예제

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

 

get 예제

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

 

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

 

getScript예제

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

 

getJSON 예제

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

 

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로 나타내주면 되겠다.

오늘 교육 간 느낀점

오늘은 jQuery중의 가장 중요한 부분을 하였다. 함수를 이용하여 각 파일들을 호출하여 그에 맞는 웹에서의 동작들을 구현하는 예제들을 실습하였다.
사실 지금까지 각 과목들을 하면서 어디에 어떻게 쓰이는지 자세히 잘 몰랐는데 이렇게 연결하여 직접 사용해보니 어떤 방식으로 사용되는지 알게되는 좋은 시간이었다.

 

내일이면 Jquery가 끝나고 미니 프로젝트를 시작하게 된다. 사실 벌써 Web이 끝난 것에 대해서 많이 설레기도 하고 두렵기도 하다.
바로 악명높은 서버들이 나를 기다리고 있기 때문인데… 
기초적인 Java부터 다시 공부하고 서버까지 잘 이어진다면 무리없이 잘 해나갈 수 있을 것이라 생각한다.
내일도 화이팅!!