jquery ajax 통신

 Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.

 

Ajax의 장점

1. 웹페이지의 속도향상

2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능하다.

3. 서버에서 Data만 전송해면 되므로 전체적인 코딩의 양이 줄어든다.

4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

 

 Ajax 의 단점

1. 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야한다.)

2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.

3. XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다

데이터 요청 타입 

1. GET 방식 : 데이터 조회 (ex.영화목록 조회 등)
2. POST 방식 : 데이터 생성 등 클라가 서버에게 데이터를 줄때 (ex. 로그인 등)
3. PATCH 방식 : 데이터 변경 
4. PUT 방식 : 데이터 변경
5. DELETE 방식 : 데이터 삭제

 

미니프로젝트를 진행하면서 ajax를 사용할 기회가 생겨서 찾아보고 공부해 봤습니다. 찾다가 ajax에 대해서 잘 정리 되어 있는 글이 있어 가져와 봤습니다. 프로젝트 진행하면 처음으로 ajax 통신을 해봤는데 백엔드도 배우면서 서버랑 클라이언트가 어떻게 통신 되는지 알게 되었고 파이썬에서 어떤 방식으로 받아서 정보를 반환하는지 알게 되었습니다. 

function request(){
 $.ajax({
        type: "GET", // 데이터통신 타입
        url: "/api/profile", // 데이터가 이동되는 경로 기준 url과 동일하다 
        data: {
        	// 프론트에서 백엔드 보내고 싶은 데이터 
            backData:frontData
        },
        success: function (response) {
        	// 데이터 통신이 성공 했을때 반환되는 데이터가 함수 
            console.log(response)
        }
    });
  }

 

 

참조 블로그 https://coding-factory.tistory.com/143

[Ajax] Ajax란 무엇인가?