jQuery / Ajax / JSON

js vs jQuery

js

document.getElementsById("myPara").innerHTML="안녕하세요?"

jQuery

$("myPara").html("안녕하세요?");

jQuery 개요

jQuery 문장의 구조

$(selector).action();
//$기호는 jQuery를 사용한다는 의미이다. $대신에 jQuery라고 적어도 된다.
//$(selector)는 특정한 HTML 요소를 선택한다.
//선택된 요소에 어떤 동작이 수행된다.

일반적인 jQuery 구조

$(document).ready(function(){

//Dom이 로딩되어서 준비가 되면 작업을 시작한다.
//구체적으로 jQuery 메서드를 호출한다.

});

Ajax 개요

: 서버와 데이터를 교환하는 기술의 하나
: 클라이언트가 서버와 적은 양의 데이터를 교환하여 비동기적으로 HTML 페이지를 업데이트할 수 있다.
-> 빠르고 동적인 대화형 웹 페이지를 만드는 데 유용

• HTML (콘텐츠)
• CSS (스타일)
• 자바스크립트, DOM (동적인 출력과 상호작용 담당)
• XML (데이터를 전송하기 위한 형식으로 사용)
• XMLHttpRequest 개체 (서버와 비동기적으로 데이터를 교환하기 위해 사용)

Ajax 동작 원리

: 페이지와 상호작용하는 사용자를 방해하지 않으면서 비동기적으로 웹 서버와 통신할 수 있는 기능

• XMLHttpsRequest 객체
  : 배경에서 서버와 데이터를 주고받을 때 사용된다.
  => 이것은 즉 전체 페이지를 다시 로드하지 않아도 웹 페이지의 일부를 업데이트하는 것이 가능하다는 의미.
  
• 서버로 요청 보내기
  : req.open(method, url, async);
  - method : 요청의 타입 ("GET" or "POST"( setRequestHeader() : HTTP 헤더 추가))
  - url : 서버에서 파일의 위치
  - async : 비동기 여부 (true or false)
  : send() : 요청을 서버로 전송

jQuery를 이용하여 Ajax 사용하기

get()

$.get(URL, callback);
//URL :  서버로부터 로드를 원하는 URL
//callback : get()이 완료된 후에 호출되는 함수

post()

$.post(URL, data, callback);
//data : request 요청과 함께 보내지는 key/value 형태로 되어 있는 쿼리 문자열

load()

: 서버로부터 데이터를 로드해서 선택된 요소에 반환된 데이터를 집어 넣는다.

$(selector).load(URL, data, callback);

JSON

: JavaScript Object Notation)
: 텍스트 기반의 데이터 교환 형식이다.
- JSON의 구문
- 객체 : 이름/값 형태를 갖는 쌍의 집합, 중괄호 이용
- 배열 : 값의 순서화된 리스트, 대괄호 이용

• JSON의 처리
  - JSON은 자바스크립트의 문법을 채용했기 때문에, 서버로부터 받은 문자열을 자바스크립트에서 eval 명령으로 곧바로 처리할 수 있다. 이런 특성은 자바스크립트를 자주 사용하는 웹 환경에서 유리하다.
  • eval()을 사용하는 처리 방법

    eval("(" + s+")");
    

  : 자바스크립트 컴파일러를 사용하여 JSON 텍스트를 구문 분석하고 자바스크립트 객체를 생성한다. 구문 오류를 방지하려면 텍스트는 괄호 안에 싸여 있어야 한다.
  => 외부에서 악성 코드가 유입될 수 있다. (JSON 데이터 형식뿐만 아니라 모든 자바스크립트 문장을 컴파일하고 실행할 수 있다. 따라서 이것은 잠재적인 보안 문제를 일으킬 수 있다)
  • 전용 파서를 사용하는 처리 방법

    JSON.parse(s);

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 (천인국 저)