jQuery 라이브러리가 제공하는 Ajax를 사용했을 때의 장점 :
사용하는 브라우저 간의 차이점을 알아서 처리함. 따라서 개발자는 브라우저 상관없이 동일하게 코딩 가능
Ajax 사용법 :
1. jQery.ajax(url[,settings])
2. jQery.ajax([settings]) -> 내가 사용할 방식
이때, 2번 방식은 url없이 객체만 전달하므로 settings 내부에 지정하거나 Global Ajax Event Handlers를 사용해야 함
$.ajax(
{
url: "https://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
}
)위의 코드에서 {url: "https://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {xhr.overrideMimeType( "text/plain; charset=x-user-defined" ); } } 는 객체settings(프로퍼티)에 해당함.
이때, 객체 settings란 Ajax 통신을 위한 옵션들을 갖는다.
옵션 종류 : data, dataType, success, type
data - 서버로 전송할 데이터
dataType - 서버로부터 회신받을 데이터(결과) 형식 [ xml | json | script | html ]
seccess - 성공 시 호출할 콜백
type - 데이터 전송 방법 [ Get | Post ] - default는 Get방식
- POST 타입 :
form태그에서 선택한 값을 ajax의 data로 서버에 전송하는 경우
-> data:$('form').serialize() 이용 시, 선택한 value들이 문자열로 변환되어 전송됨
ex)
<body>
<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="bt" value="버튼"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#bt').click(function() {
$.ajax({
url:'./timezone_json.php',
type:'post',
data:$('form').serialize(),
success:function(data){
$('#time').text(data);//성공 시, id값이 time인 엘리먼트에 data 내용 입력
}
})
})
</script>
</body>- JSON 타입 :
php파일 - json형식으로 불러올 value 정의
jsp파일 - $.ajax({ url,dataType, seccess 입력})
-> url : 'json 형식으로 불러올 php파일의 url'
-> dataType : 'json'
-> success : json형식의 데이터를 분리하여 받을 경우로 가정한 코드
ex)
<body>
<p id="timezones"></p>
<input type="button" id="bt" value="버튼"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#bt').click(function() {
$.ajax({
url:'./timezone_json.php',
dataType:'json',
success:function(data){
var str = '';
for(var name in data){
str += '<li>'+data[name]+'</li>';
}
${'#timezones'}.html('<ul>'+str+'</ul>');
}
})
})
</script>
</body>
개발자를 꿈꾸는