Ajax

sunm309·2021년 4월 17일
0

AJAX란, JavaScript의 라이브러리중 하나

Asynchronous Javascript And Xml (비동기식 자바스크립트와 xml)의 약자

  • 자바스크립트를 통해서 서버에 데이터를 요청하는 것

  • AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다.

  • Ajax 기본 구조
    Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

$.ajax({
  type: "GET", // GET 방식으로 요청
  url: "여기에URL을입력", // 요청할 url
  data: {},	// 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
  success: function(response){
    console.log(response)
  }
})
  • GET
    통상적으로 데이터 조회(Read)를 요청할 때
    예) 영화 목록 조회

  • POST
    통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
    예) 회원가입, 회원탈퇴, 비밀번호 수정


동기 (Synchronous : 동시에 일어나는)

  • 동기는 말그대로 동시에 일어난다는 뜻
  • 요청과 그 결과가 동시에 일어난다는 약속
  • 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 한다.

비동기 (Asynchronous : 동시에 일어나지 않는)

  • 동시에 일어나지 않는다는 것을 의미
  • 요청과 결과가 동시에 일어나지 않을거라는 약속
  • 요청한 그 자리에서 결과가 주어지지 않음

장단점

동기방식

  • 설계가 매우 간단하고 직관적
  • 결과가 주어질때까지 아무것도 못하고 대기해야하는 단점

비동기방식

  • 동기보다 복잡
  • 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점

JSON

  • 데이터를 저장하거나 전송할 때 많이 사용
  • JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용
  • JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법
  • key / value가 존재
  • 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.

  • JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.

  • 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐이다.

처음 Ajax 강의를 들었을 땐 이거는 기본 구조가 이렇고 구조 안에 이 부분은 이렇게 작성하고 코드를 따라치면서 했었는데 이번에 다시 보면서 내가 지금 ajax가 정확히 뭔지 알고 코드를 작성하고 있는지 의문이 들어서 구글링을 통해서 좀 더 알아봤다. ajax는 클라이언트가 서버에 데이터를 요청하고 그 결과를 웹 페이지의 일부분에만 표시할 수 있는 개발 기법 중에 하나라고 한다. 새로 고침 없이 페이지 일부의 데이터를 바꿀 수 있는 것이 장점이라고 하는데 아직은 간단한 연습문제로만 공부를 해서 그런지 그렇게 와닿지는 않는 것 같다. 지금은 일단 ajax를 이용했을 때 어떠한 장단점들이 있는지 알고만 있는 게 좋을 것 같다..!

0개의 댓글