jQuery & Ajax

1. Ajax란?

Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다.

 

1-1. Ajax를 사용하는 이유?

기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하면서 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데 엄청난 자원낭비와 시간낭비를 초래하게 된다.

 

하지만 ajax는 html 페이지 전체가아닌 일부분만 갱신할수 있도록 XML HttpRequest객체를 통해 서버에 request를 한다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있게 되는 것이다. 최근 웹페이지에서 가장 중요한것은 속도로 간주 되며, 이 이유 하나만으로도 Ajax를 사용해야 하는 이유가 충분하다.

 

1-2. Ajax의 장단점

<장점>

• 웹페이지의 속도향상
• 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능하다.
• 서버에서 Data만 전송해면 되므로 전체적인 코딩의 양이 줄어든다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.
• 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

 

<단점>

• 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야함)
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
• XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다. 

1-3. Ajax & jQuery

Ajax와 Jquery는 함께 사용되면 시너지  효과를 낸다. 일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데 jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 된다. jquery ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청할 수 있다. Jquery는 Ajax처럼 JavaScript의 라이브러리 중 하나인데 자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것이다.

 

1-4. Ajax 메소드

메소드	설명
$.ajax()	비동기식 Ajax를 이용하여 HTTP 요청을 전송함.
$.get()	전달받은 주소로 GET 방식의 HTTP 요청을 전송함.
$.post()	전달받은 주소로 POST 방식의 HTTP 요청을 전송함.
$.getScript()	웹 페이지에 스크립트를 추가함.
$.getJSON()	전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음.
.load()	서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함.

jQuery는 Ajax와 관련된 다양하고 편리한 많은 메소드를 제공한다.

그중에서도 $.ajax() 메소드는 모든 jQuery Ajax 메소드의 핵심이 되는 통합적인 메소드이다 .
$.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.

 

 

<jQuety 예시>

$(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')

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

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

---

참고 출처

https://chagokx2.tistory.com/68

[jQuery] Ajax

 

https://araikuma.tistory.com/640

[jQuery] Ajax 사용 - Ajax 메소드 $.ajax() $.get() .load()