[JavaScript] Ajax, XML, JSON

5. jQuery, Ajax, JSON

5.1 jQuery

자주 사용되는 자바스크립트 라이브러리
write less, do more
코딩량이 매우 절감됨
2006년 존 레식(John Resig)이 발표
https://jquery.com 에서 다운로드

5.1.1 jQuery의 버전

1.x 버전: 구버전 브라우저까지 지원되는 버전
2.x 버전: 구버전 브라우저(Internet Explorer 6, 7, 8 등)을 지원하지 않음
3.x 버전: 2014년부터 개발, 더 빠르고 풍부한 API

5.1.2 jQuery를 사용하는 방법

다운로드 받아서 사용할 경우

<script src="jquery-3.2.1.js"></script>

다운로드 받지 않고 사용할 경우

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

5.1.3 기본 문법

선택한 엘리먼트에 어떤 동작을 수행

/**
 * $: jQuery에서 정의 및 접근에 사용
 * (selector): HTML 객체(태그)
 * action(): 해당 객체에서 수행할 동작
 */
$(selector).action();

* 선택자: HTML 객체(태그)를 선택함

$("#name"): id가 name인 태그를 선택
엘리먼트를 선택해 작업을 처리하기 위해 사용
$( ) 안에는 태그명, 태그의 id 속성값, class 속성값 등이 올 수 있음
엘리먼트명 사용: $("p")
id 속성 값 사용: $("#test")
class 속성 값 사용: $(".t1")

5.1.4 일반적인 jQuery 구조

DOM이 로딩 완료되면 jQuery 함수가 자동으로 실행됨

$(function() {
	// 실행할 코드
});

5.1.5 이벤트 처리

$(선택자).이벤트(실행할 코드);
$(선택자).bind("이벤트", 실행할 코드);

5.1.6 이벤트의 종류

click
mouseover
focus
blur

5.1.7 애니메이션 효과

show("slow"), show("fast")
hide(): 숨기기
toggle(): show/hide를 교대로
animate(): 애니메이션 효과
stop(): 애니메이션 중지
fadeIn(): 페이드인 효과
fadeOut(): 페이드아웃 효과
slideUp(): 슬라이드를 올림
slideDown(): 슬라이드를 내림

5.1.8 jQuery를 이용한 DOM 변경

$(선택자).text(): 텍스트를 가져옴
$(선택자).text("변경할 내용"): 텍스트 변경
$(선택자).html(): html 코드를 가져옴
$(선택자).html("변경할 내용"): html 코드를 변경
$(선택자).val(): 입력 필드의 값을 가져옴
$(선택자)val("변경할 내용"): 입력 필드의 값을 변경함
$(선택자).attr("변경할 속성"): 요소의 속성 가져오기
$(선택자).append("추가할 요소"): DOM 요소 추가
$(선택자).remove(): DOM에서 삭제 처리

5.1.9 CSS 조작

$(선택자).css("속성"): CSS 속성 가져오기
$(선택자).css("속성", "값"): CSS 속성 값 변경

5.2 Ajax(Asynchronous JavaScript and XML)

클라이언트가 서버와 적은 양의 데이터를 교환
빠르고 동적인 웹 페이지를 만드는 데 유용한 기술
사용 예: 구글 맵, 키워드 검색 기능 등

5.2.1 동기식과 비동기식

Synchronized : A 작업이 종료된 후 B 작업을 시작할 수 있음(single thread)
Asynchronized : A 작업과 B 작업을 동시에 실행 가능(multi thread)

5.2.2 비동기식 서버 요청과 관련된 메서드

사용 예

$.ajax({
    type: "POST",
    url: "loginPro.jsp",
    data: query,                 // 전송할 데이터
    success: function(data){}    // 정상적으로 처리되었을 때의 코드
});

5.3 XML과 JSON

XML(eXtensible Markup Language)

웹 상에서 데이터를 교환하기 위한 표준 형식

XML 문서를 만드는 방법

루트 노드 이름 결정: <result>
하나의 row 단위 node 이름 결정: <item>
row 하위에 들어갈 child node 이름 결정

<item>

<item>
	<area>부산</area>
	<sales>100</sales>
<item>

- 태그에 종속적인 값은 속성(attribute) 지정 <item id="아이디값">

XML의 기본 문법

- 인코딩 속성은 다국어 표현을 위해 UTF-8 사용

<?xml version="1.0" encoding="utf-8" ?>

- 루트 태그는 하나만 존재

- 태그는 대소문자 구별

- 태그를 열었으면 반드시 닫을 것

<mx:Button></mx:Button> : 하위 노드가 있을 경우

<mx:Button /> : 하위 노드가 없을 경우

- 태그는 서로 엇갈리면 안됨

- 태그의 속성은 큰 따옴표나 작은 따옴표로 표시

- 태그의 속성은 하위 엘리먼트로 분리할 수 있음

<mx:Button><mx:label>test</mx:label></mx:Button>

<mx:Button label="test" />

* XML 파싱 : XML 문서를 읽어들여 문법을 검증하고 데이터를 이용할 ? 처리하는 과정

- XMl 파서 종류 : DOM, SAX

* well-formed와 valid 문서

- well-formed : 기본문법 준수

- valid : well-formed + DTD(Document Type Definition, 문서규격) 준수

* 주석 : <!- 주석 -->

* 네임스페이스 : 동일한 태그를 구분짓는 접두어

- xmlns:네임스페이스명="URI"

네임스페이스가 정의된 노드의 하위노드는 그 네임스페이스를 써야 함

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

Well-formed XML Document

Valid XML Document

* 하나의 유일한 루트 노트를 가짐

* 시작 태그와 끝 태그가 반드시 한쌍

* 엘리먼트간에 겹쳐서는 안된다.

→ 이외의 XML Syntax 규칙을 준수

* Well-formed XML의 요건을 모두 충족

* DTD에 의해 미리 정의된 문서 구조 준수

<?xml version="1.0"?>

<message>

<from>Sunny</from>

<subject>Reminder</subject>

<body>Hello, XML!</body>

</message>

<?xml version="1.0"?>
<!DOCTYPE message SYSTEM "msg.did">