AJAX 란 ?

 

AJAX (Asynchronous JavaScript and XML) 란?
에이잭스, 아작스 등등 여러 이름으로 불린다. 
웹 애플리케이션에서 비동기적으로 서버와 데이터를 주고받을 수 있도록 도와주는 기술
전체 페이지를 새로 고치지 않고도 서버에서 데이터를 받아와서 웹 페이지의 일부분을 업데이트할 수 있다.

---

우선 좀 자세하게 들어가 보자면

AJAX의 구성요소

1. XMLHttpRequest 객체: 이 객체를 사용하여 서버와 비동기적으로 데이터를 주고 받음.
2. 서버: 데이터를 제공
3. JavaScript: XMLHttpRequest 객체를 생성하고 조작하는 데 사용
4. 데이터포맷: JSON, XML, HTML 등 다양한 형식의 데이터를 주고 받을 수 있음

---

동작 원리

1. XMLHttpRequest 객체 생성
2. 설정
3. 전송
4. 응답

이렇게 된다. 코드로 보면

var xhr = new XMLHttpRequest();	// 객체 생성

xhr.open('GET', 'https://url.com/data', true); // 요청 설정
//'GET'은 요청 방식, 'https://url.com/data'는 요청 URL, true는 비동기 여부

xhr.send();	// 전송


xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 요청이 완료되고 응답이 성공적일 때
        var data = JSON.parse(xhr.responseText);
        console.log(data);
        // 데이터를 처리하는 로직
    }
};	// 응답

xhr.readyState 의 속성

• 0: UNSENT - XMLHttpRequest 객체가 생성된 상태
• 1: OPENED - open 메소드가 호출된 상태
• 2: HEADERS_RECEIVED - send 메소드가 호출된 상태, 응답 헤더가 수신된 상태
• 3: LOADING - 응답 본문을 수신하는 중
• 4: DONE - 전체 응답이 완료된 상태

 

xhr.status 의 속성

• 200: OK - 요청 성공
• 404: Not Found - 요청한 자원을 찾을 수 없음
• 500: Internal Server Error - 서버 내부 오류

---

이게 기본 형태이고 

jQuery를 사용하면 좀 더 보기 편하고 쓰기 편해진다.

 $.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        $('#dataContainer').html(data.content);
    },
    error: function(xhr, status, error) {
        console.log('Error: ' + error);
    }
});

 

이것이 가장 기본적인 구조이고

이것도 자세히 들어가 보자면

$.ajax({
    url: 'https://api.example.com/data',
    type: 'GET',					// method:'GET' 도 가능
    dataType: 'json',				// 응답 데이터 타입(xml,html,text 등등 가능)
    data: { key1: 'value1', key2: 'value2' },
    async: true,					// 비동기 요청 여부 default:true
    cache: false,					// 요청 url에 캐시 방지 변수 default:true
    contentType: 'application/json',
    timeout: 5000,
    headers: {
        'Authorization': 'Bearer token'
    },
    beforeSend: function(xhr) {
        console.log('Before send');			// 전송 전 호출
    },
    success: function(data) {
        console.log('Success:', data);		// 성공 시 호출
    },
    error: function(xhr, status, error) {	// 실패 시 호출
        console.log('Error:', error);
    },
    complete: function(xhr, status) {		// 성공 or 실패 후 호출
        console.log('Request complete');
    },
    statusCode: {							// 상태 코드에 대한 콜백 함수
        404: function() {
            console.log('Page not found');
        },
        500: function() {
            console.log('Internal Server Error');
        }
    }
});

이렇듯 여러 속성이 있고 이거 외에도 엄청 다양한 속성이 있다.

많이 알 수록 사용방법도 다양해 질 것이다.