3 분 소요

2022. 07. 05. 수업내용 정리

AJAX

  • Ajax

    Asynchronous JavaScript and XML을 의미합니다.

    웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해줍니다.

    백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시해 줍니다.


    <!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>jQuery Ajax Intro</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#requestBtn").on("click", function() {
				$("#text").load("/examples/media/jquery_ajax_data.txt");
			});
		});
	</script>
</head>
  
<body>
  
	<h1>제이쿼리와 Ajax</h1>
	<p id="text">이 단락에 다른 텍스트를 불러와보죠!</p>
	<button id="requestBtn">데이터 불러오기!</button>
  	
</body>
  
</html>

    웹페이지 화면 ▼

    GOMCAM_20220708_2003090978_AdobeExpress



  • Ajax 프레임워크

    Ajax를 사용하여 손쉽게 개발할 수 있도록 미리 여러 가지 기능들을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다.

    이러한 Ajax 프레임워크 중에서도 가장 많이 사용되는 대표적인 프레임워크는 다음과 같습니다.

    • Prototype

    • script.aculo.us

    • dojo

    • jQuery

    현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다.

    제이쿼리에서는 Ajax 기능을 손쉽게 사용할 수 있도록 여러 메소드를 제공하고 있습니다.

    이러한 메소드를 사용하면 HTTP 요청(request)을 손쉽게 보낼 수 있습니다.

    또한, 데이터의 종류에 따라 그에 알맞는 메소드를 사용하여 서버에 데이터를 요청할 수 있습니다.


  • HTTP 요청 방식

    클라이언트인 브라우저가 서버에 HTTP 요청을 보낼 때는 다음 방식 중 하나를 사용합니다.

    1. GET 방식

    2. POST 방식



    • GET 방식

      GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식입니다.

      GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다.

      또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다.

      따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다.


      • $.get()메소드

        제이쿼리에서는 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메소드를 제공합니다.

        이 메소드를 사용하면 서버에 GET 방식의 HTTP 요청을 보낼 수 있습니다.

        원형
$.get(URL주소[,콜백함수]);

        URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소입니다.

        콜백 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의합니다.


        <!DOCTYPE html>
<html lang="ko">
      
<head>
	<meta charset="UTF-8">
	<title>jQuery Ajax HTTP Request</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#requestBtn").on("click", function() {
				// GET 방식으로 서버에 HTTP Request를 보냄.
				$.get("/examples/media/request_ajax.php",
					{ species: "고양이", name: "나비", age: 3,  },	// 서버가 필요한 정보를 같이 보냄.
					function(data, status) {
						$("#text").html(data + "<br>" + status);	// 전송받은 데이터와 전송 성공 여부를 보여줌.
					}
				);
			});
		});
	</script>
</head>
      
<body>
      
	<h1>$.get() 메소드</h1>
	<button id="requestBtn">GET 방식으로 데이터 불러오기!</button>
	<p id="text"></p>
      	
</body>
      
</html>

        웹페이지 화면 ▼

        GOMCAM_20220708_2016560881_AdobeExpress



    • POST 방식

      POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식입니다.

      POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않습니다.

      또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송됩니다.

      따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높습니다.


      • $.post() 메소드

        제이쿼리에서는 Ajax를 이용하여 POST 방식의 HTTP 요청을 구현한 $.post() 메소드를 제공합니다.

        이 메소드를 사용하면 서버에 POST 방식의 HTTP 요청을 보낼 수 있습니다.

        $.post(URL주소[,데이터][,콜백함수]);

        URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소입니다.

        데이터는 HTTP 요청과 함께 서버로 보낼 데이터를 전달합니다.

        콜백 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의합니다.


        <!DOCTYPE html>
<html lang="ko">
      
<head>
	<meta charset="UTF-8">
	<title>jQuery Ajax HTTP Request</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#requestBtn").on("click", function() {
				// POST 방식으로 서버에 HTTP Request를 보냄.
				$.post("/examples/media/request_ajax.php",
					{ name: "홍길동", grade: "A" },	// 서버가 필요한 정보를 같이 보냄.
					function(data, status) {
						$("#text").html(data + "<br>" + status);	// 전송받은 데이터와 전송 성공 여부를 보여줌.
					}
				);
			});
		});
	</script>
</head>
      
<body>
      
	<h1>$.post() 메소드</h1>
	<button id="requestBtn">POST 방식으로 데이터 불러오기!</button>
	<p id="text"></p>
      	
</body>
      
</html>

        웹페이지 화면 ▼

        GOMCAM_20220708_2028170114_AdobeExpress



    • GET vs POST

      특징 GET 방식 POST 방식
      캐시화(cached) 캐시될 수 있음. 캐시되지 않음.
      브라우저 히스토리 히스토리에 쿼리 문자열이 기록됨. 히스토리에 기록되지 않음.
      데이터 길이 익스플로러 서비스 종료와 함께 제한 없음으로 변경됨. 제한 없음.
      데이터 타입 오직 ASCII 문자 타입의 데이터만 전송할 수 있음. 제한 없음.
      보안성 데이터가 URL 주소에 포함되어 전송되므로, 아무나 볼 수 있어 보안에 매우 취약함. 브라우저 히스토리에도 기록되지 않고, 데이터가 따로 전송되므로, GET 방식보다 보안성이 높음.



  • $.ajax() 메소드

    $.ajax() 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드입니다.

    $.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공합니다.

    문법
$.ajax(URL주소[,옵션])

    URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소입니다.

    옵션은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합입니다.



    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrap{
            width:1000px;
            height:1000px;
            background-color: aqua;
        }
    </style>
    <script src="./js/jquery.min.js"></script>
    <script>
        var movieList=[]//전역-빈배열
        function getData(){
            $.ajax(
                {
                    url:"https://yts.mx/api/v2/list_movies.json",
                    method:"GET",
                    dataType:"json"
                }
            ).done(function(response){
                console.log(response)//Object
                //JSON데이터
                console.log(response.data.movies)//배열만
                movieList=response.data.movies
            })
        }
        function makeScreen(){
            alert("화면생성")
            for(var i=0; i<movieList.length; i++){
                var myDiv=document.createElement('div')
                myDiv.innerText=movieList[i].title
                document.getElementById('wrap').appendChild(myDiv)
            }
        }
    </script>
</head>
<body>
    <div id="wrap">
  
    </div>
    <button onClick="getData()">요청</button>
    <button onClick="makeScreen()">화면생성</button>
</body>
</html>

    웹페이지 화면 ▼

    GOMCAM_20220710_1456520276_AdobeExpress



    Ajax와 관련된 다양한 메소드

    메소드 설명
    $.ajax() 비동기식 Ajax를 이용하여 HTTP 요청을 전송함.
    $.get() 전달받은 주소로 GET 방식의 HTTP 요청을 전송함.
    $.post() 전달받은 주소로 POST 방식의 HTTP 요청을 전송함.
    $.getScript() 웹 페이지에 스크립트를 추가함.
    $.getJSON() 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음.
    .load() 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함.

태그:

카테고리:

업데이트:

댓글남기기

참고

Tip03

1 분 소요

CLI Command 정리 명령어 간단 정리..