8. (ajax/에이젝스) jsonp data type 지정해서 데이터 전송 실시 및 object 형식 데이터 확인 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : ajax

/* =========================== */

​

/* =========================== */

[소스 코드]

 

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

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

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
    	2. JSONP : 외부로 들어오는 악성코드들 예방하기 위해 특별한 포장으로 데이터를 감싸서 반환하는 것입니다
    	3. JSONP는 HTML로 작성한 후 AJAX로 데이터를 얻어 올 때 웹 보안에 따라 스크립트 오류, 크로스 도메인 문제 발생 시 사용합니다    	
    	*/

   	
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	$(window).load(function(){
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");

    		// 이벤트 함수 호출 
    		requestGet();
    	});



    	/* [이벤트 함수 정의] */
    	function requestGet(){
    		console.log("");
    		console.log("[requestGet] : [start]");    		
    		console.log("");
    		
    		console.log("");
    		console.log("[request url] : " + "http://jsonplaceholder.typicode.com/posts");
    		console.log("[request data] : " + "userId=1&id=1");
    		console.log("[request type] : " + "JSONP");
    		console.log("[request format] : " + "http://jsonplaceholder.typicode.com/posts?userId=1&id=1");
    		console.log("[request method] : " + "GET");
    		console.log("");
    		
    		$.ajax({
    			/* 요청 시작 부분 */
    			url: "http://jsonplaceholder.typicode.com/posts", //주소
    			data: { //전송 데이터
    				"userId" : 1,
    				"id" : 1
    			},    			
    			type: "GET", //전송 타입
    			async: true, //비동기 여부
    			dataType: "JSONP", //응답받을 데이터 타입 (XML,JSON,TEXT,HTML, JSONP)
    			
    			/* 응답 확인 부분 */
    			success: function(response) {
    				console.log("");
    				console.log(response); // 특정 객체 object 형식 확인
    				console.log("[response] : [id] : " + response[0].id); //필요한 데이터 추출
    				console.log("[response] : [title] : " + response[0].title); //필요한 데이터 추출
    				console.log("[response] : [userId] : " + response[0].userId); //필요한 데이터 추출
    				console.log("[response] : [body] : " + response[0].body); //필요한 데이터 추출
    				console.log("");    				
    			},
    			    			
    			/* 에러 확인 부분 */
    			error: function(xhr) {
    				console.log("");
    				console.log("[error] : " + xhr);
    				console.log("");    				
    			},
    			    			
    			/* 완료 확인 부분 */
    			complete:function(data, textStatus) {
    				console.log("");
    				console.log("[complete] : " + textStatus);    				
    				console.log("");    				
    			}
    		});
									
    	};

    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. JSONP : 외부로 들어오는 악성코드들 예방하기 위해 특별한 포장으로 데이터를 감싸서 반환하는 것입니다

3. JSONP는 HTML로 작성한 후 AJAX로 데이터를 얻어 올 때 웹 보안에 따라 스크립트 오류, 크로스 도메인 문제 발생 시 사용합니다

*/

/* =========================== */