기록하고 기억하는 블로그

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{
                    	//실패
                    }
        }
 }

Ajax란 ?

-Asynchronous JavaScript and XML

-JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는 통신방식

-데이터 형식은 XML 뿐 아니라 Text, HTML, JSON, CSV등 다양하게 가능하다

-브라우저 내장 객체인 XMLHttpRequest를 이용하여 비동기식으로 데이터를 송수신함

동기식 vs 비동기식

-동기식 : 클라이언트가 서버로 데이터를 요청하면 응답이 올 떄 까지 다른 작업은 대기

-비동기식 : 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고 다른 작업 수행 가능

                추후 요청에 대한 응답이 오면 응답에 관련된 작업을 진행

==새로고침 없이 서버에 get요청을 할 수 있다

Ajax 특징

1. 전체 페이지 갱신 없이 일부분 업데이트 가능

2. 사용자에게 즉각적인 반응과 풍부한 UI경험 제공 가능

3. ActiveX나 JQuery 방식으로 구현 가능 

4. JavaScript 방식, jQuery 방식으로 구현 가능

단점

-JS이므로 크로스 브라우저 처리 필요

- 연속적 데이터 요청시 서버 부하로 페이지 느려짐

-페이지 내 복잡도 증가로 에러 발생 시 디버깅이 어려움

<사용법>

[JQuery 방식]