2. XMLHttpRequest (XHR)

Ajax : Javascript라이브러리 중 하나이며 비동기식 자바스크립트이다.

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해 전체 페이지를 리로드 하지않고 페이지의 일부만을 위한 데이터를 로드할 수 있다.

 

비동기(async)방식 : 웹 페이지를 리로드 하지않고 데이터를 불러오는 방식. 불필요한 리소스낭비를 막을 수 있다.

 

 

XMLHttpRequest를 이용한 Ajax 구현 과정

 

1) XMLHttpRequest 객체 구하기

2) 웹 서버에 요청 전송하기

3) 웹 서버에서 응답이 도착하면 화면에 반영

 

 

웹 서버에 요청 전송

 

- open() : 요청의 초기화. 3개의 인자값을 가진다.

인자1 : GET / POST / HEAD 중 하나의 방식설정

인자2 : 접속할 URL

인자3 : 동기/비동기 설정 (true의 경우 비동기)

 

- send() : 웹 서버에 요청 전송

GET방식으로 요구한 경우 파라미터가없다면 인자 값에 null

POST방식으로 요구한 경우 어떠한 데이터라도 서버로 전송가능

 

//GET방식
var xhr = new XMLHttpRequest();
xhr.open('GET', 'URL', true);
xhr.send(null);

//POST방식
var xhr = new XMLHttpRequest();
xhr.open('POST', 'URL', true);
xhr.send('id=neloi&pw=1234');

 

서버 응답 처리

 

- onreadystatechange : 서버로부터 응답이 도착하면 호출될 함수를 지정하는 프라퍼티.

- CALLBACK함수 : onreadystatechange 프로퍼티로 지정한 콜백함수

*onreadystatechange로 지정한 콜백함수는 응답이 도착할 때 뿐만 아니라 open(), send() 메서드가 호출될 때도 실행된다.

 

<script type="text/javascript"> 

  function getXMLHttpRequest(){ 
      .... 
  }

  var httpRequest =null;

  function processEvent(){
    httpRequest = getXMLHttpRequest();
    httpRequest.onreadystatechange = callbackFunction;
    httpRequest.open("GET","/test.jsp",true);
    httpRequest.send(null)
  }

  function callbackFunction(){
  	//서버로부터 응답이 왔으므로 알맞은 작업을 수행 
  }

</script>



//HTML

<input type="button" onclick="processEvent()">

 

XMLHttpRequest 객체의 상태

- readyState : 위의 콜백한수가 호출되는 시점을 결정하는 프라퍼티.

 

• 값 / 의미 / 설명
• 0 / UNINITIALIZED / 객체만 생성되고 아직 초기화되지 않은 상태, open() 메서드가 호출되지 않았음
• 1 / LOADING / open() 메서드가 호출되고 아직 send() 메서드가 호출되지 않은 상태
• 2 / LOADED / send() 메서드가 호출되었지만 STATUS와 헤더는 도착하지 않은 상태
• 3 / INTERACTIVE / 데이터의 일부를 받은 상태
• 4 / COMPLETED / 데이터를 전부 받은 상태

 

* 일반적으로 readyState값이 4인 경우만 원하는 기능을 수행.

 

 

- status / status Text : 서버로부터의 응답 상태

 

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

- responseText : 서버가 생성한 단순 응답 텍스트를 참조

 

 

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

xhr.onreadystatechange = function() { // 서버로부터 응답이 도착하면 호출될 함수
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200 || xhr.status === 201) {
    console.log(xhr.responseText);
    } else {
    console.error(xhr.responseText);
    }
  }
};

xhr.open('GET', 'http://localhost:3000/single-json'); // 보내는 스트림을 연다
xhr.send(); // 스트림을 보낸다

 

 

코드가 실행되는 순서

 

 

• 1) 사용자의 이벤트가 발생하면 이벤트 처리 함수를 호출한다(AJax를 구현해놓은).
• 2) 이벤트 처리 함수에서는 XMLHttpRequest 객체의 send() 메서드를 호출한다.
• 3) XMLHttpRequest 객체의 send() 메서드가 호출되면 웹 서버에 요청이 전송된다.
• 4) 웹 서버는 알맞게 처리한 뒤 응답 결과를 XMLHttpRequest에 전송한다.
• 5) XMLHttpRequest 객체에 응답이 도착하면 onreadystatechange 프로퍼티를 통해 지정한 콜백 함수를 호출한다.
• 6) 콜백 함수 내에서 서버 측이 응답이 올바른 것인지 readyState 프로퍼티와 status 프로퍼티를 통해 판단한다.
• 7) 이상이 없으면 서버 응답 데이터를 responseText 프로퍼티를 사용하여 처리한다.

https://myeonguni.tistory.com/1526

[자바스크립트][비동기통신] XMLHttpRequest 이용한 Ajax 실습해보기