Ajax (Asynchronous JavaScript and XML) 정리

Ajax (Asynchronous JavaScript and XML)

• 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법 (화면의 일부만 갱신 가능)
• 화면 갱신이 없으므로 사용자는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡
• 언어나 프레임워크가 아닌 구현하는 방식을 의미
• CORS error가 발생할 수 있음

💡 일반 요청에 대한 응답
- data를 입력 후 event 발생
- Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리
- logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송 (화면 전환 발생)

💡 Ajax 요청에 대한 응답
- data를 입력 후 event 발생
- Ajax를 적용하면 event 발생시 서버에서 요청을 처리한 후 Text, XML 또는 JSON으로 응답
- client(Browser)는 응답 data를 이용하여 화면 전환없이 현재 페이지에서 동적으로 화면을 재구성

💡 Ajax = 비동기 방식
웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있음

💡 CORS(Cross-Origin Resource Sharing) error
:  요청 브라우저에서 다른 도메인(프로토콜, 포트번호)을 가지는 서버로 요청이 갈때 브라우저에서 발생하는 보안정책

 

Ajax 장단점

장점

• 웹페이지 속도 향상 (필요한 부분만 리로드 하기 때문!)
• 서버의 처리가 완료될 때 까지 기다리지 않고 처리 가능

단점

• 히스토리 관리가 되지 않음
• 페이지 이동없는 통신으로 인한 보안상 문제가 있을 수 있음
• 연속으로 데이터를 요청시 서버 부하가 생길 수 있음

 

Ajax 사용 방식

XMLHttpRequest 

• 자바스크립트가 Ajax 방식으로 통신할 때 사용하는 객체
• ⇒ 통신 시 전송방식, 경로, 서버로 전송할 data등 전송정보를 담는 역할
• 실제 서버와의 통신은 브라우저의 Ajax 엔진에서 수행
• 직접 자바스크립트로 Ajax를 프로그래밍할 경우 브라우저 별로 통신방식이 달라 코드가 복잡해짐

// 1. XMLHttpRequest객체 생성
var httpRequest = new XMLHttpRequest(); 

// 2. onreadystatechange 등록
// : XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정
httpRequest.onreadystatechange = function() {
	
    // XMLXttpRequest 객체의 현재 상태와 서버 상의 문서 존재 유무를 확인
    if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
    
        // 서버에 요청하여 응답으로 받은 데이터를 문자열로 반환
    	console.log(httpRequest.responseText);
    }
};

// 3. GET 방식으로 요청을 보내면서 데이터를 동시에 전달
httpRequest.open("GET", "서버URL", true);
httpRequest.send();

HTTP Server는 자바를 돌릴 수 없음 ⇒ 받아서 application을 돌릴 수 있는 서버(tomcat)에 넘겨 줌

HttpRequest의 속성값

💡 readyState

값	의미	설명
0	Uninitialized	객체만 생성 (open 메소드 호출 전)
1	Loading	open 메소드 호출
2	Loaded	send 메소드 호출 ( status의 헤더가 아직 도착되기 전 상태 )
3	Interactive	데이터 일부를 받은 상태
4	Completed	데이터를 전부 받은 상태

💡 status

값	텍스트 (status Text)	설명
200	OK	요청 성공
403	Forbidden	접근 거부
404	Not Found	페이지 없음
500	Internal Server Error	서버 오류 발생

 

fetch() 이용

• 실행 결과 ⇒ Promise 타입의 객체를 반환
• 반환된 Promise 객체는 API 호출이 성공했을 경우 응답객체를 resolve하고, 실패했을 경우 예외 객체를 reject 함
• DELETE는 GET과, PUT은 POST와 유사 (method 부분만 수정!)

 

GET METHOD

fetch('TARGET URL') // url 입력, GET메서드임
    .then(res => res.json())  //응답 결과를 json으로 파싱
    .then(data => { 
            console.log(data); //응답 결과를 console 창에 출력
              // "data.키값" 형태로 value 추출 가능 
    })
    .catch(err => { // 오류 발생시 오류를 담아서 보여줌
        console.log('Fetch Error', err);
    });

 

POST METHOD

function formData() { //POST 메서드로 전송할 데이터
    let cat = {};
    
    // key-value (키-값)의 형태로 데이터 추가함
    // formData.append('key', value);
    cat.code = document.querySelector("#code").value;
    cat.nickname = document.querySelector("#nickname").value;
    cat.price = document.querySelector("#price").value;
    cat.id = document.querySelector("#id").value;
    return cat;
}

fetch('TARGET URL', { // url 입력 및 [options] 값 설정
     method: 'post', 
     headers: { // header 
       "Content-Type": "application/json", // josn 사용 여부 설정
     },
     body: JSON.stringify(formData())  //전송할 데이터 body에 추가
    })
    .then(res => res.json()) //응답 결과를 json으로 파싱
    .then(data => {
            console.log(data); //응답 결과를 console 창에 출력
              // "data.키값" 형태로 value 추출 가능 
    })
    .catch(err => { // 오류 발생시 오류를 담아서 보여줌
        console.log('Fetch Error', err);
    });

 

Promise 객체
비동기적 처리의 성공/실패 여부와 그 결과값을 대표하는 object

응답 data를 받는 방법

response.text() : 응답을 읽고 text를 반환
response.json() : 응답을 JSON 형식으로 파싱
response.formData() : 응답을 FormData 객체 형태로 반환
response.blob() : 응답을 Blob 형태로 반환

이외에도  JQuery(외부라이브러리) 이용, axios (외부라이브러리) 이용 방법이 존재!