AJAX

AJAX

Ascynchronous Javascript And XML

필요한 부분만 불러와 사용할 수 있도록 해준다.

 

 

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 새로고침하지 않고 일부만 로드(load)하는 기법

즉, 네트워크 기술로, 자바스크립트로 클라이언트에서 서버에 데이터를 요청하는 것이다.

 

AJAX가 로드할 수 있는 데이터는

JSON, HTML, DOM, JavaScript, XMLHttpRequest 등이 있다.

 

JSON은 자바스크립트의 객체와 실제적으로 같다.

 

AJAX를 사용하는 이유

무언가를 부르기만 한다거나 데이터를 조회하고 싶을 때

페이지 전체를 새로고침하지 않기 위해 사용한다.

 

기본적으로 HTTP 프로토콜은 요청을 보내고 응답을 받으면 연결이 끊기게 되어있다.

그래서 화면을 갱신하려면 다시 요청하고 응답 받아야 하기에 페이지 전체를 갱신하게 된다.

자원 낭비에 시간 낭비다.

 

AJAX는 HTML 페이지의 일부분만 갱신할 수 있도록

XMLHttpRequest 객체를 통해 서버에 요청한다.

이 경우, JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에

그만큼의 자원과 시간을 아낄 수 있다.

 

+) JSON

JavaScript Object Notation

 

 

AJAX 장단점

1. 장점
   1. 웹 페이지의 속도 향상
   2. 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
   3. 서버에서 Data만 전송하면 되므로, 전체적인 코딩의 양이 줄어듦
   4. 기존 웹에서 불가능한 다양한 UI를 가능하게 해줌. (Flickr 사이트는 사진 제목, 태그를 reload 없이 수정가능)
2. 단점
   1. 히스토리 관리가 되지 않음
   2. 페이지 이동없는 통신으로 인한 보안 상 문제
   3. 연속으로 데이터 요청 시 서버 부하 증가
   4. XMLHttpRequest로 통신하면, 사용자에게 아무런 진행 정보가 주어지지 않음
      
      1. 요청이 끝나지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 됨
   5. AJAX를 쓸 수 없는 브라우저에 대한 문제
   6. HTTP 클라이언트의 기능이 한정됨
   7. 지원하는 charset이 한정됨
   8. Script로 작성되므로 디버깅하기 힘듦
   9. 동일-출처 정책으로 인해 다른 도메인과 통신이 불가능 (Cross-Domain)
      1. CORS: Cross-Origin Resorce Sharing - 한 출처에서 실행 중인 웹 어플이 다른 origin의 리소스에 접근할 수 있도록 하는 방식. XMLHttpRequest는 사용 중인 웹 어플이 자신과 출처가 동일한 리소슴나 불러올 수 있음. 다른 출처의 경우 CORS 헤더를 포함한 응답을 반환해야 함.

 

AJAX 진행과정

1. XMLHttpRequest 객체 생성
   1. 요청 보낼 준비를 브라우저에게 시키는 과정
   2. 이를 위해 필요한 method를 갖춘 객체가 필요
2. 콜백 함수 생성
   1. 서버에서 응답이 왔을 때 실행시키는 함수
   2. HTML 페이지를 업데이트 함
3. 요청 열기
   1. 서버에서 응답이 왔을 때 실행시키는 함수
   2. HTML 페이지를 업데이트 함
4. 요청 보내기

 

AJAX 쓰는 방법

XMLHttpRequest 객체를 얻은 뒤,

url을 통해 요청한 뒤 응답 받고,

그 응답에 맞는 함수를 실행하는 구조다.

 

 

아래 코드는 자바스크립트를 서서 특정 서버에 요청을 보내고 그에 대한 자료를 받아오는 코드다.

// This function gets invoked when server sends the response
function reqListener (e) {
    console.log(e.currentTarget.response); // 할 일
}

var oReq = new XMLHttpRequest(); // 객체 생성
var serverAddress = "https://hacker-news.firebaseio.com/v0/topstories.json"; //url

oReq.addEventListener("load", reqListener); // 응답 받고 할 일 정하기
oReq.open("GET", serverAddress); // 해당 url에 GET 메소드로 보낼 준비
oReq.send(); // 요청

 

 

코드가 길기 때문에 XMLHttpRequest로 요청보내기 보다는

보통 JQuery (또는 AJAX 기능이 내장된 라이브러리)를 이용한다.

var serverAddress = 'https://hacker-news.firebaseio.com/v0/topstories.json';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

 

아래 예제는 AJAX가 XHR 객체를 생성하여

이 객체의 콜백을 만들고 

HTML 메소드와 URL을 결정한 뒤,

XHR 객체의 메소드로 정보를 보내는 방식이다.

var xhr= new XMLHttpRequest();
// 브라우저가 응답을 받았을 때 작동하는 함수(콜백)

xhr. onreadystatechange = function(){
// AJAX 요청에 어떤 변화가 있다면 작동 (콜백함수를 포함한다고 생각하자)
	if(xhr.readyState===4){
    // 응답이 돌아왔는지 아닌지 추적하는 property
    	document.getElementById(‘ajax’).innerHTML= xhr.responseText;
    }
}



xhr.open('GET',"sidebar.html");  // html메소드와 URL을 보낸다. (open함수는 준비를 시키는것이지 보내는 것은 아니다.)
xhr.send(); 

 

 

 

출처: velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

 

 

+) ajax 실행코드

function ajax(data) {
 var oReq = new XMLHttpRequest();
 
 oReq.addEventListener("load", function() { // 콜백함수
 // load가 실행될 때, ajax함수는 모두 다 반환되어 스택에서 없어진 후에,
 // 콜백함수가 나중에 서버에서 오면 실행됨
   console.log(this.responseText);
 });    
 
 //해당 url로 서버 요청을 준비
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send(); //서버로 전송
}

 

 

+) XMLHttpRequest()에서 POST 요청 방식 예제

    
  <script type="text/javascript">
    var btns = document.querySelectorAll("div .detail > button");
    // btns.forEach(function(btn){  //no IE
    Array.prototype.forEach.call(btns,function(btn){ // forEach를 사용하여 모든 button에 이벤트 적용
	    btn.addEventListener('click', function(){
	    	// ajax
	    	var xhr = new XMLHttpRequest(); 
	    	xhr.open('POST','/todo/TodoTypeServlet'); // 요청 방식과 url 설정
	    	
	    	// onreadystatechange : xhr객체의 readyState가 변할 때마다 자동 호출되는 함수 설정
	    	xhr.onreadystatechange = function(){ // 콜백함수 지정
	    		
	    		// readyState=4 : 데이터 처리 완료되어 응답할 준비 완료됨
	    		// status=200 : 서버에 문서가 존재함
	    		if (xhr.readyState===xhr.DONE && xhr.status===200){

		    		// DOM API로 element 조정
	    		}
	    		
	    	}
	    	// HTTP 요청 헤더 작성 (헤더이름, 헤더값)
	    	// 해당 헤더이름으로 작성한 헤더는 헤더값을 가지고 HTTP요청헤더에 포함됨
	    	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    
	    	// JAVA 객체 값은
	    	// HTML에서 input, button의 value를 통과하여
	    	// dom으로 접근 가능
	    	const value = btn.value.split(',');
            // url 쿼리문 작성
            // paremeter=값 & paremeter=값 ...
	    	var data = 'id='+ value[0] +'&type='+value[1];
	    	
	    	xhr.send(data);
	    })
    })
  </script>