ajax란?
-
Asynchronous JavaScript and XML 의 약자
-
자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.
-
꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.
-
비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.
→서버-웹 통신시 서버는 백그라운드에서만 돌고 웹은 마우스 움직임이 가능
동기식으로 구현하는 것
ex. 신용카드 결제 →web페이지 전체가 freezing 서버-웹 통신 시 아무 작업도 안됨
ajax가 있기 전까지는 web은 문서로만 쓰였습니다.
어떤 정보가 변경되면 서버로 접근하여 전체 다운로드 받고 화면 전체를 바꿔야하는 형식이였습니다.
하지만 ajax가 나오면서 서버와 통신하고 서버가 제공하는 정보를 받아와서 정보를 웹페이지에 전달하게 되었습니다.
이런 기능이 발달함으로써 웹페이지 전체 리로드가 필요없게 되었습니다.
선행지식
$.ajax(settings)
- settings: objext 객체
- jQuery를 이용한 ajax통신의 가장 기본적인 API
- 주요속성 : settings 안에 들어가는 것들
- data : 서버에 전송할 데이터, key/value 형식의 객체
- dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html), 서버요청 서버전달 데이터 형식
- type : 서버로 전송하는 데이터의 타입 (POST, GET), 폼의 속성 중 메소드
- url : 데이터를 전송할 URL
- success : ajax통신에 성공했을 때 호출될 이벤트 핸들러
예제1-1. 웹페이지
<!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('');//사용자가 버튼을 누를때마다 result글씨가 입력되는 곳을 지워줌
$.ajax({//js에서 중괄호는 객체를 뜻함
url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
dataType:'json',
type:'POST', //서버로 데이터 전송
data:{'msg':$('#msg').val()},//전송될 데이터, 객체. 'msg'에 '없어도 됨. 텍스트 필드에 있는 값을 가져옴. data에 넣음
success:function(result){//서버가 리턴해주는 데이터가 들어옴
if(result['result']==true){//
$('#result').html(result['msg']);
}
}
});
})
</script>
</body>
</html>예제 1-2. 서버 쪽 로직(.php)
<?
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?>
//echo : 데이터를 뿌려줄 때 사용
'__ > jQuery' 카테고리의 다른 글
| [생활코딩] 10강. 애니메이션 (0) | 2021.02.19 |
|---|---|
| [생활코딩] 9강. 탐색(traversing) (0) | 2021.02.19 |
| [생활코딩] 8강. Form (0) | 2021.01.24 |
| [생활코딩] 7강. 엘리먼트 제어 (0) | 2021.01.24 |
| [생활코딩] 6강. Event (0) | 2021.01.24 |