<?php
//테스트 방법 : http://localhost/ex41.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- XMLHTTPRequest 객체 -->
</head>
<body>
<!-- 순수 js -->
<script>
var request=new XMLHttpRequest();
request.onreadystatechange = function(){
if(request.readyState ==4){
if(request.status==200){
document.body.innerHTML +=request.responseText;
//eval() 함수를 사용해서 json 객체를 만들 때, 가끔 오류가 생기는
// 것을 방지하기위해 '(' ')'을 넣어준다
var json=eval('('+request.responseText+')');
console.log(json);
var output='';
output +='<hr>';
output+='result: '+ json.result.result;
output+='<hr>';
output+='message : '+ json.result.message;
output+='<hr>';
for(var i=0; i<json.result.data.length;i++){
for(var key in json.result.data[i]){
output += '<h1>' + i + ':' + json.result.data[i][key] +'</h1>';
}
}
document.body.innerHTML +=output;
}
}
};
request.open('GET','ex38.php',true);
request.send();
</script>
</body>
</html>
<?php
//테스트 방법 : http://localhost/ex39.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- XMLHTTPRequest 객체 -->
</head>
<body>
<!-- 순수 js -->
<script>
var request=new XMLHttpRequest();
// true : 비동기 방식으로 전환
// 비동기 방식은 코드를 먼저 실행하고
// 결과를 나중에 받는다. 이벤트 콜백 함수를 통해서
request.onreadystatechange = function(){
//on_ready_state_change : 응답이 오면 호출하는 이벤트 콜백 함수
document.body.innerHTML +="<h3>onreadystatechange</h3>"request.readyState;
//readyState
// 0: request 객체를 만들었지만, open() 메쏘드 호출아함
//1 : request 객체를 만드렁 open() 초기화 했으나. send()는 안함
// 2: send() 호출했지만, 아직 데이타는 받지 못함
// 3 : 데이타의 일부만 받음
//4 : 모든 데이타를 받음
if(request.readyState ==4){
//HTTP 상태 코드
// 100번대 100~199 : 처리중
// 200번대 : 성공 OK
// 300번대 : 리다이렉트(다른 주소로 이동)
// 400번대 : 클라이언트 오류 400 Bad Request
// 500번대 : 서버 오류 500 Internal Server Error
if(request.status==200){
document.body.innerHTML +=request.responseText;
}
}
};
request.open('GET','ex38.php',true);
request.send();
</script>
</body>
</html>
<?php
//테스트 방법 : http://localhost/ex39.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- XMLHTTPRequest 객체 -->
</head>
<body>
<!-- 순수 js -->
<script>
var request=new XMLHttpRequest();
// 전송방식(GET,POST) URL 비동기여부(false: 동기, true: 비동기)
// 동기방식 : sync 응답이 올때까지 기다림.
// 비동기방식 : async 일단 코드 진행하고 응답이 나중에 옴
request.open('GET','ex38.php',false); // 대기중 ! !
// ajax 실행
// Ajax : 서버로 부터 데이타를 통신하는 규격
// 페이지를 새로고침 안하고, 부분적인 업데이트를 위해 사용
// 예) 다음의 실시간 검색어 리스트
request.send();
//출력문
//alert(request.responseText);
document.body.innerHTML +=request.responseText;
var prevDate =new Date();
request.send();
var nowDate=new Date();
document.body.innerHTML +="<br><br>"+ (nowDate-prevDate) +"ms 소요됨";
</script>
</body>
</html>
'웹 > PHP' 카테고리의 다른 글
JQUERY-PHP (0) | 2019.11.20 |
---|---|
JS-PHP (0) | 2019.11.20 |
JSON (0) | 2019.11.18 |
POST-OBCJECT (0) | 2019.11.18 |
이미지 올리기 (0) | 2019.11.18 |