Frontend/jQuery

[생활코딩][웹브라우저JS] - jQuery Ajax

blueprint-12 2022. 2. 23. 20:05

jQuery를 이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 그 중 하나가 크로스브라우징 이슈를 jQuery가알아서 해결해주는 것이다. jQuery를 이용해서 Ajax 통신을 하는 법을 알아보자.

 

jQuery는 Ajax와 관련해서 많은 API를 제공한다.

http://api.jquery.com/category/ajax/

 

Ajax | jQuery API Documentation

Register a handler to be called when Ajax requests complete. This is an AjaxEvent. Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. Attach a function to be executed before an Ajax request is sent. This is an

api.jquery.com

이 중에서 가장 중요한 API는 $.ajax이다.

 

$.ajax

https://api.jquery.com/jQuery.ajax/

▶$.ajax의 문법

jQuery.ajax( [settings ] )

ajax의 매개변수로 들어가는 setting는 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어간다.

대충 아래와 같은 모습을 가지고 있겠죵

 $.ajax(
 //아래가 settings객체이다.
 		{
          url: "./time.php",
          success: function (data) {
            $("#time").append(data);
          },
        });

주요 옵션에 대해 알아보자. 

  • data
    서버로 데이터를 전송할 때 이 옵션을 사용한다. 
  • dataType
    서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.
  • success
    성공했을 때 호출할 콜백을 지정한다.
    Function( PlainObject data, String textStatus, jqXHR jqXHR )
  • type
    데이터를 전송하는 방법을 지정한다. get(default), post를 사용할 수 있다.

위의 내용을 바탕으로 Ajax 통신을 해보자. 

*제이쿼리에서 type(데이터 전송 방법)은 default가 get방식이므로 작성해줄 필요 없다(생략가능).

 

※아래의 코드는 Ajax(XMLHttpRequest)수업의 예제를 jQuery화 한 것이다. 

.php 파일에서는 get방식일 경우 수정할 게 없어서 생략하겠음

 

 

GET방식

■demo1.html // 클라이언트 쪽

변경 전(XMLHttpRequest ver), get 방식

<body>
    <p>time : <span id="time"></span></p>
    <input type="button" id="execute" value="execute" />
    <script>
      document
        .querySelector("input")
        //버튼을 클릭하면 이벤트발생
        .addEventListener("click", function (event) {
          const xhr = new XMLHttpRequest();
          xhr.open("GET", "./time.php");
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
              document.querySelector("#time").innerHTML = xhr.responseText;
            }
          };
          xhr.send();
        });
    </script>
  </body>

 

변경 후(jQuery 화)

//html 엘리먼트의 구조는 똑같아서 생략하겠음 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time.php',
            success:function(data){
                $('#time').append(data);
            }
        })
    })
</script>
  • XMLHttpRequest에 비해서 코드가 훨씬 간결해졌다.

POST 방식 

time2.php //서버쪽

※마찬가지로 이전 ajax 수업 예제를 jQuery화 한 것

<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));
echo $d1->format($_POST['format']);
?>
  • 이전 코드와 차이가 있다면 $_POST[] 를 쓴다는 점..?
  • php에 대해서는 자세히 알 지 못하므로 넘기도록 하겠다.

demo2.html // 클라이언트쪽

변경 전(XMLHttpRequest, post 방식)

<body>
<p>time : <span id="time"></span></p>
<form>
    <select name="timezone">
        <option value="Asia/Seoul">asia/seoul</option>
        <option value="America/New_York">America/New_York</option>
    </select>
    <select name="format">
        <option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
        <option value="Y-m-d">Y-m-d</option>
    </select>
</form>
<script>
document.querySelector('input').addEventListener('click', function(event){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', './time2.php');
    xhr.onreadystatechange = function(){
        document.querySelector('#time').innerHTML = xhr.responseText;
    }
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var data = '';
    data += 'timezone='+document.getElementById('timezone').value;
    data += '&format='+document.getElementById('format').value;
    xhr.send(data); 
});
</script>
</body>
  • 여기서 전체적으로 코드가 간결해지지만 특히나 서버로 전송할 데이터의 형식(이름=값&이름=값...)을 지키는 부분이 간결해진다. 

변경 후(jQuery화, post 방식)

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time2.php',
            type:'post',
            //아래 코드는 form 태그의 정보를 값의이름=값의내용&값 의 형식으로 바꿔준다.
            data:$('form').serialize(),
            success:function(data){
                $('#time').text(data);
            }
        })
    })
</script>
  • 위에서 언급했던 data의 형식을 맞추고 임의 변수를 만들고 그 안에 데이터를 쌓는 작업
 var data = '';
    data += 'timezone='+document.getElementById('timezone').value;
    data += '&format='+document.getElementById('format').value;
  • 이 부분이 data: $('form').serialize() 을 통해서 알아서 형식에 맞춰 (form태그의 입력값을)data로 반환하기 때문에 위처럼 긴 코드가 필요없어진다.
  • 또한, getElementBy 를 통해서 각각의 엘레멘트를 가져오지 않고도 $('form')을 통해 form태그의 내용물을 담은 객체를 이용하여 작업할 수 있다.

JSON 처리

$.ajax를 이용해서 JSON처리를 하는 방법

  • 여기서 중요한 것은 datatype: 'json' 으로 데이터 타입을 지정했다는 것
  • 이 말은 아래 코드를 참고해서 보면 url에 해당하는 time3.php(서버측)에서 전달해주는 값의 형식이 json 이라는 것을 의미합니다(명시해준 것). 
<p id="timezones"></p>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time3.php',
            dataType:'json',
            success:function(data){
                const str = '';
                for(let name in data){
                    str += '<li>'+data[name]+'</li>';
                }
                $('#timezones').html('<ul>'+str+'</ul>');
            }
        })
    })
</script>
  • 서버쪽.php에서 JSON형식의 데이터를 넘겨줬다고 했을 때, 제이쿼리를 이용하면 json 형식의 데이터를 자바스크립트 객체 형태로 바꿔주는 작업을 대신해준다. 
  • dataType을 json으로 명시했기 때문에 제이쿼리는 서버 연결이 success했을 때 콜백함수의 인자로 (json->js에 맞는 객체 혹은 데이터로 변환된)data를 전달한다. 기존에 JSON.parse()를 통해서 변환시키는 작업이 jQuery에서는 내부적으로 처리해주기 때문에 필요 없다는 것을 의미-> 그 과정을 jQuery가 내부적으로 처리해줬기 때문에 success의 콜백함수의 인자로 들어가는 data에 이미 파싱된 data(객체나 배열)가 들어가 있습니다.
  • 그렇기 때문에 바로 for문을 통해 data의 값을 조회해서 li태그의 content로 넣어주고 마지막으로 ul 태그와 결합해서 아이디가 timezone인 p태그의 content로 넣어주게 되는 것이죠.