반응형
이번 편은 jQuery 수업의 마지막 파트인 ajax에 대해 알아보도록 하자.
ajax란?
- Asynchronus JavaScript and XML 의 약자이다.
- Asynchronous는 '동시에 발생하지 않는'이라는 의미이다
- JavaScript를 이용해서 비동기식으로 서버와 통신하는 방식이다. 이 때, XML을 이용한다.
- 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.
- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미이다.
$.ajax(settings)
- jQuery를 이용한 ajax 통신의 가장 기본적인 API이다.
- settings는 object 즉, 객체이다.
- 주요 속성은?
- data: 서버에 전송할 데이터, key/value 형식의 객체
- dataType: 서버가 return하는 데이터 타입 (xml, json, script, html)
- tpye: 서버로 전송하는 데이터의 타입 (POST, GET)
- url: 서버에 데이터를 전송할 URL
- success: ajax통신에 성공했을 때 호출될 evenhandler
dataType과 그냥 type의 차이점은?
- type => form 속성 중에 method라고 하는 속성이 있다. 거기에 POST나 GET을 지정할 수가 있는데 거기에 해당되는 것이 type이다.
- dataType => 서버에 요청을 하고 서버가 응답할 때 서버가 전달해주는 데이터가 어떤 형식의 데이터 인지를 지정하는 것이다. 데이터 형식에 따라서 jQuery가 그 eventhandler가 발생했을 때 그걸 적절하게 데이터를 변환해서 전달해준다.
예제1) Web page
<!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>- 이 web page에 'hello world' text를 보내고, 서버가 이 text를 return해주면 그 데이터를 가져와서 표시를 해준다.
- 자바 스크립트와 php는 서로 데이터 양이 다르기 때문에 두 개 사이에 배열이나 객체와 같은 것들을 전달할 수 있는 방법이 없다. 단, '배열 or 객체는 어떻게, 어떤 text로 기술이 된다'라는 약속을 만들어 놓을 수 있다.
- 서버(PHP)가 자바스크립트에게 어떤 text를 전달해 주게 되면 그 약속에 따라 자바스크립트가 그것을 해석 해서 배열이나 객체로 전환 해주는 것이다.
- 자바스크립트에서 중괄호 {}는 객체를 기술 할 때 사용하고, 이름(key)과 값(value)으로 이루어져있다.
- ajax로 서버와 통신을 했는데 그 결과가 성공적으로 나오면 function이 호출된다.
- 그 때 첫 번째 인자로 서버가 return 해준 데이터 값 result가 들어온다.
예제2) 서버 쪽 로직
<?
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?>- 위 쪽 php가 위치하는 URL에 있는 파일이 이렇게 생긴 것이다.
- echo는 php에서 어떤 데이터를 화면에 뿌려줄 때 사용하는 명령이다.
- arrary 배열을 php에서 선언하고 있다.
- php 배열에 request란 배열 msg라는 원소명을 주게 되면 msg라고 하는 이름으로 전송된 데이터를 가져올 수 있게 된다.
- json_encode 라고 하는 php method에다가 여기있는 배열을 전달하게 되면 이 배열을 json이라고 한 형태의 데이터 형식으로 php가 변경을 해준다. 그 json 형식은 text이다.
이전글 보고오기
반응형
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| [드림코딩 엘리] 자바스크립트 연산, 반복문. 헷갈리는 ++i, i++ 이해 / 짝수, 홀수 구하는 방법 (0) | 2021.07.25 |
|---|---|
| [드림코딩 엘리] 자바스크립트 최신 ES6강의! 데이터타입, var 보다는 let을 쓰기, hoisting이란? 타입스크립트란? (0) | 2021.07.23 |
| [생활코딩] jQuery 동적인 애니메이션 효과 알아보기 (0) | 2021.07.07 |
| [생활코딩] jQuery 탐색(traversing)이란? (0) | 2021.07.04 |
| [생활코딩] jQuery 폼(form) 이란? (0) | 2021.06.27 |
