익명 즉시실행 함수

개념

*익명 함수(무명 함수)와 즉시 실행 함수가 합쳐진 이름이 바로 익명 즉시실행 함수 이다.

즉, 익명 함수인데 즉시 실행하는 함수가 익명 즉시실행 함수가 되는것 이다.

기존의 함수 호출 방식과는 다르게 선언과 동시에 실행되는 것이 익명 즉시실행 함수이다.

한마디로, 함수를 호출하지 않아도 자동으로 로드되는 함수 라고 표현 할 수 있다.

*익명 함수 : 이름이 없는 함수를 말합니다.

var myFunc = function() {
};

setTimeout(function() {
}, 5000);

문법

//1번 (jquery 필요)
$(document).ready(function(){
alert('hello');
});

//2번 (jquery 필요)
 $(function(){
    alert('hello');
});

//3번
(function(){
    alert('hello');
 })();

//4번
 window.onload=alert('hello');

우선순위

1. (function(){  })();
2. window.onload = function(){};
3. $(document).ready(function(){ }); , $(function(){ });

(function(){  })();

javascript 권장 익명 즉시실행 함수 

$(document).ready(function(){ }); == $(function(){ }); 동일 (jquery 필요)

document 곧 HTML 문서의 처음부터 끝까지를 모두 웹브라우저가 인식한 다음에 실행

이미지 리소스 다운로드까진 기다리지않음

window.onload = function(){};

DOM레벨 0방식의 자바스크립트 이다.

document 곧 HTML 문서의 처음부터 끝까지를 모두 웹브라우저가 인식한 다음에 실행

이미지 리소스 다운로드까지 기다렸다가 실행

이미지를 기다린 후 실행해야할 경우는 window.onload를 이용

문법만 빠르게 알아봤고 자세한 개념은 HTML 랜더링과 함께 다루겠습니다.

AJAX 요청을 보내는 방법

1.XMLHttpRequest(XHR) 사용

2.jQuery를 이용한 ajax 사용

1.XMLHttpRequest(XHR) 사용 방법

문법

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', '/ajax/ajaxController'); // 메소드와 주소 설정
xhr.send(); // 요청 전송 
// xhr.abort(); // 전송된 요청 취소

코드 설명

xhr.open : open(방식(GET, POST, PUT, PATCH, DELETE, HEAD), "보낼 서버 주소")이라는 메소드 실행

xhr.send : open이 요청을 열어줬다면 send로 요청을 전송해준다.

onreadystatechange : 요청에 대한 응답을 받는 이벤트 리스너 

readyState : 요청 시 xhr 객체(코드의 첫 줄) 각 상태별로 readyState가 변경됨 

readyState 상태 순서 

0(xhr.UNSENT, 보내지 않음) -> open() 메소드 실행
1(xhr.OPENED)로 변경 -> send() 메소드 실행
2(xhr.HEADERS_RECEIVED)로 변경
3(xhr.LOADING) 로딩중...
4(xhr.DONE) 요청이 완료됨

if (xhr.readyState === xhr.DONE)  줄 해석

여기서 말하는 DONE이 readyState의 4번 DONE를 가리킴

요청이 완료되면 무~조~건 HTTP 상태 코드가 생깁니다.

if (xhr.status === 200 || xhr.status === 201) 줄 해석

여기서 200 || 201이란? 

HTTP 상태 코드를 말한다 

HTTP 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다

위 1번 방식을 사용하게 되면 엄청 복잡하고 코드도 길어진다.

내가 알던 ajax 문법과 다르다?라고 하시는 분들이 계실 겁니다.

그것은 바로 대중적으로 알려진 jQuery를 이용한 ajax입니다.

2.jQuery를 이용한 ajax 사용

문법

Client (request , 요청)

 <!-- 이렇게 함으로써 외부의 CDN 서버에서 가장 최신의 jQuery 배포판을 불러 올 수 있습니다. //-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    <script>
    function jqueryAJAX(){
    
    $.ajax({
   
    data : { type1 : type1, // data 옵션
    		 type2 : type2,
    },	// 끝에 컴마(,)를 주의해야됨
    url : "/ajax/ajaxController", // url 필수
    success:function(data){ // success option
    console.log(data.length);
    }
    
    })
    
    }
    
    
    </script>

Server (response , 응답 Spring MVC 프레임워크 기준)

@Controller
@RequestMapping("ajax/*")
public class JqueryController {

@RequestMapping("ajax/ajaxController")
	public @ResponseBody List<serverData> getServerData(String type1,String type2) {
		List<serverData> result = menuservice.getServerData(type1,type2);
		return result;
	}

}

Client 코드 설명

$. ajax({}) : ajax 선언

data : server로 보낼 데이터 정의

url (필수) : server로 보낼 url

success : function(data) : 요청이 성공했을 때 (HTTP (2xx)) 실행되는 메서드 (data)는 server에서 보낸 리턴 값

Server 코드 설명(Spring mvc에 대한 설명이며 , 다른 언어, 프레임워크는 다를 수 있습니다)

@Controller : 해당 Class를 Controller로 지정하는 어노테이션

@RequestMapping : 해당 Class의 유입 경로는 ajax로 시작하는 url만 받겠다는 어노테이션 예시처럼

                                       ajax/ajaxController로 ajax로 보냈으니 거기에 해당하는 놈이 받는다는 뜻

@RequestBody : 값이 View로 가는 게 아니라 HTTP Response Body로 직접 쓰임 ajax로 데이터 받을 땐 필수

jquery ajax 문법 옵션 정리

url (필수) : 서버(Server)로 보낼 URL

url : "/ajax/ajaxController"

data (선택) : 서버(Server)로 보낼 데이터

//일반
data : { type1 : type1, 
    	 type2 : type2 }
          
//JSON 데이터로 보내기
data : JSON.stringify({ 
	  type1 : type1, 
    	  type2 : type2})

dataType (선택) 종류 : 통신의 결과로 넘어올 데이터의 종류를 지정

dataType : "json" - JSON 형식의 데이터로 배열,객체를 포함하는 문자열(권장)

dataType : "text" - 일반적인 문자열

dataType : "html" - HTML을 포함한 문자열

dataType : "script" - 새로운 스크립트

dataType : "jsonp" - 다른 도메인으로 부터 전송되는 JSON 데이터

dataType : "xml" -  XML 형식의 데이터

기본 값 : MIME 유형

type (선택) 종류 : GET, POST , DELETE , PUT 통신 방식 지정

type : 'GET' - GET 방식으로 서버(Server)에 전송 [조회]

type : 'POST' - POST 방식으로 서버(Server)에 전송 [생성]

type : 'DELETE' - DELETE 방식으로 서버(Server)에 전송 [삭제]

type : 'PUT' - PUT 방식으로 서버(Server)에 전송 [갱신]

기본 값 : 'GET'

timeout (선택) : 1000 - 요청에 대한 응답 제한 시간으로 단위는 millisecond 

timeout : 1000 ( 단위 : millisecond ) 즉, 1000당 1초 

contentType (선택) :  - 서버에 데이터를 보낼 때 형식을 지정

contentType : "application/json" - 서버에 데이터를 보낼 때 형식을 JSON 형식으로 보냄

기본 값 : "application/x-www-form-urlencoded"

beforeSend (선택) : function() {}, - HTTP 요청 전에 발생하는 이벤트 핸들러

beforeSend : function() {
	alert("ajax 호출 시작 시 실행");
}

success (선택) : function(data) {}, - HTTP 요청 성공 시 이벤트 핸들러

success : function(data) {
	alert(data);
}

data : 서버에서 응답한 return 값

error (선택) : function(request, status, error) {}, - HTTP 요청 실패 시 이벤트 핸들러

error : function(request,status,error) {
	
}

request : 
status : HTTP 상태 코드
error : 에러 메시지

complete (선택) : function() {} -  HTTP 요청 완료 시 이벤트 핸들러 (success는 요청 성공 시 , complete는 요청 완료 시)

complete : function() {
	alert("ajax 호출 완료 시 실행");
}