[220304] 간단히 보는 AJAX 개념

[목록]

1.   AJAX란?

2.  비동기통신 코드 만들기

 

---

1.   AJAX(Asynchronous Javascript And XML)란?

브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위.

페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받아서 일부만 업데이트 되는 비동기 자바스크립트.

간단히, 브라우저에서 돌아가는 자바스크립트가 사용할 수 있는 객체라고 알면 된다.

 

사용하는 기본 내장 객체로는 XMLHttpRequest이 있다.

XML은 데이터 통신을 하는 옛날 형식을 말한다. 요즘은 JSON으로 대체되고 있다.

엘리먼트 형태인 XML보다 객체형태인 JSON으로 작성했을때 코드 길이가 1.5배가 줄어들기 때문.

통신할때 html보다는 데이터만 주고 받음. 그 데이터를 받는 형태가 옛날엔 xml이고 지금은 json이다.

 

 

2.   비동기통신 만들기(요청)

2-1.   Http Request 만들기

new로 XMLHttpRequest를 선언해서 새로운 http request를 만든다

const xhr = new XMLHttpRequest()

 

 

2-2.   open() 메소드  만들기

요청을 어떻게 할 것인지, 요청을 초기화 하는 메소드.

첫번째 인자에는 HTTP 요구방식 : GET, POST, HEADER

두번째 인자에는 요구하고자 하는 URL주소

세번째 인자에는 비동기식으로 코드가 작동할 것인지 결정한다. true로 선언시 비동기적으로 움직이며 생략 가능하다.

xhr.open('POST','http://localhost:3000/login',true)

 

2-2.   setRequestHeader() 메소드  만들기

mime type

클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘. 웹에서는 파일의 확장자가 별 의미를 가지지 않는다. 그렇게 때문에 각 문서와 올바른 mime type을 잘 전송하도록 서버가 정확하게 설정해야한다. 문서타입의 정보를 나르는 유일한 방법은 아니지만 웹에서 정보를 나를 경우 가장 적합한 방법이다.

(참고 블로그 : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types)

 

요청할 mime type을 설정하기 위한 메소드.

send()를 호출하기전에, send()로 보낼 쿼리를 설정할때 사용한다.

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

//const express = require('express')
//const app = express()
//app.use(express.urlencoded({extended:true}))일때,
//'application/x-www-form-urlencoded' 이 형식만 읽을 수 있기 때문.

 

 

2-3.   send() 메소드  만들기

POST 메소드로 요청한 경우 서버로 보낼 수 있는 모든 데이터를 전송할 수 있다.

단, 서버에서 객체화 할 수 있는 형태에 한한다.

xhr.send(`userid=${item.userid}&userpw=${item.userpw}`)
//미리 받아놓은 item 객체의 속성값을 넣었다.

 

 

---

3.   비동기통신 만들기(응답)

3-1.   readyState()로 처리 상태 파악하기

readyState()는 요청에 대한 처리 단계에 따라 다른 상수값을 가진다.

• 0 (uninitialized) - (request가 초기화되지 않음)
• 1 (loading) - (서버와의 연결이 성사됨)
• 2 (loaded) - (서버가 request를 받음)
• 3 (interactive) - (request(요청)을 처리하는 중)
• 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)

xhr.onreadystatechange=()=>{
    switch(xhr.readyState){
        case 2:
            //HEADERS_RECEIVED
            console.log('HEADERS_RECEIVED')
        break;
        
        case 3:
            //LOADING
            console.log('LOADING')
        break;
        
        case 4:
            //DONE
            document.querySelector('#msg').innerHTML = ''
            location.href="http://localhost:3000"
            console.log('DONE',xhr.response) //끝마친후의 응답값
        break;
    }
}

처리 상태에 따라서 인터넷창 콘솔에 출력되는 코드가 달라진다.

보통 너무 빠르게 지나가서 볼 수는 없지만, 네트워크에서 반응속도를 3초 정도로 조절해주면 처리속도가 느려지면서 확인할 수 있다.

빨간 박스의 설정을 3초로 설정해주면 된다.

 

 

---

 

참고링크

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

Ajax 시작하기 - 웹 개발자 안내서 | MDN

 

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types

MIME 타입 - HTTP | MDN

 

http://www.tcpschool.com/ajax/ajax_server_response

코딩교육 티씨피스쿨

 

https://developer.mozilla.org/ko/docs/Web/HTTP/Messages

HTTP 메시지 - HTTP | MDN

 

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response

XMLHttpRequest.response - Web APIs | MDN