목차
서버에 요청 보내기 기본 구문 GET 방식 vs. POST 방식 AJAX GET 방식 AJAX POST 방식 setRequestHeader() 메서드 onreadystatechange 속성 [참고] 동기식 요청 방식
XMLHttpRequest 객체는 서버와 데이터를 교환하는 데 사용됨.
서버에 요청 보내려면 XMLHttpRequest객체의 open() 및 send() 메서드 사용
서버에 요청 보내기 기본 구문
xhttp = new XMLHttpRequest();
xhttp. open ("GET", "a.php", true);
xhttp. send ();
[매개변수] - open() 경우
open (method, url, async, user, psw )
method
필수. 요청 방식. GET 또는 POST
url
필수. 불러올 파일 주소.
파일은 모든 종류 가능 (예: txt, xml, php, asp 등)
async
필수. true (비동기)・false (동기)
서버 요청은 true (비동기)로 보내야 함.
true (비동기)로 보내면 JS는 서버 응답을 기다릴 필요 없으며, 서버 응답 기다리는 동안 다른 작업 수행하다가 응답 준비 되면 응답처리 가능.
user
선택. 사용자 이름
psw
선택. 암호
[매개변수] - send() 경우
send()
서버에 요청 보내기. GET 방식 요청일 때 사용.
send (string )
서버에 요청 보냄. POST 방식 요청일 때 사용.
GET 방식 vs. POST 방식
GET 방식 요청은 POST 방식보다 간단 하고 빠르며, 대부분 경우 사용 가능. 그러나, 다음 경우엔 항상 POST 방식
캐시 안 된 파일 호출 경우. (예: 파일 또는 DB 업데이트된 경우). 많은 데이터를 서버에 전송 경우. (※ POST 방식은 크기 제한 없음). 보안이 필요한 내용 전송. (※ POST는 GET보다 강력하고 안전)
AJAX GET 방식
예제1 - 캐시 제어
b.php ( 캐시 불러올 가능성 존재)
<button type="button" onclick="hz()">클릭</button>
<p id="demo"></p>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "a.php", true);
xhttp.send();
}
</script>
b.php (※ 캐시된 결과를 가져오는 걸 피하기 위해 URL 주소에 고유 아이디 추가)
<button type="button" onclick="loadDoc()">클릭</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "a.php?t=" + Math.random(), true);
xhttp.send();
}
</script>
a.php (불러올 파일)
<h1>홈짱닷컴 소개 Homzzang.com</h1>
<p>HTML - 기본틀</p>
<p>CSS - 디자인</p>
<p>JS - 동작기능</p>
<p>요청 방식 : <?php echo $_SERVER['REQUEST_METHOD']?> 방식</p>
<p>요청 시간 : <?php echo date("Y:m:d h:i:s", $_SERVER['REQUEST_TIME'])?></p>
예제2 - 서버로 데이터 보내서 데이터 반영 결과 받아오기
b.php
<button type="button" onclick="hz()">클릭</button>
<p id="demo"></p>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "a.php?x1=SQL&x2=DB&y1=PHP&y2=서버언어", true);
xhttp.send();
}
</script>
a.php (불러올 파일)
<?php
$x1 = $_GET['x1'];
$x2 = $_GET['x2'];
$y1 = $_GET['y1'];
$y2 = $_GET['y2'];
?>
<h1>홈짱닷컴 소개 Homzzang.com</h1>
<p>HTML - 기본틀</p>
<p>CSS - 디자인</p>
<p>JS - 동작기능</p>
<p><?php echo $x1?> - <?php echo $x2?></p>
<p><?php echo $y1?> - <?php echo $y2?></p>
<p>요청 방식 : <?php echo $_SERVER['REQUEST_METHOD']?> 방식</p>
<p>요청 시간 : <?php echo date("Y:m:d h:i:s", $_SERVER['REQUEST_TIME'])?></p>
AJAX POST 방식
예제1
b.php
<button type="button" onclick="hz()">클릭</button>
<p id="demo"></p>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "a.php", true);
xhttp.send();
}
</script>
a.php (불러올 파일)
<h1>홈짱닷컴 소개 Homzzang.com</h1>
<p>HTML - 기본틀</p>
<p>CSS - 디자인</p>
<p>JS - 동작기능</p>
<p>요청 방식 : <?php echo $_SERVER['REQUEST_METHOD']?> 방식</p>
<p>요청 시간 : <?php echo date("Y:m:d h:i:s", $_SERVER['REQUEST_TIME'])?></p>
예제2 - 서버로 데이터 보내서 데이터 반영 결과 받아오기
b.php
<button type="button" onclick="hz()">클릭</button>
<p id="demo"></p>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "a.php", true);
xhttp.setRequestHeader ("Content-type", "application/x-www-form-urlencoded");
xhttp.send("x1=PHP&x2=서버언어&y1=SQL&y2=DB");
}
</script>
a.php (불러올 파일)
<?php
$x1 = $_POST['x1'];
$x2 = $_POST['x2'];
$y1 = $_POST['y1'];
$y2 = $_POST['y2'];
?>
<h1>홈짱닷컴 소개 Homzzang.com</h1>
<p>HTML - 기본틀</p>
<p>CSS - 디자인</p>
<p>JS - 동작기능</p>
<p><?php echo $x1?> - <?php echo $x2?></p>
<p><?php echo $y1?> - <?php echo $y2?></p>
<p>요청 방식 : <?php echo $_SERVER['REQUEST_METHOD']?> 방식</p>
<p>요청 시간 : <?php echo date("Y:m:d h:i:s", $_SERVER['REQUEST_TIME'])?></p>
setRequestHeader() 메서드
[구문]
setRequestHeader (header, value )
[매개변수]
header value - 헤더 값
onreadystatechange 속성
XMLHttpRequest 객체를 사용하면, 요청이 응답을 받을 때 실행할 함수 정의 가능. (이 함수는 XMLHttpResponse 객체의 onreadystatechange 속성 안에 정의 함.)
(예제)
b.php
<button type="button" onclick="hz()">클릭</button>
</div>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp. onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "a.php", true);
xhttp.send();
}
</script>
a.php (불러올 파일)
<h1>홈짱닷컴 소개 Homzzang.com</h1>
<p>HTML - 기본틀</p>
<p>CSS - 디자인</p>
<p>JS - 동작기능</p>
<p>요청 방식 : <?php echo $_SERVER['REQUEST_METHOD']?> 방식</p>
<p>요청 시간 : <?php echo date("Y:m:d h:i:s", $_SERVER['REQUEST_TIME'])?></p>
[참고] 동기식 요청 방식
1.
동기식 요청하려면 open() 메서드의 세번째 매개변수를 false로 설정.xhttp.open("GET", "a.php", false );
빠른 테스트를 위해서 아주 가끔 이용. (옛날 JS 코드에서도 이용된 적 있음)
코드가 서버 완료 기다려야 하므로, onreadystatechange 함수는 불필요.
동기식은 최근 웹표준에서 제거되는 추세이니, 되도록이면 사용하지 말 것 !! ( 왜냐면, 서버가 느린 경우에 응용 프로그램이 맛이 가는 문제 발생하기 때문.)
(예제)
b.php
<button type="button" onclick="hz()">클릭</button>
<script>
function hz() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "a.php", false );
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
a.php (불러올 파일)
<h1>홈짱닷컴 소개 Homzzang.com</h1>
<p>HTML - 기본틀</p>
<p>CSS - 디자인</p>
<p>JS - 동작기능</p>
<p>요청 방식 : <?php echo $_SERVER['REQUEST_METHOD']?> 방식</p>
<p>요청 시간 : <?php echo date("Y:m:d h:i:s", $_SERVER['REQUEST_TIME'])?></p>
