<!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','localhost/ex38.php',false); // 대기중 ! !
// ajax 실행
// Ajax : 서버로 부터 데이타를 통신하는 규격
// 페이지를 새로고침 안하고, 부분적인 업데이트를 위해 사용
// 예) 다음의 실시간 검색어 리스트
request.send();
//출력문
alert(request.resonseText);
</script>
</body>
</html>
<?xml version="1.0" encoding="UTF-8" ?>
<result>
<result>fail</result>
<message>데이타 검색이 성공했습니다.</message>
<data>
<user_id>id1</user_id>
<user_pw>1111</user_pw>
<name>홍길동</name>
</data>
<data>
<user_id>id2</user_id>
<user_pw>2222</user_pw>
<name>이몽룡</name>
</data>
<data>
<user_id>id3</user_id>
<user_pw>3333</user_pw>
<name>춘향이</name>
</data>
</result>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- jquery ajax 수행 방법 load() 함수 -->
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
//ajax 이벤트 연결
$(document).ajaxComplete(function(){ // 요청 완료시
$('#ajax-event').append('<h1>ajaxComplete</h1>');
}).ajaxError(function(){ // 에러 발생시
$('#ajax-event').append('<h1>ajaxError</h1>');
}).ajaxSend(function(){ // 요청을 보낼 때
$('#ajax-event').append('<h1>ajaxSend</h1>');
}).ajaxSuccess(function(){ // 요청 성공시
$('#ajax-event').append('<h1>ajaxSuccess</h1>');
}).ajaxStart(function(){ // 요청을 시작할 때
$('#ajax-event').append('<h1>ajaxStart</h1>');
});
//ajax 수행
// ex38. php 의 응답(response)가 wrap div 밑으로 들어옴
$('#wrap').load('ex38.php');
//ajax 수행 함수들
// $.ajax() : 비동기식 ajax 으로 http 요청
// $.get() : GET 방식으로 HTTP 요청
// $.post() : POST 방식으로 HTTP 요청
// $.getScript ('path/myscript.js') : 웹페이지에 스크립트를 추가함
// $.getJSON () : 응답으로 JSON 포맷을 얻어옴
// $('element').load() : 읽어들인 응답을 특정 요소에 추가함
});
</script>
</head>
<body>
<div id ="ajax-event"></div>
<div id="wrap"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- jquery ajax xml 응답처리 -->
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url:'ex42_data.xml',
success:function(data){
$(data).find('result').each(function(){
$('body').append('<h1>'+ $(this).find('result').text() + '</h1>');
$('body').append('<h1>'+ $(this).find('message').text() + '</h1>');
$(this).find('data').each(function(){
$('body').append('<h1>'+ $(this).find('user_id').text() + '</h1>');
$('body').append('<h1>'+ $(this).find('user_pw').text() + '</h1>');
$('body').append('<h1>'+ $(this).find('name').text() + '</h1>');
});
});
}
});
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- jquery로 json 통신하기 -->
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
//테스트 : <localhost/ex44.php
$(document).ready(function(){
$.getJSON('ex38.php',function(data){
$.each(data,function(key,value){
$('body').append('<h1>' + key+ ':' + value.result + '</h1>');
$('body').append('<h1>' + key+ ':' + value.message + '</h1>');
$.each(value.data,function(key,value){
$('body').append('<h1>'+ key + ':' + value.user_id + '</h1>');
$('body').append('<h1>'+ key + ':' + value.user_pw + '</h1>');
$('body').append('<h1>'+ key + ':' + value.name+ '</h1>');
});
});
});
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$.ajax('ex38.php',{
//통신 성공시,
success : function(data){
$('body').append(data);
}
});
//jquery ajax 통신 방법2
//ex43.php ex38.php 닷홈 서버에 올린다
// 테스트 방법 http://mkrice.dothome.co.kr/ex43.php
$.ajax({
url:'http://mkrice.dothome.co.kr/ex38.php',
success:function(data){
$('body').append(data);
}
//dufj dhqtusemf
async: true, // 동기, 비동기 여부
complete: function(){
$('body').append('통신이 완료됨');
},
data :{
// 요청 파라미터
user_id: 'hong',
user_pw: '1234'
},
type: 'GET', // 요청방식 GET POST PUT DELETE
timeout:5000, // 요청 만료 시간
error:function(error){
$('body').append('에러가 발생함'+ error);
}
fail: function(){// 통신 실패시
$('body').append('통신이 실패함');
},
dataType : 'html', // 서버에서 반환해주는 데이타 타입을 지정함
// html, xml, json, jsonp, script,text
//JSONP(JSON with Padding)
jsonpCallback:"myCallback",
jsonp:"jsonp string",
beforeSend:function(){
$('body').append('통신하기 전에 호출됨');
}
});
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$.ajax('ex38.php',{
//통신 성공시,
success : function(data){
$('body').append(data);
}
});
});
</script>
</head>
<body>
</body>
</html>
