Javascripts -Ajax란? Json?

Ajax가 무엇인지 알기 전에 웹에서의 통신과 자바스크립트에 대해 알아보겠습니다.

통신?

웹에서 통신은 웹 브라우저와 서버 간에 Data를 주고 받는 것을 의미합니다.

html 파일들이 브라우저에게 전송이 되고, 브라우저는 해당 파일을 해석하여

컴퓨터 화면에 띄워주는 것(rendering하는 것)입니다.

자바스크립트란?

JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어입니다.

HTML과 CSS와는 다른,

웹 브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어입니다.

프로그래밍언어는 컴퓨터와 인간이 의사소통하기 위해 나타난 것입니다.

그리고 의사소통을 하기 위한 규칙이 언어별로 있는데, 이를 문법이라 합니다.

 

이는 HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를

해결하기 위해서 네스케이프에서 만들어졌다고 합니다.

(출처: 생활코딩)

 

*HTML이 뭔데요?

HTML(HyperText Markup Language)이란 하이퍼텍스트 마크업 언어인데요.

마크업이란 태그를 사용해서 문서에서

어느 부분이 제목이고 본문인지, 어느 것이 사진인지 등을  표시하는 것을 의미합니다.

 

웹 브라우저는 웹 편집기(vs코드)로 작성한 웹 문서(.html 등)를 확인하는 프로그램입니다.

구글, 인터넷 익스플로러, 파이어폭스, 사파리 등이 있네요.

Ajax는 무엇인가?

Asynchronous Javascript and Xml의 약자입니다. 해석을 해보자면,

비동기적 자바스크립트와 xml이라는 의미네요.

 

이는 자바스크립트의 라이브러리 중 하나로 비동기적(Asynchronous)으로

서버와 브라우저가 데이터를 교환할 수 있습니다.

 

원래 서버로부터 웹페이지가 반환될 때, 전체 페이지를 갱신해야 하는데,

페이지에서 일부분만 고칠 때 전체 페이지를 가져오면 자원이 낭비되겠죠?

(그 안에 있는 많은 script, jpg 등의 컨텐츠를 새로 불러와야 하니까!)

 

Ajax는 html페이지 전체가 아니라 필요한 부분만을 갱신할 수 있도록 XMLHttpRequset 객체를 통해서 요청합니다.

Json이나 xml 형태로 최소한의 필요한 데이터만 받아서 갱신합니다.

그러니 전체를 렌더링하는 것보다 빠르고, 화면이 부드럽게 보이게 되겠죠?

 

동기 vs 비동기

동기는 요청과 결과가 한 자리에서 동시에 일어나는 것으로,

서버로 데이터를 요청하고 응답이 오는 시간동안 작업을 멈추고 기다리는 것을 말합니다.

 

http 프로토콜에서는 기본적으로 클라이언트 쪽에서 request를 보내고 server의 response를 받으면 이어졌던 연결이 끊기게 설계가 되어 있습니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response로 페이지 전체를 다시 받게 됩니다.

비동기는 요청과 결과가 동시에 일어나지 않는 것으로,

서버로 데이터를 요청하고 응답이 오는 시간동안

웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후 작업을 진행합니다.

웹페이지를 리로드하지 않고 데이터를 불러오는 방식을 의미합니다.

 

Ajax 동작 방식

브라우저가 Data를 요청 및 전송하면, 서버는 받은 Data를 views.py에서 처리합니다.

그리고 Json이라는 형식으로 다시 브라우저에게 Data를 전송합니다.

브라우저는 처리 결과를 받고 event를 발생시켜 비동기적으로 html 파일의 일부를 변경시킵니다.

 

 

Json?

JavaScript Object Notation로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식입니다.

자바스크립트의 객체를 만들 때 사용하는 표현식입니다.

 

태그로 표현하기 보다는 중괄호{} 형식으로 하고, 값을 ','로 나열합니다.

딕셔너리처럼 key, value가 존재하며 key값이나 문자열은 항상 쌍따옴표를 이용하여 표기해야 합니다.

{
  "employees": [
    {
      "name": "Surim",
      "lastName": "Son"
    },
    {
      "name": "Someone",
      "lastName": "Huh"
    },
    {
      "name": "Someone else",
      "lastName": "Kim"
    } 
  ]
}

 기존에 사용되어졌던 xml 보다 가볍습니다.

또한 네트워크 상에서 전송 할 때는 string으로 직렬화 과정을 거칩니다.

수신 시에는 string을 다시 역직렬화하여 객체 형식으로 바꾸는 과정을 거칩니다.

 

 

XML - json

데이터를 나타낼 수 있는 방식들 입니다.