[ajax] ajax 정의, $.ajax() 메소드, 데이터 형식

AJAX란?

Ajax란 (asynchronous Javascript and XML)의 줄임말 입니다. 자바스크립트를 이용하여 비동기 식으로 서버와 통신을 합니다. Ajax는 프로그램 언어가 아니다.

---

$.ajax() 메소드

$.ajax() 메소드는 모든 jQuery Ajax 메소드의 핵심이 되는 통합적인 메소드이다 .
$.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.

---

options

$.ajax({
           options
});

$.ajax({
           url : 통신을 원하고자 하는 URL주소를 입력합니다.(필수 입력)
           data : 서버로 보낼 데이터를 입력합니다.
           type : get, post 등의 통신 방식을 지정합니다.
           dataType : 통신의 결과로 넘어올 데이터의 종류를 지정합니다.
           success(data) : 통신 성공시 호출해야 하는 함수를 지정합니다. 매개변수로 넘어온 데이터를 받습니다.
           error : 통신 실패시 호출해야 하는 함수를 지정합니다.
           complete : 통신 성공 여부와 관계없이 통신이 끝난 후 호출해야 하는 함수를 지정합니다.
           beforeSend : 통신 전에 호출해야 하는 함수를 지정합니다.
           async : 비동기(true), 비동기(false) 여부를 지정합니다.
           cache: 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정합니다. 기본값은 true입니다.
});

$.ajax({ 
	url: "/rest/1/pages/245", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소 
	data: { name: "홍길동" }, // HTTP 요청과 함께 서버로 보낼 데이터 
	method: "GET", // HTTP 요청 메소드(GET, POST 등) 
	dataType: "json" // 서버에서 보내줄 데이터의 타입
	success:function(data){
   		//전송에 성공하면 실행될 코드;
	},
	error:function(){
		//전송에 실패하면 실행될 코드;
	}
});

<script> 
    // 'request'라는 id를 가진 버튼 클릭 시 실행.
    $("#request").click(function(){
 
            // json 형식으로 데이터 set
            var params = {
                      name      : $("#name").val()
                    , sex       : $("#sex").val()
                    , age       : $("#age").val()
                    , tellPh    : $("#tellPh").val()
            }
                
            // ajax 통신
            $.ajax({
                type : "POST",            // HTTP method type(GET, POST) 형식이다.
                url : "/test/ajax",      // 컨트롤러에서 대기중인 URL 주소이다.
                data : params,            // Json 형식의 데이터이다.
                success : function(res){ // 비동기통신의 성공일경우 success콜백으로 들어옵니다. 'res'는 응답받은 데이터이다.
                    // 응답코드 > 0000
                    alert(res.code);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown){ // 비동기 통신이 실패할경우 error 콜백으로 들어옵니다.
                    alert("통신 실패.")
                }
            });
        });
            
</script>

---

 데이터 형식 

1) CSV 형식 

---

년,월,일,온도,습도,미세먼지,초미세먼지
2021,4,29,10,100,5,19

---

2) XML 형식

---

HTML과 같이 태그 구조의 형식으로 데이터를 표현한다. XML 문법 특성상 데이터 이외에 열고 닫는 태그가 반드시 필요하기 때문에 구조가 복잡해지고 용량이 커지는 것이 단점이다.

<?xml version="1.0" encoding="utf-8" ?>
<school> <!-- 루트요소 -->
    <ban> <!-- school의 자식이자 name, age, gender의 부모노드 -->
        <name>김트루</name> <!-- 형제노드 -->
        <age>28</age>       <!-- 형제노드 -->
        <gender>F</gender>  <!-- 형제노드 -->
    </ban>
    <ban>
        <name>이트루me>
        <age>29/age>
        <gender>M</gender>
    </ban>
    <ban>
        <name>박트루>
        <age>30/age>
        <gender>F</gender>
    </ban>
</school>

---

3) JSON 형식

---

JSON은 JavaScript Object Notation의 줄인 말로, 자바스크립트를 위한 객체 형식의 데이터 자료이라고 생각하면 된다. 보통 AJAX를 사용할 때 많이 사용하며 XML보다 파싱도 빠르고, 간단하기 때문에 JSON을 XML 보다 더 권장한다. 주고 받을 수 있는 자료형은 Number, String, Boolean값, 배열, 객체 등이다.

JSON 메시지 단위는 배열이나 객체이다. 아래의 두 예는 JSON 메시지가 될 수 있다.

* 배열(Array)
배열은 대괄호[]로 나타낸다. 배열의 각 요소는 기본 자료형이거나 배열, 객체이다. 각 요소들은 쉼표(,)로 구별된다. 각 요소가 나타나는 순서에 의미가 있다.

let number =
[
  1,           // 숫자
  'true',      // 문자열
  [2, 'two']   // 배열
  {three : 3}, // 객체
]

* 객체(Object)
객체는 이름/값 쌍의 집합으로, 중괄호{}를 사용한다. 이름은 문자열이기 때문에 반드시 따옴표를 하며, 값은 기본 자료형이거나 배열, 객체이다. 각 쌍들은 쉼표(,)로 구별된다. 각 쌍이 나오는 순서는 의미가 없다.

let number = 
{
  name1 : 1,          // 숫자
  name2 : [           // 배열
            {name2 : 2}
          ],
  name3 : 'three'     // 문자열
}

* JSON(JavaScript Object Notation)
실제로 JSON 문서를 아래와 같이 작성할 일은 없지만, 예시로 하나 만들어보았다.

   let student = {
        "이름": "트루",
        "나이": 27,
        "성별": "여",
        "주소": "대전광역시",
        "취미": "프로그래밍",
        "별명": "찐"
    }

출처 : https://www.nextree.co.kr/p9521/ 
출처 : https://araikuma.tistory.com/640 
출처 :  https://www.nextree.co.kr/p9521/