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>

자바스크립트에서 직접

예전엔 jQuery의 Ajax를 많이 사용했지만 최근(22년)엔 자바스크립트가 제공하는 fetch도 많이 사용한다.

<script>
    function 함수명(){
        fetch("url주소")
        .then(response => response.text())  // 응답을 받아 text화 한다. json이 응답된다면 json()이용.
        // 위에서 전체 응답 메시지를 받는다면, 아래선 함수의 응답(return)만 필터링해 받는다.
        .then(data => {    // 화살표 함수를 이용해 처리.
            console.log(data);
            명령
        })
    }

ajax의 구조에 비해 단순하지만.. post요청을 보낸다든가.. 하는 방식은 따로.. 누군가가 적어주겠지.