Skip to content

2. 2. AJAX & JSON.md

Latest commit

 

History

History
92 lines (77 loc) · 3.43 KB

2. 2. AJAX & JSON.md

File metadata and controls

92 lines (77 loc) · 3.43 KB

AJAX(Asynchronous JavaScript and XML)

전체 페이지를 재로딩할 필요없이 웹페이지의 일부만 업데이트할 수 있다.
AJAX는 새로운 언어가 아니라 자바스크립트의 일부이다.
XMLHttpRequest 오브젝트를 이용하여 서버와 데이터를 교환한다.
그 외에도 CSS, XML을 사용하며 정보교환은 JavaScript/DOM를 사용한다.
AJAX 애플리케이션은 브라우저와 플랫폼이 독립적이다. (특정 브라우저나 플랫폼에서 돌아가는 것이 아니다.)

XMLHttpRequest 오브젝트

open(method, url, async)

  • method: request 타입 - GET or POST
  • url: 서버 위치
  • async: true(asynchronous) or false(synchronous: 서버로부터 답 기다림.)
    synchronous 경우에는 onreadystatechange event가 필요없다. (send()로도 충분)

send(string)

  • string: POST request에서만 사용된다.

GET or POST

GET

POST보다 심플하고 빠르다. 대게 GET을 이용한다.

POST

[POST만 사용해야 하는 경우]

  • cached file이 옵션이 아닌 경우 (서버에 있는 파일이나 DB에 업데이트해야 함.)
  • 서버에 많은 데이터를 보내야 할 경우 (POST는 크기제한이 없다.)
  • 사용자의 입력값을 보내야 할 경우, GET보다 안전하게 보낼 수 있다. (GET은 url상에 data가 다 보인다.)

setRequestHeader(header, value)

서버로부터 data를 요구할 때 사용한다. request에 HTTP 헤더를 추가한다.

  • header: header name
  • value: header value

responseText, responseXML: XMLHttpRequest 오브젝트의 property. 서버로 부터 받는 response

onreadystatechange event

: readyState가 바뀔 때(0 ~ 4)마다 발생한다. (readyState는 XMLHttpRequest의 상태를 알고 있다.)

  • 0: request 아직 시작 안 한 상태
  • 1: 서버와 연결됨
  • 2: request를 받음 (data는 아직 받지 않음)
  • 3: request를 프로세싱 (data 일부 받은 상태)
  • 4: request가 끝나고 response가 준비됨 (모든 데이터 이용가능하다.)
    status
  • 200: 'OK'
  • 404: Page not found

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200) { // the response is ready
    document.getElementById("div1").innerHTML=xmlhttp.responseText;
  }
}

JSON(JavaScript Object Notation)

: Language independent, hierarchical, "self-describing"(human readable) and easy to understand
JSON syntax


{"employees":[
    {"firstName":"John",  "lastName":"Doe"},
    {"firstName":"Anna",  "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

[]: array
{}: Object
데이터는 콤마로 구분가능하다.

XML syntax


<employees>
    <employee>
        <firstName>John</firstName>  <lastName>Doe</lastName>
    </employee>
    <employees>
        <firstName>Anna</firstName>  <lastName>Smith</lastName>
    </employee>
    <employees>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employee>

XML과 다른점

  • JSON은 end tag를 쓰지 않는다.
  • 쓰고 읽기 짧고 빠르다.
  • array를 이용할 수 있다.
  • 표준 자바스크립트 함수에 의해 parsing될 수 있지만 xml은 xml parser로만 가능하다.