Javascript:AJAX

틀:Javascript

1. Javascript:개요
2. Javascript:변수, 상수
   1. Javascript:자료구조
3. Javascript:연산자
4. 분기문
   1. Javascript:조건문
   2. Javascript:반복문
5. Javascript:선택자
   1. Javascript:요소 내용 변경
   2. Javascript:HTML로부터 데이터 받기
6. Javascript:이벤트
   1. Javascript:클릭 이벤트
7. Javascript:AJAX
   1. AJAX 활용
      1. Javascript:댓글달기
      2. Javascript:무한 스크롤링
8. Javascript:활용
   1. Javascript:표 정렬

개요

AJAX. Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여러 작업들이 동시에 일어나게 한다는 의미이다. 새로고침이 일어나지 않으면서도 문서화면을 갱신해주는 방법.

HTMl에서 직접 사용하거나, 자바스크립트 파일로 빼서 사용할 수도 있다.

비동기 통신을 위하여 서버를 실행시킨 후...

JQuary에서

호출법

함수 안에 다음과 같은 내용들을 넣는다.

<script>
function test_click(id) {
    console.log(id);
    $.ajax({
        type:'POST',  // GET이냐 POST냐.
        url: "{% url 'scientific_humor:posting_like' posting.id %}",     // data를 전송할 url.
        data:{'posting_id': id,                                         // 보낼 데이터.
                'csrfmiddlewaretoken': '{{ csrf_token }}',              // 장고의 경우, csrf_token도 보내야 해서 함께 담아야 제대로 작동한다.

        },                                      // posting_id 라는 이름으로 id 값 전송
        dataType: "json",
        success: function (response){                      // ajax 통신이 정상적으로 완료되었을 때
            console.log("응답성공");
            if
        },
        error: function (response){                         // 통신에 실패했을 때.
            console.log('실패');
        }
        complete:function() {} // 성공했든, 실패했든 작업이 끝날 때 불러올 함수.(없어도 된다.)
    });
}
</script>