[JavaScript] Ajax의 기능

인터넷 사이트에서 회원가입을 할 때 아이디가 중복인지 체크해달라는 요청을 많이 봤을 것이다.

중복체크를 클릭한다면 원래 있던 화면은 가만히 있고 ID중복 체크창만 따로 나온다.

이처럼 클라이언트 측에서의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 Ajax의 기능을 사용한다.

Ajax 란 Asynchronous Javascript + XML의 의미로 자바스크립트를 사용한 비동기 통신으로 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술이다.

 

Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징이 있다.

 

일반적인 웹 페이지는 클라이언트의 요청을 웹 서버에서 받고 JSP나 ASP 등으로 처리하고 처리결과의 맞는 HTML을 생성하여 클라이언트에게 결과페이지를 보내주지만, Ajax는 요청을 웹 서버에서 받고 요청을 처리하며 XML 또는 JSON을 생성하고 요청페이지와 같은 페이지의 결과를 보여준다.

 

---

$.ajax({
    type : "post" 또는 "get",
    async : "true" 또는 "false",
    url : "요청할 URL",
    data: {서버로 전송할 데이터},
    dataType : "서버에서 전송받을 데이터형식",
    success: {
    	//정상 요청, 응답 시 처리;
    },
    error: function(xhr, status, error){
    	//오류 발생 시 처리
    },
    complete:function(data,textStatus){
    	//작업 완료 후 처리
    }
  }); 

Ajax의 기본적인 속성들이다.

 

• type : 통신 타입을 설정 (post 또는 get)
• url : 요청할 url
• async : 비동기식으로 처리할지의 여부 (false인 경우 동기식으로 처리)
• data : 서버에서 요청할 때 보낼 매개변수를 설정
• dataType : 응답 받을 데이터 타입을 설정(XML, TEXT, HTML, JSON 등)
• success : 요청 및 응답에 성공했을 때 처리 구문을 설정
• error : 요철 및 응답에 실패했을 때 처리 구문을 설정
• complete : 모든 작업을 마친 후 처리 구문을 설정