[ajax] 비동기 통신(1)

비동기 통신(Ajax, Asynchronous Javascript And XML)

: Ajax는 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법.

데이터는 주로 json(Javascript Object Notation)형태로 전달된다. (관련기법 SPA:Single Page Application)

• 기존의 웹 페이지 구현방식 

    -  page redirect 처리 (서버에 request를 송신하는 동기식 통신)

       : 원래 웹페이지는 사용자에게 새로운 내용을 보여주기 위해 반드시 페이지의 이동이나 새로고침이 필요하다.

• 비동기처리로 인해 페이지는 사용자 이벤트를 처리하면서 전체 페이지가 아닌 일부분만 업데이트 할 수있게 된다.

1) 페이지의 일부분을 업데이트 하기 위한 정보를 서버에 요청할 수있다.

2) 서버로부터 받은 데이터로 작업을 한다.

* jquery는  Ajax 요청을 생성하고 서버로부터 전달받은 데이터를 처리하는 과정을 손쉽게 만들어준다.

• Ajax가 사용되는 다양한 방법

ex) 라이브 검색(검색어 입력과 동시에 자동완성어가 나타남)

     장바구니 아이템 추가시 페이지 이동을 하지 않고 아이템 추가완료 알림메시지

      폼 작성시 입력과 동시에 중복 및 오류를 확인

• Ajax 요청은 동일 소스 정책을 지켜야한다. 동일소스 정책은 자바스크립트를 비롯한 클라이언트 스크립트 언어에 적용되는 보안개념이다. 페이지에 있는 스크립트가 스크립트와 같은 서버에서 가져온 요소의 속성과 메서드에 접근하는것은 허용하지만 스크립트와 다른 서버에서 가져온 요소에는 접근하지 못하게 막는것, xml, json파일은 html파일과 같은 서버에 있어야한다. (예외의 상황에는 jsonp를 사용한다.)

• Ajax 단축 메서드

- get()

- getJSON()

- getScript()

- post()

- load() : 어떤 요소에서든 호출할 수 있고 반환받은 데이터는 해당 요소 안에 들어간다.

• Ajax 데이터 타입

  1)  Xml 

데이터와 그 구조를 설명하는데 쓰이는 엄격하지만 유연한 마크업 언어.

       정보를 저장하는데 쓸 수도 있고, 데이터를 전송할 때 형식을 맞추는 용도로도 쓸수있다.

  2) JSON 

      효율적이며, 호환성이 높은 포맷으로 서버에서 데이터를 더 쉽게 가져올수 있다. xml에 비해 만들기도 쉽고 읽기도 쉽다.

  3) HTML

• jquery는 ajax 요청을 생성하고 서버로부터 전달받은 데이터를 처리하는 과정을 손쉽게 만들어준다.

참고 : https://opentutorials.org/course/3281