728x90
| Ajax란?
- Asynchronous JavaScript and XML 의 약자
- 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.
- 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.
- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.
| .ajax(settings)
- jQuery를 이용한 ajax통신의 가장 기본적인 API
- 주요속성
- data : 서버에 전송할 데이터, key/value 형식의 객체
- dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
- type : 서버로 전송하는 데이터의 타입 (POST, GET)
- url : 데이터를 전송할 URL
- success : ajax통신에 성공했을 때 호출될 이벤트 핸들러
예제)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="result"></div>
<input type="text" id="msg" />
<input type="button" value="get result" id="getResult" />
<script>
$('#getResult').click( function() {
$('#result').html('');
$.ajax({
url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
dataType:'json',
type:'POST',
data:{'msg':$('#msg').val()},
success:function(result){
if(result['result']==true){
$('#result').html(result['msg']);
}
}
});
})
</script>
</body>
</html>
728x90
반응형
'즐거움 넘치는 IT 세계 > 코드로 만드는 디자인' 카테고리의 다른 글
| [ jquery 응용 ] scrollTop animate 버튼 구현하기(Top버튼) (0) | 2024.03.14 |
|---|---|
| [ CSS 응용 ] CSS로 텍스트 말줄임(...)으로 처리 방법 정리 (1줄, 2줄) (1) | 2024.01.23 |
| [ jquery 기초 ] jquery Animation - 애니메이션 (0) | 2019.10.12 |
| [ jquery 기초 ] jquery Event - 고급 메서드 (0) | 2019.10.11 |
| [ jquery 기초 ] jquery Event - bind() 메서드 (0) | 2019.10.10 |
