자바스크립트 Ajax

자바스크립트의 Ajax 구문에 대해서 알아봄(w3schooooooooool). JQuery로 작성된 수업시간의 예제와 비교해볼 것.

callback 함수

1. why? :
   함수의 제어를 위해 : <script> 내에서 호출된 함수는 페이지를 불러오자마자(동기적으로) 먼저 호출된 순서대로 실행된다. 비동기적으로 함수를 실행시키고 싶을 땐 어떻게 해야하나요?
   주로 쓰이는 예 : 외부 리소스를 이용하는 함수를 쓸 때!, 바로 Ajax를 쓸 때!

2. 다른 함수에 인자(파라미터)로 전달되는 함수

3. 구문 예 : showMessage 함수가 콜백으로 쓰였음.

var myFunction = function(a, b, myCallback){	// myFunction()에서 인자 지정
  let sum = a + b;
  myCallback(sum);
}

var showMessage = function(some){
  alert(some);
}

myFunction(5,10, showMessage); // 인자에 함수를 넣음 : showMessage()함수가 콜백함수가 됨.

4. 사용 예
   1) setTimeout()
   2) setInterval()
   3) Ajax를 이용할 때

   
   

JavaScript Closure, self-invoking function

구문 예

var add = (function () {
  var counter = 0;
  return function () {counter += 1; return counter;}
})();

function myFunction(){
  document.getElementById("demo").innerHTML = add();
}

1. ....

자바스크립트 Ajax

1. Ajax의 시작은 JS의 XMLHttpRequest 객체를 만드는 것이다.
   이 객체는 비동기통신을 위한 메소드와 속성으로 구성되어있다.

2. 기본적인 구문
   1) XMLHttpRequest 객체 생성
   2) onreadystatechange는 Ajax요청에 대한 서버응답의 readyState가 변할 때 마다 호출되는 함수이다.
   3) readyState == 4, status == 200 이 정상적인 서버응답의 조건이므로, 이 조건문 안에 응답받았을 때 실행될 로직을 작성한다.(다른 함수에 로직을 작성하고 호출해도 좋음.)
   4) open()는 요청을 특정하는 메소드.(파라미터를 이용해 요청방식을 정함)
   5) send()는 서버로 요청을 보내는 메소드.
   6) 제어순서 : loadDoc()이 호출될 때, open() -> send() -> 조건문 안의 로직(정상적인 응답이 왔을 때)

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;	
    }
  };
  xhttp.open("GET", "ajax_info.txt", true); // (요청방식, url, 비동기로)
  xhttp.send(); // 요청!(submit!)
}

3. 요청을 보낼 때

var xhttp = new XMLHttpRequest();

//get방식으로 정보를 같이 보낼 때.
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();

//post방식으로 정보를 같이 보낼 때.
//헤더에 데이터의 타입(content-type)을 정해줘야함.
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");	
xhttp.send("fname=Henry&lname=Ford");

4. 응답을 받을 때(받은 데이터 이용)

var xhttp = new XMLHttpRequest();
xhttp.onreadystatuschange = function(){
  if (this.readyState == 4 && this.status == 200) {
    // 서버의 응답이 온 상태, 이 안에서 다음의 속성과 메소드를 사용한다.
    alert(xhttp.responseText); 	// 문자열 데이터, json 데이터도 문자열 데이터이다.
    alert(xhttp.reponseXML); 	// xml형태의 데이터, 파서를 이용해서 이용해야함.
    xhttp.getResponseHeader();	// 특정헤더에 저장된 정보
    xhttp.getAllResponseHeader();	// 모든 헤더의 정보
  }
}
xhttp.open(...);
xhttp.send()

JQuery Ajax

1. 기본 구문

   1) $( selector ). action( )
   2) $ : JQuery 시작
   3) ( selector ) : html의 요소, css선택기와 같은 방식
   4) .action( ) : 요소에 대해 수행할 작업( jquery의 메소드 or 요소의 메소드 )

2. 사용하기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"/>
  
<script>
  $(document).ready(function() { 
  	// 페이지가 로드되기 전 jquery가 실행되는 것을 방지
  	// 모든 jquery 코드는 이 안에 작성한다.
  });
  
</script>

3. JQuery 코드로 Ajax 하기

$(document).ready(function() {
	
  	$.ajax({
		url : '서비스 주소',
  		data : '서비스 처리에 필요한 인자값',
  		type : 'HTTP방식' (POST/GET 등), 
  		dataType : 'return 받을 데이터 타입' (json, text 등),
  		success : function('결과값'){
			// 서비스 성공 시 처리 할 내용
		},
  		error : function('결과값'){
			// 서비스 실패 시 처리 할 내용
		}
	});
}

출처: https://freehoon.tistory.com/115?category=735500 [훈잇 블로그]