[Ajax (Asynchronous Javascript and XML)]

비동기 방식으로 자바스크립트를 이용해,

화면 전환없이(전체 페이지가 깜빡임없이..) 서버에 자료 (XML , HTML , JSON, 텍스트 유형 등)를 요청/수신할 때.

종류	설명
load()	외부 콘텐츠 가져올 때 사용한다.
$.ajax()	데이터를 서버에 GET , POST 방식으로 전송이 가능한 데이터를 요청할 수 있는 통합적인 메서드. $.post() , $.get() , $.getJSON() 메서드의 기능을 하나로 합쳐놓은 거라 볼 수 있다.
$.post()	데이터를 서버에 POST 방식으로 데이터를 송수신할 때
$.get()	데이터를 서버에 GET 방식 방식으로 데이터를 송수신할 때
$.getJSON()	GET 방식으로 데이터를 전송한 이후에, 서버측 응답을 JSON 형식으로 받을 때
$.getScript()	Ajax를 이용해서 외부 자바스크립트를 불러올 때. $("button").click( function() {     $.getScript("ajax_script.js"); });
.ajaxStop(function() { ... })	비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수가 실행된다.
.ajaxSuccess(function() { ... })	ajax 요청이 성공적으로 완료되면 함수를 실행한다.
serialize()	방문자가 입력사항을 전송 (submit) 할 때, 전송 데이터를 쿼리 스트링 방식으로 데이터를 변환하여 액션 페이지에 전송
serializeArray()	방문자가 입력 요소에 값을 입력하고 전송하였을 때, 전송 데이터를 JSON 데이터로 변환해 액션페이지에 전송.
ajaxComplete(function() { ... })	Ajax 통신이 완료되면 함수 실행

 

$.ajax() 기본형

$.ajax( {
	url: "전송할 (액션) 페이지" ,
    type: "전송 방식", [get, post 방식]
    data: "전송할 데이터",
    dataType: "요청한 데이터 타입", [html, xml, json, text , jsonp]
    success: function(result) {
    	// 전송에 성공하면 실행할 실행문들
    }
});

 

$.ajax() 옵션 종류

종류	설명
async	통신 방식 [동기 | 비동기] 설정. 기본은 비동기
beforeSend	요청하기 전에 함수를 실행하는 이벤트핸들러. ex) 전송확인 Confirm창 , 스플래쉬 보이기 등
cache	요청한 페이지를 인터넷에 캐시할지 여부 설정. 기본은 true
complete	Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러.
contentType	서버로 전송시킬 데이터의 content-type 설정 기본값 : application/x-www-form-urlencoded
data	서버로 전송할 데이터 지정
dataType	서버에서 요청받아올 데이터의 형식을 지정. 생략시 요청한 자료에 맞게 자동으로 형식이 지정된다
error	통신에 문제가 발생했을 때 함수 실행
success	Ajax로 통신이 정상적으로 이뤄지면 함수 발생
timeout	통신 시간을 제한합니다. 시간단위는 ms (밀리 세컨드)
type	데이터 전송 방식 [get | post]
url	데이터를 전송할 페이지 설정. 기본값 : 현재 페이지
username	http 액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정한다

 

JSON (JavaScript Object Notation)

자바스크립트로 표현하는 객체 표기법.

key, value 값이 쌍으로 구성된 형태의 객체 표기법.

{"rank":[
    {"a": "abc"} ,
    {"a": "bcd"} ,
    {"a": "cde"}
]}

 

예시.

<script type="text/javascript">
  $(function() {
  $.ajax({
  url:"rank.json" , // 데이터 요청할 URL 주소
  dataType:"json" ,
  success: function(result) {
    $.each( result, rank, function (i,d) {
    // JSON의 rank에 저장된 값만큼 함수 내의 실행문을 반복실행
    // 매개변수 d는 rank의 리턴값 객체가 순서대로 할당
    // 내용 : d에 할당된 객체에 k값을 이용해 리스트 <li>태그를 생성해
    // id="wrap"인 요소의 하위 <ol>에 추가 생성
       $("#wrap ol").append("<li>"+ d["k"] + "</li>");
      });
    }
  })
});
</script>