글 작성자: juyoungit

이전에 JavaScript를 공부하면서 AJAX에 대해서 공부한바 있습니다. 쉽게 기억하시겠지만 JavaScript를 사용하여 AJAX를 구현하는 코드가 그렇게 깔끔하지만은 않았습니다. 또한 각 웹 브라우져마다 AJAX를 구현하는 코드에 차이가 있어 브라우져의 종류에 따라서 조금씩 다른 코드가 나오기도 하고, 나름 복잡하고 꽤 긴라인의 코드를 작성해야 AJAX를 구현할 수 있었습니다. 그런데 마찬가지로 이 jQuery를 사용함으로서 AJAX를 구현하기 위한 코드를 미리 구현된 method를 사용함으로써 훨신 간단한 코드로 작성하는 것이 가능합니다.

 

jQuery에서 AJAX를 위해 지원하는 대표적인 method는 다음과 같습니다.

1. load()
2. get()
3. post()

load()

load method는 AJAX를 통해서 외부 서버로부터 데이터를 load하고, 이 load한 data를 특정 html element에 할당할 수 있습니다. load method를 사용하기 위해서는 아래와 같은 구조의 syntax를 사용합니다.

$(selector).load(URL,data,callback);

URL parameter는 필수적으로 전달되어야 하며 data load할 서버의 위치를 지정할 목적으로 사용합니다.

data parameter는 optional이며, request와 함께 보낼 query string key/value pair를 설정하는 목적으로 사용합니다.

callback parameter는 optional이며, load method가 실행을 마친 후 실행하고자 하는 로직이 존재하는 경우 해당 로직을 function으로 구현하고 그 function의 이름을 parameter로 전달하는 방식으로 사용합니다.

 

그래서 아래와 같은 코드를 작성 시 demo_test.txt 파일이 가진 내용을 load하여 div1 이라는 id를 가진 element에 이를 할당할 수 있게 됩니다. 여기서 기억할 점은 load method를 사용하여 data를 load하고 이를 특정 element에 할당하면 기존에 element가 가지고 있던 내용은 overwrite되어 없어집니다. 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

또한 URL parameter에 space로 구분하여 selector를 전달하는 것이 가능합니다. 아래와 같이 코드를 작성하는 경우 demo_test.txt 파일이 가진 내용 중에서 id="p1"에 해당하는 element에 대한 정보만을 선택적으로 load 하게 됩니다.

$("#div1").load("demo_test.txt #p1");

그리고 callback parameter의 경우 자체적으로 몇 개의 parameter를 가지고 이를 활용하는 것이 가능한데, callback parameter로 전달되는 callback function이 가질 수 있는 parameter의 종류는 다음과 같습니다.

1. responseTxt
2. statusTxt
3. xhr

(각 parameter가 가지는 구체적인 의미는 추후에 다시 설명하겠습니다.)

그래서 이러한 callback function을 활용함으로써 다음과 같은 코드를 작성할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
      if(statusTxt == "success")
        alert("External content loaded successfully!");
      if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

 

 

$.get() / $.post()

get() / post() method에 대해서 공부하기 전에 우선 HTTP Request의 종류인 GET / POST를 먼저 알아야할 필요성이 있습니다. 일반적으로 client와 server 사이에서 request, response를 주고 받기 위해 대표적으로 사용되는 방식이 바로 GET & POST 입니다. 이 때 , 이 GET / POST의 차이점을 정확하게 이해하는 것이 중요 합니다.

 

우선 GET 방식은 일반적으로 server에서 일부 data를 retrieving 하는 데 사용됩니다. 특히 get method는 cached 된 data를 반환하는 것이 가능합니다.

POST 방식은 request와 함께 data를 server로 보낼 때 많이 사용합니다. 물론 POST도 일부 data를 가져올 수는 있지만 GET 방식과 달리 data를 caching 하지 않는다는 점에서 그 차이가 있습니다. 그래서 실제로 보안에 다소 예민한 data들은 POST 방식을 사용하여 전송됩니다. (혹은 이것보다 더 높은 수준의 보안 기술을 적용하여 사용됩니다.)

 

그래서 이러한 종류의 http request를 간편하게 수행하도록 하기 위해서 jQuery에서는 다음 두 가지 method를 지원합니다.

1. $.get()
2. $.post()

$.get()

서버로부터 HTTP GET 방식으로 data를 요청할 때 사용합니다. 아래와 같은 syntax 구조를 사용합니다.

$.get(URL,callback);

"URL" Parameter는 필수적으로 전달되어야 하는 parameter 이며, request를 보낼 서버의 위치를 명시하는 것을 목적으로 사용합니다. 그리고 "callback" parameter의 경우 GET request가 성공적으로 처리된 경우, 수행할 로직을 정의한 function의 이름을 전달함으로서 사용되며 이는 optional 입니다.

 

그래서 아래와 같은 demo code를 작성해볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("demo_test.asp", function(data, status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

$.post()

서버로부터 HTTP POST 방식으로 data를 요청할 때 사용합니다. 아래와 같은 syntax 구조를 사용합니다.

$.post(URL,data,callback);

"URL" parameter는 필수적으로 전달되어야 하며 request를 보내고자 하는 위치를 지정하는 데 사용합니다. "data" parameter는 optional에 해당하며, request와 함께 보낼 data를 명세하는 데 사용합니다. "callback" parameter는 request가 성공적으로 처리된 후 별도로 수행하고자 하는 로직을 function으로 정의하고 그 이름을 전달하는 형식으로 하여 사용 됩니다.

 

그래서 아래와 같은 demo code를 작성해볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("demo_test_post.asp",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
    function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

'Web Basic > jQuery' 카테고리의 다른 글

jQuery - Traversing  (0) 2021.07.16
jQuery - HTML  (0) 2021.07.16
jQuery - Effect  (0) 2021.07.15
jQuery - 개요  (0) 2021.07.15

티스토리툴바