Ajax 간략

Ajax는 Asynchronous javascript xml 의 약자이다. 브라우저가 웹서버와 통신하면서 정적인 웹페이지를 동적으로 만들어준다.

꼭 xml만을 사용하는 것은 아니며 JSON을 사용하기도 한다.

XMLHttpRequest라는 API를 사용한다.

XMLHttpRequest

서버와 통신해야하기 때문에 서버 구축이 되어 있어야 한다!

서버에 time.php라는 파일을 만들고 로컬 브라우저에서 html 페이지를 띄운 뒤에 버튼을 클릭하면

시간을 가져오자

일단 C:\APM\Apache24\htdocs 이 경로로 들어가서 demo1.html 파일과 time.php 파일을 만든다. 코드는 아래와 같다.

demo1.html

<p>time : <span id="time"></span></p>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

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(); 

}); 

</script>

 

time.php

<?php

$d1=new DateTime;

$d1->setTimezone(new DateTimezone("asia/seoul"));

echo $d1->format('H:i:s');

?>

파일 생성 후 위 코드 입력

브라우저를 켜고 주소창에 localhost/demo1.html 입력한다. 그리고 execute 버튼을 누르면 시간이 출력된다.

execute 버튼을 누르면 time.php 파일이 호출된다. 

execute 버튼이 눌리면 XMLHttpRequest() 객체가 생성되고 xhr 변수에 대입된다.

xhr.open 함수로 어떤 방식으로 통신을 할 것인지, 서버의 url과 파일을 정해준다.

xhr.send 함수를 호출하면 정해진 방식으로 통신을 하게 된다.

onreadystatechange는 상태가 변할 때마다 호출된다.

xhr.readyState === 4는 모든 통신이 끝났다는 의미이다. xhr.status === 200 은 성공했다는 의미이고 만약 404라면 실패했다는 의미다.

document.querySelector('#time').innerHTML = xhr.responseText; 는 xhr에서 출력된 결과를 time이라는 id를 갖는 곳에 출력해주는 것이다.

측 웹 브라우저 화면의 time : 옆에 출력해준다.

갑자기 브라우저 주소 창에 linux Ubuntu public IP address를 입력했는데 

사이트에 연결할 수 없음 115.XX.XXX.XXX에서 응답하는 데 시간이 너무 오래 걸립니다.

이런 문구가 떠서 당황했다...

포트를 열어주기 위해서 아래와 같이 입력해준다.

리눅스 서버에 있는 time.php 호출하기는 안된다... 공인 IP 주소를 어떻게 활용해야 하나..

출처 생활코딩 https://opentutorials.org/course/1375/6843