필기용 블로그

○Ajax

 ▷Asynchronous Javascript And Xml

 ▷XMLHttpRequest 객체를 이용해서 페이지 일부의 데이터만 로드하는 기법

 ▶과거 방식 (Synchronous Request)

  ▷페이지 일부의 변화에도 전체 페이지를 새로 받아옴.

  ▷받는동안 일시적으로 빈 페이지가 로딩됨. (새 패이지를 받는 동안 대기해야함)

  ▷느리고 불편함. 대기동안 클라이언트와 상호작용할 수 없음.

 ▶Asynchronous Request

  ▷각 Entries가 독립적이고 동적으로 관리된다.

  ▷에러가 발생하면 비동기적으로 문제를 보여주고, 서버에 전달한다.

  ▷전 데이터에 기반하여 새로운 값으로 field를 채울 수 있다.

 ▶Ajax 방법

  ▷XMLHttpRequest.open( "GET", url, true) : 비동기식 통신 (false: 동기식 통신)

  ▷XMLHttpRequest.addEventListener("readystatechange", Callback function, false) : 이벤트 핸들러 추가.

   ▶readystatechange : readystate가 변할때 호출

    ▷0: request not initialized (open)

    ▷1: sever connection established (send)

    ▷2: request received

    ▷3: processing request

    ▷4: request finished and response is ready (전송 완료)

  ▶XMLHttpRequest.status

   ▷200 : 성공

   ▷403 : Forbidden (금지됨)

   ▷404 : Page not found (페이지가 없음)

   ▷500 : Error

  ▶Callback function

   ▷데이터를 받았을 때 처리할 함수.

   ▷비동기적이다. (데이터를 받을때 까지 기다리지 않는다.)

 ◎Example

●DOM (Document Object Model)

 ▷XML 데이터를 Tree구조로 저장하는 Parser (DOM parser)

 ▷HTML DOM과 비슷한 구조를 가진다.

 ▷문서 내 모든 요소의 객체, 속성, 메소드를 정의

 ▶Tree 구조

  ▷요소 노드 : 속성 노드와 텍스트 노드 또는 또 다른 요소 노드를 자식으로 가짐 (그 자체는 값을 가지지 않음)

  ▷속성 노드 : 속성의 값을 가지는 노드

  ▷텍스트 노드 : 문자열(요소의 문자열)을 값으로 가지는 노드

 ▶XMLHttpRequest

  ▷서버로 부터 XML 데이터를 전송받아 처리함.

  ▶문서 요청

   ▷status : 문서의 상태 (200:존재 / 404:존재하지 않음)

   ▷readyState : XMLHTTPRequest 객체의 상태 (UNSENT / OPENED / HEADERS_RECEIVED / LOADING / DONE)

   ▷open("GET", url, true/false) 와 send()를 통해 요청 전달 (true : 비동기적 / false : 동기적)

  ▶데이터 해석

   ▷responseText : 응답받은 데이터를 문자열로 저장

   ▷responseXML : 응답받은 데이터를 XML DOM으로 저장

○JS 노드 접근 메소드/속성

 ▶Common Node

  ▶멤버 변수

   ▷nodeType 종류

   ▷nodeValue 종류

   ▷nodeName 종류

  ▷메소드 (노드의 추가/제거)

 ▶NodeList

  ▷멤버 변수

 ▶Document

 ▶Element Node

 ▶Attribute Node

 ▶Text Node

▶print(String)

 ▷문자열을 출력한다. (다른 Type은 문자열로 Conversion)

 ▷html태그를 넣을 수 있다. ex) "<p> ~ </p>"

 ▷. (concattion operator: 문자열 연결 연산자)를 통해 문자열들을 연결할 수 있다.

▶gettype($a)

 ▷해당 변수의 타입을 반환한다.

 ▷"string", "double", "integer" ...

▶settype($a, Type)

 ▷해당 변수의 타입을 Type로 설정한다. ("integer", "double", "string" ... )

 ▷변수의 타입이 영구적으로 바뀐다. ( (type) $a: 일시적인 변경)

 ▷Type conversion에서 정보의 손실이 있을 수 있다.

▶strcmp(String1, String2)

 ▷문자열 둘을 사전순 비교한다.

 ▷return >0 : String1이 사전순으로 크다 (뒤에 있다) / <0: String1이 사전순으로 작다 (앞에 있다)

 ▷=0: String1과 String2가 같다.

▶preg_match(RegEx, String, matches)

 ▷String 문자열에서 RegEx의 정규식 표현을 만족하는 문자를 반환한다.

 ▷RegEx: 리터럴 '/' 으로 감싸는 문자열로 표현한다.

 ▷matches[0]: 만족하는 텍스트 전체 / matches[n]: 만족하는 텍스트 부분만 ( n번째 ()부분? )

 ▷참고-정규식: https://akai-tenshi.tistory.com/57?category=800451

▶preg_replace(RegEx, replaceString, inputString)

 ▷inputString에서 RegEx를 만족하는 문자열들을 replaceString으로 교체함.

 ▷RegEx: 리터럴 '/' 으로 감싸는 문자열로 표현한다.

○DOM (Document Object Model)

 ▷HTML 객체들의 Tree 구조

 ▷XML과 HTML을 위한 object-based, language-neutral API

 ▷웹 페이지가 load되면, 브라우저는 DOM을 자동으로 생성함.

 ▷DOM을 통해 JavaScript가 HTML의 거의 모든 요소를 조작 가능함.

  ▷elements, attributes, CSS styles, events 의 추가,제거,수정

 ▶HTML element를 하나의 객체(object)로써 정의함.

  ▷HTML element의 속성을 내부 변수로써 가짐.

  ▷HTML element에 접근하기 위한 메서드

  ▷이벤트들

 ▶Tree of Object

  ▷Root: document

  ▶일반적인 Node는 총 5개의 포인터 필요.

   ▷부모(parent)를 가리킴

   ▷형제(sibling)를 가리킴 (Next, Previous)

   ▷첫 자식(child)을 가리킴

   ▷마지막 자식(child)을 가리킴

  ▷textNode는 크기가 가변적

 ▶관련 함수/메서드

  ▷Node

  ▷Document

  ▷Element

○JSON (JavaScript Object Notation)

 ▷자바스크립트 객체 표기법

 ▷현재는 거의 세계 표준으로, 인터넷 상에서 데이터를 주고받는 방식

 ▷간단한 형식이며, 만들고, 읽고, 해석하긱 쉽다

 ▶형식

  ▷{name: value}

  ▷중괄호 안에 이름과 값의 짝들을 적음.

  ▷배열은 대괄호 안에 적음 -> [value0, value1, value2]

  ▷문자열, 수, JSON Object, bool, null 등이 올 수 있음. 

  ▷JSON의 배열, JSON의 JSON 등 모두 가능

  ▷.name 의 형태로 접근가능.

 ▶전달

  ▶JSON.stringify(객체)

   ▷객체 -> 문자열로 변환

   ▷문자열을 localStorage.setItem(key, value) 등을 이용해서 저장함.

   ▷ { name: "John", age: 31, city: "New York" } -> '{"name":"John","age":31,"city":"New York"}'

 ▶해석

  ▶JSON.parse(문자열)

   ▷문자열 -> 객체로 변환

   ▷저장된 문자열을 JS객체로 변환 가능

   ▷'{"name":"John","age":31,"city":"New York"}' ->  { name: "John", age: 31, city: "New York" }