Javascript/AJAX

[jquery이용] Django에서 AJAX 사용하기

Kim_gorilla 2019. 7. 20. 01:32

1️⃣ What is AJAX?

**Ajax(Asynchronous JavaScript and XML)**는 비동기적인 웹 제작을 위한 기법입니다.

2️⃣ Why we use this?

웹사이트 내의 특정 페이지의 데이터 변화가 존재할 때 페이지를 **새로고침(refresh)**해야 적용이 됩니다. 이는 데이터의 변화빈도가 많다면 그만큼 **새로고침(refresh)**도 많이 수행해 주어야 한다는것을 의미합니다.

이러한 방법은 매우 불편하고 비효율적인 방법이며, 우리가 새로고침(refresh)이전에 가지고 있던 데이터에 비해 새로고침(refresh)이후에 새로 받은 데이터가 크게 변화된게 없다면 아주 작은 변화를 위해 이전에 받았던 데이터까지 몽땅 다 받아와야 함을 의미합니다.

이것은 매우 불편한 진실이고 트래픽이 증가하게되어 비효율적인 로딩이 많아지게 됩니다.
이러한 상황에서 우리는 AJAX통신을 사용합니다. AJAX이름에서 맨 앞의 **A는 synchronous**라는 의미로서 비동기라는 의미를 가지고 있습니다.

여기서 동기와 비동기에 대한 빠른 이해를 위해 예시를 들어 설명해 드리겠습니다.

가정 )

자 상황을 설정해 보죠, 우리는 야채를 사기위해서 야채가게에 서있다고 가정해 봅시다. !

이러한 상황에서 우리는 원하는 야채를 사기위해서 자신의 차례가 올때까지 줄을 기다려야 하며, 그동안은 아무 작업도 하지 못하게 됩니다.

이것이 일반적인 우리가 웹서버를 만들었을때 브라우저와 서버가 데이터를 주고 받는 모습입니다. 우리가 이전에 하던 작업을 끝내기 전까지는 다른 작업을 할 수 없음을 의미하고 그리고 이것을 **동기방식** 이라고 부릅니다.

이번에는 **비동기 방식**상황을 살펴보겠습니다. 이전예시와는 다르게 야채를 사기위해 줄을서서 기다리지 않고 번호표를 뽑은 후에 다른 작업을 하러 갑니다.

번호표를 뽑았기 때문에 내차례가 돌아왔을때 잠깐 들러서 원래 하려던 볼일을 보고 다른일을 하러 가면됩니다.

이처럼 이전 동작이 안 끝났어도 일단 제어권을 반납한 후 자신의 할일 계속하는 방식을 비동기 방식이라고 부르며, 이러한 방식을 통해서 필요한 데이터만을 쏘옥! 받아온 후에

document.getElementById("tag").innerHTML = 'hi';

를 이용해 받아온 데이터를 화면에 재구성하는 방법이 있습니다.

3️⃣ How to use AJAX?

🖐 JSON이란?

Javascript Object Notation 의 약자입니다.

JSON은 경량(Lightweight)의 DATA-교환 형식
Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.
특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

🖐 JSON 형태는?

'{ "firstName": "Kwon", "lastName": "YoungJae", "email": "kyoje11@gmail.com" }'

보시는것처럼 javascript의 list 형태 (python에서는 dictionary 형태죠?)를 띕니다.

🖐 주로 사용되는 JSON함수!

**JSON.stringify()**
- JSON.stringify() 메소드는 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환합니다. (EX. js에서 Server로 데이터를 넘겨서 Server에서 데이터를 사용해야 하는 상황)
- JSON.stringify(value)
- value에는 변환할 자바스크립트 객체를 전달합니다.
  
  이 메소드는 UTF-16으로 인코딩된 JSON 형식의 문자열을 반환합니다.

**JSON.parse()**
- JSON.parse() 메소드는 JSON.stringify() 메소드와는 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환합니다. (EX. Server에서 js로 보낸 데이터를 객체로 만들어서 사용하는 상황)
- JSON.parse(text)
- // JSON 형식의 문자열 var data = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}'; var dog = JSON.parse(data); // JSON 형식의 문자열을 자바스크립트 객체로 변환함. document.getElementById("json").innerHTML = dog + "<br>"; document.getElementById("json").innerHTML += dog.name + ", " + dog.family;

**toJSON()**
- 자바스크립트의 toJSON() 메소드는 자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환하여 반환합니다.
  
  따라서 이 메소드는 Date.prototype 객체에서만 사용할 수 있습니다.
- var date = new Date(); // 자바스크립트 Date 객체 var str = date.toJSON(); // Date 객체를 JSON 형식의 문자열로 변환함. document.getElementById("json").innerHTML = date + "<br>"; document.getElementById("json").innerHTML += str;

⭐️ 실습!!

빠른 실습을 위해서 우리는 Jquery라이브러리를 사용한 AJAX 통신을 해볼것입니다.

(※ jquery 기본문법 공부 참고는 아래 사이트 참고바랍니다! ※) <https://www.w3schools.com/jquery/default.asp>

👨‍💼: jquery CDN추가해줍니다.

👨‍💼 : $.ajax의 문법은 아래와 같습니다.

jQuery.ajax( [settings ] )

setting는 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어갑니다. 주요한 옵션을 열거해보면 아래와 같습니다.

**data** 서버로 데이터를 전송할 때 이 옵션을 사용한다.
**dataType** 서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.
**success** 성공했을 때 호출할 콜백을 지정한다. Function( PlainObject data, String textStatus, jqXHR jqXHR )
**type** 데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.
**error** 실패했을 때 호출할 콜백을 지정한다.

👨‍💼 : python에서 json을 사용하기 위한 라이브러리를 받습니다.

pip install simplejson

👨‍💼 : 그 후 views.py 상단에 다음과 같이 라이브러리를 임포트 해줍니다.

import simplejson as json

👨‍💼: DATA를 views.py에서 반환할때

return HttpResponse(json.dumps(context), content_type="application/json")

▶ index.html 결과 화면

Hello, world!

hello

▶ index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <p id="example">hello<br></p>
    <input type="button" id="execute" value="execute" />    

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $('#execute').click(function(){
            $.ajax({
                url:"{% url 'ajax' %}",
                dataType:'json',
                success:function(data){
                    var str = '';
                    alert('ajax통신성공!!');
                    alert(data);
                    for(var name in data){
                        str += '<li>'+'1.KEY: '+name+'</li>';
                        str += '<li>'+'2.VALUE: '+data[name]+'</li>';
                    }
                    alert(str)
                    $('#example').html('<ul>'+str+'</ul>');
                },
                error: function(request, status, error){ // 통신 실패시 - 로그인 페이지 리다이렉트
                    alert("ajax통신실패...")
                    alert(error)
                    alert(request)
                    window.location.replace("{% url 'main' %}")
                    //  alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
                },
            })
        })
    </script>
    </body>
</html>

▶ example앱 ➡️ urls.py

from django.contrib import admin 
from django.urls import path, include 

urlpatterns = [ 
	path('admin/', admin.site.urls), 
	# example app의 urls.py로 이동합니다. 
	path('', include('example.urls')), 
    ]

▶ example앱 ➡️ views.py

from django.shortcuts import render 
from django.http import HttpResponse  # 이것 추가해줍니다. 
import simplejson as json # 이것 추가해줍니다. 

# Create your views here. 
def main(request): 
	return render(request, 'index.html') 

def ajax(request): 
	example = 'hello AJAX!' 
    context = { 'hello' : example } 
    return HttpResponse(json.dumps(context), content_type="application/json")

저작자표시 비영리

[jquery이용] Django에서 AJAX 사용하기

[jquery이용] Django에서 AJAX 사용하기

1️⃣ What is AJAX?

2️⃣ ​Why we use this?

가정 )

3️⃣ How to use AJAX?

🖐 JSON이란?

🖐 JSON 형태는?

🖐 주로 사용되는 JSON함수!

⭐️ 실습!!

Hello, world!

2️⃣ Why we use this?