1. ajax 서론

ajax는 Asynchronous JavaScript and XML의 줄임말로 비동기통신을 의미합니다. 

ajax Wikipedia : https://ko.wikipedia.org/wiki/Ajax


예를 들어 설명하겠습니다. 무언가를 form에서 post요청으로 서버에 보내는 작업을 생각해 보겠습니다. ajax가 없다면 post요청 후에 서버로부터 데이터를 받아 브라우저의 화면이나 상태가 변할 것입니다. 이렇게 되면 최근 인터넷에서 좋아요 버튼을 누르더라도 화면이 변경되거나 필요하지 않은 새로고침 효과까지 사용자가 경험하게 됩니다. 하지만 많은 인터넷 페이지에서 그런 경우가 발생한다면 사람들이 많이 실망할 것입니다. 


이런 경우 ajax를 사용하면 다른 브라우저 구성요소의 변동 없이 서버와 통신할 수 있습니다. 좋아요 버튼을 누르더라도 누른 버튼만 변경될 뿐 브라우저 전체의 변동은 없게 되는 것입니다. 물론 iframe등의 방법을 통해서도 이런 동작을 가능하게 할 순 있습니다. 하지만 ajax가 주는 안정성과 편리성은 따라갈 수 없습니다.


ajax통신을 하기 위해선 javascript만으로도 가능할 것입니다. 그러나 jQuery는 ajax통신을 획기적으로 편하게 해줍니다.


2. ajax 예제

저는 jQuery를 이용한 ajax를 구현해 보겠습니다. 


$("#submitBtn").click(function () {
  var getText = $("#submitTextarea").val();
  $.ajax({
    url:"/someurl/",
    type:"post",
    data:{
      c : getText,
    },
    dataType:"json",
    cache : false,
    success : function (data) {
      $.each(data, function (index, value) {
        do something
      });
 
    }
  });
});
cs


위 코드는 id 값이 submitBtn 인 버튼을 클릭했을 시에 ajax 통신이 발생하도록 만든 코드입니다.

클릭이 발생하면 id 값이 submitTextarea인 Textarea로부터 값을 가져옵니다. val(); 은 jQuery에서 제공하는 값을 가져오는 함수입니다.

그 다음 ajax 통신이 발생합니다. $.ajax 이 부분입니다. jQuery는 이런식으로 ajax를 호출합니다. 그 후 인자별로 설명해보겠습니다.


1. 먼저 url입니다. url에는 현재 호스트 주소에 url에 전달된 값을 붙여 서버의 어떤 url 담당 부분과 통신하게 될지 결정합니다.

저같은 경우는 example.com/someurl/과 통신하게 될 것입니다.

2. 그 다음 type입니다. http 통신의 타입인 get, post 중 post를 사용한다고 생각하시면 됩니다.

3. data입니다. data는 request.POST에 dict 형식으로 전송됩니다. 서버에서 request body에서 데이터를 가져오게 하고 싶을 때 설정하시면 됩니다. 

4. dataType입니다. 서버로부터 받게 될 데이터의 타입을 결정합니다. json 말고도 html 타입을 사용할 수 있습니다.

5. cache는 통신후 캐시할지에 대한 여부입니다. false로 하겠습니다. true일 경우 다른 통신에 지장을 주기도 하는 것 같았습니다.

6. success입니다. 통신이 성공한 후 처리하게 되는 부분입니다. function 의 인자인 data는 서버로부터 받게 되는 데이터를 의미합니다. 물론 data_get 같이 이름을 변경해도 상관 없습니다.

7. $.each() 함수는 jQuery에서 json 같은 데이터를 다룰 때 유용하게 쓰입니다. for문 대용으로 편리하게 인덱스의 수만큼 작업을 하게 도와줍니다.


이상으로 ajax에 대해 알아보았습니다. 요즘같이 동적인 웹을 필요로 할 땐 ajax가 아주 유용하게 사용됩니다. 

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery UI] jQuery UI 소개 및 예제  (0) 2018.02.12
[jQuery] jQuery 설치  (0) 2018.02.11

1. jQuery 소개

jQuery는 javascript를 브라우저에서 편리하게 사용할 수 있게 도와줍니다. javascript는 그 자체로 브라우저안에서 역동적으로 동작하지만 jQuery를 이용하면 복잡한 코드를 매우 간편하게 이용할 수 있습니다.

jQuery : https://jquery.com/


2. jQuery 설치 또는 준비

jQuery는 cdn형태로도 이용할 수 있고 직접 파일을 다운받아 사용할 수도 있습니다. html 코드 내에서 동작하므로 html 코드 내에 jQuery 내용을 불러올 수 있는 링크를 작성하면 됩니다. 

jQuery Download : http://jquery.com/download/

여기선 jQuery를 파일 형태로 다운받을 수 있습니다.


jQuery CDN : https://code.jquery.com/

여기에 들어가면 여러가지 버전의 CDN이 제공됩니다. 만약 jQuery 1.12.4 버전을 CDN 형태로 이용하고자 한다면 다음을 html 파일 내에 작성합니다.

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
cs


이렇게 html 파일 안에 작성한다면 그 다음부턴 html파일에서 다음과 같이 사용할 수 있습니다.


<script>
 
    $(document).ready(function () {
 
        $('#btn').click(function () {
            var text = $('#textarea').val();
            $.ajax({
                url:'/someurl/',
                type:'post',
                dataType:'json',
                cache:false,
                data:{
                },
                success:function (data) {
                    console.log('success!')
                }
            });
        });
 
 
    });
</script>
cs


<script></script> 처럼 script 태그 안에서 얼마든지 이용할 수 있게 됩니다. 

<script>
    $(document).ready(function () {
    });
</script>
cs


이 부분은 문서의 로드가 완료되어 준비가 된다면 중괄호 안의 코드를 실행한다는 뜻입니다. 문서가 로드되지도 않았을 때 코드가 실행된다면 예기치 못한 오류를 발생할 수 있을 때 사용합니다. 반드시 사용해야만 하는 코드는 아닙니다.

console.log('success!') 이 코드는 javascript의 브라우저 콘솔에서 메시지를 출력하는 코드입니다. jQuery 코드와 javascript 코드는 자유롭게 연동되어 사용될 수 있습니다. 콘솔은 크롬의 경우 f12를 눌러 열리는 개발자 도구에서 콘솔 창을 의미합니다.


3. jQuery의 선택자

jQuery는 html의 id값이나 class값을 굉장히 편리하게 선택할 수 있게 도와줍니다.

다음과 같은 코드가 있다고 하겠습니다.

<div class="div_class" id="div_id">이건 div입니다.</div>
cs


이 코드의 div를 선택하기 위해 자바스크립트에선 getElementById 나 getElementByClass 를 사용해야 했습니다. 그러나 jQuery는 아주 쉽게 할 수 있도록 해줍니다.


$(".div_class")
$("#div_id")
cs


이 두가지 jQuery 선택자는 모두 저 div를 지칭합니다. javascript를 사용할 때보다 훨씬 더 단순하고 쉽게 선택할 수 있게 도와줍니다.

나머지 javasciprt의 코드들도 jQuery를 선택한 후에 사용할 수 있으니 매우 쉽고 편리할 것입니다. 

저작자표시

'JavaScript' 카테고리의 다른 글

[jQuery UI] jQuery UI 소개 및 예제  (0) 2018.02.12
[jQuery] ajax 통신 예제  (0) 2018.02.11

자세한 설명은 https://wikidocs.net/22 에서 찾으실 수 있습니다.


for문은 프로그래밍에서 매우 자주 쓰이는 문법입니다. 반복이 조건에 맞춰 이뤄지기 때문에 자주 쓰일 수 밖에 없습니다. 이번엔 for 문을 알아보도록 하겠습니다.


1. for문 기본

파이썬에서 for문은 기본적으로 이런 형태를 갖습니다.

for something in some_list_tuple_wordarray:
    go something
    some method()
cs


in 이후의 리스트, 튜플, 문자열이 for문의 내용을 반복할 횟수를 결정합니다. 만약 리스트의 요소가 30개라면 30번 for문을 반복하게 되는 것입니다. 


2. django에서 응용

django 에서 for 문은 어떻게 사용될지 알아보겠습니다.

제가 만약 사용되면 안되는 password의 리스트를 갖고 있다고 해보겠습니다.


BAN_PASSWORD = [
    'password', '123456', '1234567', '12345678', '123456789', '1234567890', '012345', '0123456',
    '01234567', '012345678', '0123456789', 'hello', '111111', 'aaaaaa'
]
cs


이렇게 지정되어선 안되는 password 리스트를 만들었습니다. 그 후 request로 입력받은 password 중 무언가가 이와 일치한다면 금지시킬 것입니다. 그러면 다시 render를 return 하도록 하겠습니다.


파이썬의 유용한 도구인 리스트와 for문을 결합한 형태를 사용하겠습니다. 이 방법은 리스트 내포라고 불립니다.


[what_you_want_to_do for i in some_list_tuple_wordarray if condition]
cs


리스트 내포는 for문을 통해 나온 결과를 즉시 리스트 형태로 구성합니다.

django 에서 써 보겠습니다.


match = [pswd for pswd in BAN_PASSWORD if pswd in password]
if match is True:
clue = {'message': 'it's banned password'}
return render(request, 'create.html', {'clue': clue})
cs


이렇게 하시면 됩니다. 그러면 만약 비밀번호가 위에 있는 목록에 부합하면 다시 render하여 return하게 됩니다.

위에서 clue는 create.html 템플릿에서 사용하기 위해 임의로 지정한 값입니다.

저작자표시

'Python' 카테고리의 다른 글

[django] is_anonymous 와 is_authenticated 의 차이  (1) 2018.02.15
[ASGI] ASGI와 websocket 연결 설명  (0) 2018.02.13
[django] django form 사용법  (0) 2018.02.11
[django] django channels 사용법  (0) 2018.02.10
[django] django에서 DoesNotExist와 인증 Backend 만들기  (0) 2018.02.07

+ Recent posts

티스토리툴바