[jQuery] Ajax

1. Ajax

JavaScript의 라이브러리중 하나이며, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자.

 

JavaScript를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받아 전체 페이지를 새로 고치지 않고 페이지의

 

일부를 위한 데이터를 로드하는 방식

 

(이 때 사용하는 API가 XMLHttpRequest. 그러나 보통 JSON을 많이 사용한다.)

 

<비동기(async)방식>

: 웹페이지를 리로드하지 않고 데이터를 불러오는 방식.

 

즉, 서버와 통신을 하면서 해당 페이지에서 다른 작업을 동시에 할 수 있다.

 

• 장점:

  페이지 리로드의 경우, 전체 리소스를 다시 불러오면서 이미지, 스크립트 , 기타 코드 등 모두 재요청하기 때문에  불필요한 리소스 낭비와 시간 낭비가 발생한다. 그러나 비동기식 방식을 이용할 경우, 필요한 부분만 불러와 사용하기 때문에 효율적으로 리소스를 사용할 수 있고, 시간도 아낄 수 있다.

 

2. jQuery & Ajax

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다.

 

여러 Ajax 프레임워크 중 현재 가장 널리 사용되고 있는 것은 jQuery 다. jQuery 로 Ajax 를 사용하게 되면 브라우저 들간의

 

차이점을 jQuery 가 알아서 처리해준다는 장점이 있다.

 

 

jQuery는 Ajax와 관련해서 많은 API를 제공하는데 그 중에서 가장 중요한 API는 $.ajax 이다.

$.ajax([settings])          //비동기식 Http request를 수행
                        //settings는 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어간다. 

 

jQuery 예제

$(document).ready(function(){
        $(".heart").click(function(){
            $.ajax({
                url: "{% url 'example' %}"    // 요청을 보낼 URL 주소. 기본값은 현재 URL 주소
                data: {'data': 'test'},       // HTTP 요청과 함께 서버로 전송할 데이터
                dataType: "json",             // 서버에서 보내줄 데이터 형식
                                              // (생략하면 요청한 자료에 맞게 자동으로 형식이 지정 됨)
                type: "POST",                 // HTTP 요청 방식
                success: function(response) {    // Ajax로 통신이 정상적으로 이뤄지는 경우 실행할 함수 
                    alert("Success");
                },
                error: function(xhr) {           // Ajax로 통신이 실패할 경우 실행할 함수
                    alert("Error");
                }
            });
        });
    });        

이 외에도 여러가지 옵션이 있다.(참고)

 

서버(Django) 측 예제

def exampleView(request):
    data = request.POST.get('data')

    # 방법 1
    return HttpResponse(json.dumps({'result': 'success',}), content_type="application/json")

    # 방법 2
    responseData = {
        'result': 'success',
    }
    return JsonResponse(responseData)

ajax 옵션 중 dataType 옵션을 json 으로 지정했기 때문에 서버에서 데이터를 보내줄 때 json 형식으로 변환하여

 

돌려줘야 한다.

 

---

 

참고 자료

• https://coding-factory.tistory.com/143

[Ajax] Ajax란 무엇인가?

• http://tcpschool.com/ajax/ajax_jquery_ajax

코딩교육 티씨피스쿨

• https://opentutorials.org/course/1375/6851

jQuery Ajax - 생활코딩

• https://kthan.tistory.com/entry/Ajax-JQuery-입력값에-대한-결과-실시간-처리-하기-장고Django환경에서-JQuery와-Ajax-사용

[Ajax-JQuery] 입력값에 대한 결과 실시간 처리 하기 - 장고(Django)환경에서 JQuery와 Ajax 사용