[AJAX] Ajax란?

Ajax란?

 

- Ajax란, 비동기 방식의 javascript와 XML을 의미한다.

- 동기 방식과 비동기 방식의 차이점 : 동기 방식의 경우는 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있지만, 비동기 방식은 그와 반대로 신호를 보냈을 때 응답 상태와 상관 없이 다음 동작을 수행할 수 있다.

- Ajax를 이용하는 목적은 화면 전환 없이 클라이언트와 서버 간의 XML, JSON,텍스트,(X)HTML 등의 정보를 교환하기 위함이다.

- Ajax를 이용하면 방문객이 보는 컴퓨터에서 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송 받을 수 있다.

- 자료를 요청하면 시간이 소요되는데, Ajax를 이용하면 방문객이 기다릴 필요 없이 다른 작업을 바로 수행할 수 있다.

 

[Ajax 특징] 

- 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만 갱신할 수 있다.

- 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.

- 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.

- 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

- 순수 js를 이용한 ajax는 브라우저 마다 사용법이 달라 브라우저 마다 다른 형태로 구현해야 하는 어려움이 있다.

- 제이쿼리 ajax의 경우 $.ajax()함수를 이용해서 모든 브라우저에서 돌아가도록 구현할 수 있다.

- $.ajax()로 모든 ajax형태를 구현할 수 있다.

 

 

[Ajax 사용 전 방식]

- Ajax 를 사용하지 않았을 경우에는, 클라이언트가 자료를 요청하면 반드시 서버 컴퓨터를 거쳐야만 자료를 요청할 수 있었다. 

- 이 방식으로 자료를 요청하면, 잠시 페이지가 서버 스크립트 페이지로 갱신되어 화면이 깜빡거리고, 그동안 사용자는 어떤 작업도 할 수 없게된다.

 

[Ajax 사용 후 방식]

- Ajax를 사용해 방문자가 서버에 자료를 요청했을 경우, 서버 스크립트 페이지를 거치지 않아도 자료를 받아 올 수 있다.

- 클라이언트는 서버에 자료를 요청하는 사이에도 다른 작업을 할 수 있다.

- 카페나 블로그의 게시글에 댓글을 달 때 페이지 전환없이 바로 할 수 있는 것도 Ajax를 사용한 것이다.

- 페이스북의 댓글 기능과 구글 지도 등에도 사용된다.

 

 

 

---

 

ajax 형식 ->

$.ajax({
    url: '접속할 페이지 주소',
    type: '전송 방식 (GET / POST)',
    data: '전송할 데이터 - 파라미터 문자열 key=value&key=value',
    dataType: '요청한 데이터 형식 (html / xml / json / jsonp)',
    timeout : '밀리세컨드단위 제한시간',
    cache : '이전요청에대한 캐쉬저장여부 (true=사용함, false=사용안함)',
    succes: function(data){ 
        // 전송에 성공하면 이 콜백 함수를 실행 (data 에는 응답받은 데이터가 저장된다)
    },
    error: function(){
        // 전송에 실패하면 이 콜백 함수를 실행
    }
});

-> url에는 데이터 전송 및 요청할 외부 주소를 입력함.

-> type에는 전송 방식을 입력함.

-> data에는 전송할 데이터를 입력함.

-> dataType은 서버로부터 반환 받아올 데이터 형식을 지정함. 데이터가 (X)HTML일 경우에는 "html", XML일 경우에는 "xml", JSON일 경우에는 "json"이라고 입력.

-> 데이터 전송 및 요청이 정상적으로 이루어지면 함수 내의 실행문이 실행됨. 이때 매개 변수(result)에는 요청한 데이터가 저장됨.

 

 

 

 

.

.

.

 

 

훌륭한 블로그 글 참고

https://starrykss.tistory.com/197