[WEB] Frontend - AJAX

<한줄요약>

AJAX : 페이지의 비동기적 처리를 가능하게 해준다 ( 특정 부분만 로드, 갱신, 변경 )

 

1. AJAX란?

 

-  Asynchronous Javascript and XML

-  비동기적으로 데이터를 전달, 결과를 처리하는 방법

-  화면 갱신이 필요하지 않다

 

-  일반 페이지 이동 : data를 전달하면 서버에서 대상 page 전달, client에선 page 전환 발생

  -  page는 서버에서 된다된다

-  AJAX : data를 전달하면 서버에서 XML/JSON등 데이터 전달, client는 해당 data로 동적 화면 변경

  -  page는 client에서 구성된다 (서버가 보내준 data를 활용하여)

 

 

2. JavaScript에서 AJAX 사용

 

-  서버로 데이터를 전송할 객체 필요

  -  XMLHttpRequest 사용

-  XMLHttpRequest의 onreadystatechange 함수로 AJAX요청에 대한 callback 함수를 지정한다

-  open / send 함수로 서버로 데이터 전달 시작

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

function makeRequest() {
    httpRequest = new XMLHttpRequest();
	//예외처리
    if(!httpRequest) {
      alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ');
      return false;
    }
    //callback함수 지정
    httpRequest.onreadystatechange = alertContents;
    //server에 요청 전달
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }
  //callback함수
  function alertContents() {
  	//요청이 정상 수행됬다면 alert
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('request에 뭔가 문제가 있어요.');
      }
    }
  }

 

 

3. JQuery에서 AJAX 사용

 

-  $.ajax() 함수 사용

-  옵션만 지정하는 간단한 코드로 쉽게 사용 가능하다

-  url, 요청 type, 성공/실패 함수를 지정하면, 실행시 지정 url로, 지정된 type의 요청을 보내 성공/실패에 따라 처리한다

$.ajax({
	//서버 요청 경로
	url:"url",
	//요청 type (get/post 등)
	type:"GET",
	//post는 data를 본문에 포함한다 
	success:function(response){
		//성공했을 때 호출
	},
	error:fuction(xhr, status, errormsg){
		//에러발생 시 호출
	}
});

 

-  $.get() / $.post() 함수

-  위 $.ajax함수를 get방식 / post방식으로 type을 미리 지정해놓은 함수

-  내부 인자는 type 제외 동일

 

-  GET / POST방식이란?

	GET방식	POST방식
data의 위치	URL에 data를 포함시켜서 전송한다 data가 직접 노출된다 ex) http://mysite.com?data1=10&data2=20 ....	data를 Body에 포함시켜 전송한다 data가 직접 노출되진 않는다
길이 제한	URL의 길이에 제한이 있어, data에도 제한이 있다	길이 제한 없음
캐싱	캐싱 가능	캐싱 불가능

 

-  $(selector).load(url, data, function(~~){} ) 함수

-  selector를 통해 탐색한 DOM객체에, load함수가 가져온 html data를 넣는다

-  .load("test.html #id") 같은 식으로, 호출하려는 html에서 특정 id/class/tag를 추출할 수 있다.

 

 

4. 데이터 전송 형식

 

-  Server / Client가 주고받는 data의 형식이 일치해야 원활한 처리가 가능하다

 

-  1. CSV

-  Comma Separated Values. 직역하면 "콤마(,) 로 구분된 값"

-  말 그대로 데이터들을 ,으로 구분한다. (홍길동,19세,도적,..)

-  장점 : 데이터의 크기가 작다.

-  단점 : 데이터의 의미 파악이 힘들다. server-client간에 완벽히 데이터의 순서까지 일치해야한다

 

-  2. XML

-  eXtensible Markup Language

-  tag로 data의 의미를 표시한다, 사용자 정의 tag 사용가능

-  데이터의 순서가 달라져도 tag가 일치하면 지장 없다

<people>
	<person>
		<name>홍길동</name>
		<age>19></age>
		<job>도적</job>
	</person>
	<person>
		....
	</person>
</people>

 

-  3. JSON

-  JavaScript Object Notation

-  객체의 형식으로 data를 표현한다.

people[
	{
		"name" : "홍길동",
	    "age" : 19,
	    "job" : "도적"
	},
	{
		...
	},
]

 

 

5. Event 관리

 

-  ajax가 어느정도 진행중인지 확인할 수 있다

-  진행 단계에 따라 함수 호출

함수명	호출시점
ajaxStart	ajax함수 실행 직후
ajaxSend	서버전송 직전
ajaxSuccess	서버요청 반환이 성공일 경우
ajaxError	서버요청 반환이 실패일 경우
ajaxComplete	서버요청 반환시
ajaxStop	ajax함수 종료시

-  ex) ajax 실행시 loading창(기본 hide)을 보여주고, ajax완료시 숨길 수 있다

$(document)
.ajaxStart(function(){
	$("#loading").show();
})
.ajaxStop(function(){
	$("#loading").hide();
})