[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>

 <to>Do-Hoon</to>

 <from>Sunny</from>

 <subject>Reminder</subject>

 <body>Hello, XML!</body>

 </message>

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

 <message>

 <to>Do-Hoon</to>

 <from>Sunny</from>

 <subject>Reminder</subject>

 <body>Hello, XML!</body>

 </message>

 

JSON(JavaScript Object Notation)

텍스트 기반의 데이터 교환 방식

Hessian RPC Services. What’s not to like? . (2010). Retrieved from http://safehammad.com/tag/hessian/.

 

JSON이 XML보다 입출력 속도가 빠른 장점이 있음

 

공공데이터 개발 - JSON 타입 생성 및 XML을 JSON으로 변환 XML to JSON . (2015). Retrieved from https://blog.naver.com/yandul83/220432077444.

'programming > javascript' 카테고리의 다른 글

[JavaScript] jQuery  (0) 2018.11.21
[JavaScript] Mobile WEB  (0) 2018.10.18
[JavaScript] Ajax, XML, JSON  (0) 2018.07.04
[JavaScript] 자바스크립트 객체  (2) 2018.07.04
[JavaScript] DOM과 이벤트 처리, 입력검증  (5) 2018.07.02
[JavaScript] 자바스크립트 객체  (0) 2018.04.05

댓글(0)

Designed by JB FACTORY