10. (ajax/에이젝스) post body json 방식 및 다중 헤더 (header) 추가, 안드로이드 파이어베이스 fcm 푸시 알림 전송

---

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : ajax

---

[소스 코드]

​

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. $.ajax() : 비동기식 Ajax를 이용하여 HTTP 요청을 전송합니다 (가장 흔히 사용)
    	2. beforeSend : 통신 요청 전 필요한 헤더 값을 정의합니다
    	3. success : 요청 성공 시 리턴 받는 데이터를 확인할 수 있습니다
    	4. error : 요청 실패 에러 상태를 표시해줍니다
    	5. complete : 요청 완료 상태를 표시해줍니다
    	6. POST BODY JSON 전송 시 설정 값 :
    	    - xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    	    - dataType: "JSON"
    	7. 설명 :     	
    	    - 안드로이드 FCM 푸시 알림 메시지를 발송합니다 
    	    - 안드로이드 FCM 푸시 onMessageReceived 부분에서 RemoteMessage getData 메소드를 사용해 확인가능합니다    	    
    	    - AJAX에서 푸시를 발송하기 위해서는 파이어베이스 콘솔에 등록된 서버 키를 헤더에 추가해줘야합니다 
    	*/



    	/* [이벤트 수행 함수] */
    	function requestPostBodyJson(){
    		console.log("");
    		console.log("[requestPostBodyJson] : [start]");    		
    		console.log("");


    		// [요청 url 선언 및 추가 헤더 키 선언]
    		var reqURL = "https://fcm.googleapis.com/fcm/send"; // 요청 주소
    		var serverKey = "key=AAAAOQ6ylIM:APA91bEbn6_43LUcI..."; // 헤더에 추가할 푸시 서버 키


    		// [전송 데이터 선언 실시]
    		var pushToken = "dsOVgw-OQVWqxtdhLlZHgzK0..."; // 클라이언트 푸시 토큰    		
    		var jsonData = { // Body에 첨부할 json 데이터
    				"data" : {"title":"Push Test", "body":"AJAX 푸시테스트"},
    				"to" : pushToken,
    				"Android" : {
    					"priority" : "high"
    				},
    				"priority" : 10
    			};    		
    		
    		console.log("");
    		console.log("[requestPostBodyJson] : [request] : [url] : " + reqURL);    		    	
    		console.log("[requestPostBodyJson] : [request] : [method] : " + "POST BODY JSON");
    		console.log("[requestPostBodyJson] : [request] : [body data] : " + JSON.stringify(jsonData));
    		console.log("");
    		
    		
    		/* [ajax 통신 정의 부분] */
    		$.ajax({    			
    			// [요청 시작 부분]
    			url: reqURL, // 주소
    			data : JSON.stringify(jsonData), //json 데이터
    			type: "POST", // 전송 타입
    			async: true, // 비동기 여부
    			timeout: 5000, // 타임 아웃 설정
    			dataType: "JSON", // 응답받을 데이터 타입 (XML,JSON,TEXT,HTML) 
    			//contentType: "application/json; charset=utf-8", //헤더의 Content-Type을 설정     			
    			beforeSend : function(xhr){ // 다중 헤더 추가 실시
    				xhr.setRequestHeader("Authorization", serverKey); // 푸시 서버 key 등록
    				xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8"); //헤더의 Content-Type을 설정		
    			},    			
    			    			
    			// [응답 확인 부분] 
    			success: function(response) {
    				console.log("");
    				console.log("[requestPostBodyJson] : [response] : " + JSON.stringify(response));
    				console.log("");    				
    			},
    			    			
    			// [에러 확인 부분]
    			error: function(xhr) {
    				console.log("");
    				console.log("[requestPostBodyJson] : [error] : " + xhr);
    				console.log("");    				
    			},
    			    			
    			// [완료 확인 부분]
    			complete:function(data,textStatus) {
    				console.log("");
    				console.log("[requestPostBodyJson] : [complete] : " + textStatus);
    				console.log("");    				
    			}
    		});									
    	};	    
    	
    </script>

---

[결과 출력]

​

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. $.ajax() : 비동기식 Ajax를 이용하여 HTTP 요청을 전송합니다 (가장 흔히 사용)

2. beforeSend : 통신 요청 전 필요한 헤더 값을 정의합니다

3. success : 요청 성공 시 리턴 받는 데이터를 확인할 수 있습니다

4. error : 요청 실패 에러 상태를 표시해줍니다

5. complete : 요청 완료 상태를 표시해줍니다

6. POST BODY JSON 전송 시 설정 값 :

- xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");

- dataType: "JSON"

7. 설명 :

- 안드로이드 FCM 푸시 알림 메시지를 발송합니다

- 안드로이드 FCM 푸시 onMessageReceived 부분에서 RemoteMessage getData 메소드를 사용해 확인가능합니다

- AJAX에서 푸시를 발송하기 위해서는 파이어베이스 콘솔에 등록된 서버 키를 헤더에 추가해줘야합니다

*/

---