[Djanogo] 06. Ajax 통신

2019. 4. 14. 22:08Python관련/Django

1. Ajax 

비동기식 자바스크립트 XML (Asynchronous Javascript And  Xml) 의 약자로써 하이퍼 텍스트 표기언어만으로 어려운 다양한 작업을 웹페이지에서 구현해 상호 작용 할수 있도록 만든 기술

 

별도의 ActiveX 설치나 웹페이지를 다시 로딩하지 않고서도 메뉴등 화면상의 객체를 자유롭게 다룰수 있는 장점이 있으며 속도도 빨라 웹기술로 각광 받고 있다. 

 

2. 구성

Template와 View 의 비동기 통신을 위해 Ajax 통신 구성

 

이때 필요한 모듈이 있으며 Jquery 라른 javascript 를 사용한다. 

 

① View 구성 할 것

-  Ajax 통신방식은 여러 방식이 있지만 저는 json 방식을 사용합니다.

import json

- 결과를 리턴하기 위해 HttpResponse를 사용합니다.

from django.http import HttpResponse

- csft 모듈을 추가로 사용합니다. 

from django.view.decorators.csrf import csrf_exempt

- Ajax 통신할 함수 추가

@csrf_exempt

def Time_Request(Request):

     now=datetime.datetime.now()

     context={'meg': now.strftime('%Y-%m-%d %H:%M:%S')}

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

솔찍히 여기서 @csrf_exempt 를 쓰는 이유는 아직 제대로 안알아 봐서 모르겠다.

csrf_exempt 장고의 취약점 대응 모듈인듯한데 안해줘도 상관없지만 해주면 보안에 대한 취약점이 개선되는듯

 

그리고 위에 함수는 현재 시간을 실시간으로 확인하기 위한 함수로 import datetime을 해주어야 한다. 

 

② Template 구성

- JQuery 참조

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

head 사이에 jquery.js 를 추가해준다. 위의 예의 경우에는 온라인 코드를 참조한것이며 오프라인의 경우는 파일 다운로드 해서 경로를 참조해주면 된다. 

 

- 값을 입력한 div 추가

<body>

     <div id="Result">현재 시간</div>

 

</body>

 

- Result 아래 Ajax 스크립트를 추가한다. 

setInterval(function(){

$.ajax({

     url:'/ajax/Time_Request/',

     dataType:'json',

     type:'POST',

     data:{},

     success:function(result){

          $('#Result').text(result['msg']);

          }

     });

},200);

 

200ms 주기로 데이터를 수신하며 경로를 

/ajax/Time_Request/ 에서 경로에서 가져오게 됩니다.

통신 방신은 json이며 성공시 success로 반환 됩니다. 

 

반환된 결과값은 Result라는 Id에 text 값을 응답받은 result반환값중 'msg' 속성의 값을 가져오게 됩니다. 

 

③ URL

ajax를 사용하기 위해 url을 추가합니다.

path('Time_Request/', views.Time_Request, name 'Time_Request')로 추가합니다. 

'Python관련 > Django' 카테고리의 다른 글

[Django] 05. MVT 코딩순서  (0) 2019.04.07
[Django] 04. VSCode 설정  (0) 2019.04.01
[Django] 03. 계정 설정  (0) 2019.03.21
[Django] 02. setting 파일 설정  (0) 2019.03.18
[Django] 01. 설치  (0) 2019.03.18