장고 - Ajax 기초 학습

1. Ajax 정의

Ajax(Asynchronous JavaScript and XML)

  • JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술
  • JavaScript 라이브러리
  • 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법



장점

  1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신(웹 페이지 속도 향상)
  2. 웹 페이지가 로드된 후에 서버로 데이터 요청
  3. 웹 페이지가 로드된 후에 서버로부터 데이터 전송
  4. 백그라운드 영역에서 서버로 데이터 전송
  5. 기존 웹에서는 불가능했던 다양한 UI 가능

단점

  1. 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식 사용
    –> 서버 푸시 방식의 서비스 제작 불가
  2. binary 데이터를 보내거나 받을 수 없다.
  3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없다.
  4. 클라이언트 PC로 Ajax 요청을 보낼 수 없다.

2. Ajax project 생성

Ajax 사용법에 대해 예제를 통해서 간단히 알아보자.

1. 디렉토리 생성 (디렉토리명: ajax_project)

1
$ mkdir ajax_project

2. 해당 디렉토리에서 가상환경 생성

  • 가상환경에서 python을 원하는 버젼으로 설정하여 생성한다. (여기서는 python3.6으로 설정) 
    1
    $ virtualenv --python=python3.6 venv

3. django 설치

  • pip install을 사용하여 django를 설치한다. (여기서는 버젼 2.1로 설치) 
    1
    $ pip install django==2.1

4. 프로젝트 생성 (프로젝트명: config)

  • 현재 디렉토리에 config 프로젝트 생성 
    1
    $ django-admin startproject config .

5. 프로젝트 뷰 생성 및 간략 작성

  • 데이터를 입력받는 뷰와 데이터를 받아주는 뷰를 작성한다.

    경로: config > views.py

    1
    2
    3
    4
    5
    6
    7
    8
    9
    from django.shortcuts import render

    # 데이터를 입력받는 뷰, 사용자의 입력을 받는 뷰
    def index(request):
        pass

    # 데이터를 받아주는 뷰, 처리후 응답을 하는 뷰
    def get_data(request):
        pass

6. 뷰를 연결할 url 생성

경로: config > urls.py

1
2
3
from django.contrib import admin
from django.urls import path
from .views import index, get_data

7. 프로젝트 하위 폴더에 데이터를 요청하는 템플릿 엔진 생성

  • 해당 HTML에서 데이터를 요청한다.

    경로: config > layout(생성) > index.html(생성)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>AJAX 연습</title>
    </head>
    <body>
        test
        <a href="#">링크 버튼</a>

        <form action="" method="post">
            {% csrf_token %}
            Username : <input type="text" name="username"><br>
            Email : <input type="text" name="email"><br>
            Content : <textarea name="content"></textarea><br>
            <input type="submit" id="send_form" value="Send">
        </form>

        <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            csrf_token = "{{csrf_token}}"
            /*
                HTML : 레이아웃, 컨텐츠
                CSS : 꾸미기
                JavaScript : 동작
                1. 언제 : 페이지가 로드가 끝났을 떄? 사용자가 어떤 액션을 취했을 때냐?
                    event - 마우스 클릭 or 키보드 입력 or 스크롤
                2. 무엇을 : 어떤 요소를? 브라우저 객체를?
                3. 어떻게 : 삭제? 추가? 변경? 숨기기? 보이기?
            */
            $(function() {
                // 페이지 로드가 끝났을 때 추가하는 부분(대부분 이 안에 추가된다.)
                $('a').click(function() {
                    alert('a 태그를 클릭하셨습니다.');
                });

                $('a').mouseover(function() {
                    console.log('마우스 오버');
                });

                $('#send_form').submit(function(e) {
                    // 원래의 동작 금지(ex. 링크 클릭하면 주소 이동 금지)
                    e.preventDefault();      
                    data = $(this).serialize 
                    // $(this) : 해당 이벤트 발생된 주체
                    // serialize : 데이트 전송 편하도록 직렬화

                    // ajax로 데이터 전송
                    $.ajax({            
                        url: "{% url 'get_data' %}", // ajax로 데이터 교환할 페이지 주소
                        method: "POST",
                        data: data
                    }).done(function() {
                        alert(data.message);
                    });
                    return false;
                });
            });

            /*
            데이터를 전송하는 페이지(HTML), 데이터를 전송받는 페이지(django view)
            HTML - 회원가입, 좋아요 데이터 전송 
            -> 장고측 뷰가 데이터를 받아 모델 처리, 로직 처리
            -> 모델처리가 완료되면 메시지, 혹은 처리 결과 데이터를 다시 HTML로 전송
            -> HTML은 응답받은 데이터를 가지고 화면에 정보 출력

            $.ajax({
                url: "클라이언트가 요청 보낼 서버의 URL 주소",
                method:"POST",          // HTTP 요청 방식(GET, POST)
                type: "json",           // 서버에서 보내줄 데이터의 타입(default값으로 json으로 되어있다.)
                data: {name: "홍길동"}   // HTTP 요청과 함께 서버로 보낼 데이터

            }).done(function(data) {    // HTTP 요청 성공 시, 요청한 데이터가 done() 메소드로 전달

            }).fail(function(xhr, data) {     // HTTP 요청 실패 시, 오류와 상태에 관한 정보가 fail() 메소드로 전달

            }).always(function(xhr, data) {   // HTTP 요청의 성공여부와는 상관없이 언제나 always()메소드 실행

            });
            */
        </script>

    </body>
    </html>

8. 프로젝트 뷰 상세 작성

  • 프로젝트(config)의 뷰에서 데이터를 전송 받는다.

    경로: config > views.py

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    from django.shortcuts import render
    from django.http import JsonResponse

    # 데이터를 입력받는 뷰, 사용자의 입력을 받는 뷰
    def index(request):
        return render(request, 'index.html')

    # 데이터를 받아주는 뷰, 처리후 응답을 하는 뷰
    def get_data(request):
        print(request.POST)
        """
        class A:
            type = 'b'
            weight = 180
        a = A()
        a를 Json으로 보내려면, JsonResponse를 이용해 텍스트형식으로 변환 
        a -> {'type':'b', 'weight':180}
        """
        # 처리부
        username = request.POST.get('username')
        email = request.POST.get('email')
        content = request.POST.get('content')
        
        return JsonResponse({'message':"email sent to"+email}
Posted  
tags:
  • { Django }
  • { Ajax }