개발자로 업그레이드 되자/AJAX&JSON

Ajax - 자바스크립트 방식

메모와일기장 2022. 2. 2. 23:29

1. XMLHttpRequest 객체 생성

2. 설정 및 데이터 세팅

3. readyState가 변화했을 때 응답을 받고 데이터 처리

 

//통신에 사용될 XMLHttpRequest 객체 정의
let httpRequest = new XMLHttpRequest();

const 보낼 데이터 = {}


/* Post 방식으로 요청 */
httpRequest.open("POST", 요청할URL입력 , true);

/* Response Type 을 Json으로  */
httpRequest.responseType = "json";

/* 요청 헤더에 컨텐츠 타입 json 명시 */
httpRequest.setRequestHeader("Content-Type", "application/json");

/* 데이더 json으로 변환 후 전송하기 */
httpRequest.send(JSON.stringify(reqJson));


//readyState가 변화했을 때 함수 실행
 httpRequest.onreadystatechange = ()=>{
 	if(httpRequest.readyState === XMLHttpRequest.DONE){
    	//readyState가 Done이고 응답값이 200이면
                    if(httpRequest.status ===200){
                    	//성공
                    }
                    else{
                    	//실패
                    }
        }
 }