AJAX

JQuery를 이용해서 Ajax를 사용하면 크로스브라우징 문제를 자동으로 처리해주고, 편리한 기능을 제공한다.

JQuery의 Ajax API는 이쪽으로 -->> http://api.jquery.com/category/ajax/

$.ajax 기본 문법

JQuey.ajax ( [ setting ] );

• setting     :    Ajax를 위한 옵션을 담고있는 객체

* data    :    데이터를 서버로 전송할 때 사용하는 옵션

* dataType    :    서버특에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 

값으로 올 수 있는 것은 xml, json, script, html이다. 지정하지 않는다면 JQuery가 알아서 판단한다.

* success    :    성공했을 때 호출할 콜백을 지정한다. Fucntion ( PlainObject data, String textStatus, jqXHR jqXHR )

* type    :    데이터 전송 방법을 지정한다. get / post를 사용할 수 있다.

    

document 객체 사용과 JQuery 사용 Ajax 코드 비교 ( 당연히 서버php 의 변화 없음)

* document

document.querySelector('input').addEventListener('click', function(event){
    var 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(); 
}); 

* JQuery

 $('#execute').click(function(){
        $.ajax({
            url:'./time.php',
            success:function(data){
                $('#time').append(data);
            }
        })
    })

POST 방식 

* 예제 ( 시간대와 시간의 출력 - JavaScript 예제와 같다 )

<!-- time.php --> 
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));
echo $d1->format($_POST['format']);
?>>

<!-- ajax_jquery.html -->

<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>

<input type="button" id="execute" value="execute" />




// document와 다른 부분
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time.php',
            type:'post',
            data:$('form').serialize(),
            success:function(data){
                $('#time').text(data);
            }
        })
    })
</script>

- data:$('form').serialize()    :    form의 정보를 값의이름 = 값의 내용 & 값 형식으로 바꿔준다.

JSON 처리

<!-- time.php --> 


<?php
$timezones = ["Asia/Seoul", "America/New_York"];
echo json_encode($timezones);
?>


<!-- json_jquery.html -->

<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:'./time.php',
            dataType:'json',
            success:function(data){
                var str = '';
                for(var name in data){
                    str += '<li>'+data[name]+'</li>';
                }
                $('#timezones').html('<ul>'+str+'</ul>');
            }
        })
    })
</script>