크로스브라우징의 문제를 해결해준다.
jQuery에서 제공하는 Ajax를 사용하면 여러가지 장점이 있다. 그 중 하나는 브라우저간의 차이점을 jQuery가 알아서 처리해주는 것이다. 즉, 우리가 만든 어플리케이션을 어떤 브라우저를 사용해서 동작하든 간에 동일한 코드를 갖게된다는 것이다.
jQuery는 Ajax와 관련해서 많은 API를 제공한다.
http://api.jquery.com/category/ajax/
위 링크에서 확인할 수 있다.
- Global Ajax Event Handlers
jQuery를 이용해서 Ajax 통신을 할 때 여러 곳에서 Ajax를 사용할 경우 이것들 전체에 글로벌리하게 적용할 수 있는 여러 설정 등을 지정할 수 있는 기능이다. (고급기능!)
- Helper Functions
통신에 직접적으로 관여하는 API는 아니지만 통신을 하는데에 있어서 여러가지 편리한 기능들을 제공한다.
ex) Form 입력 값을 넘길 때 데이터를 하나로 모아주는 Serialize 등이 있다.
- Shorthand Methods
통신을 하는 방식이 무엇이냐에 따라서 더 적은 코드를 작성하면서 해당 기능을 사용할 수 있다.
ex) jQuery.get()은 get방식을 사용하는 것
- Low-Level Interface
위의 방식 말고 이곳에 있는 .ajax() API를 사용하는 것을 추천한다. 가장 기본적인 API이고 이것을 쉽게 사용할 수 있도록 한 것이 위의 방식이다.
jQuery.ajax()
jQuery에서 Ajax를 통해서 통신하는 데에 있어서 가장 근본이 되는 API이며 가장 많이 사용되는 API이다.
생활코딩 강의에서의 주제도 이 API이다.
$.ajax를 사용해서 호출한다. http://api.jquery.com/jQuery.ajax/ 이곳의 예제 코드를 확인하자.
$.ajax의 문법
1 | jQuery.ajax( [settings ] ) | cs |
setting은 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어간다. 주요한 옵션을 살펴보자.
- data
서버로 데이터를 전송할 때 이 옵션을 사용
- dataType
서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.
- success
성공했을 때 호출한 콜백을 지정한다. Function( PlainObject data, String textStatus, jqXHR jqXHR )
- type
데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.
앞의 게시물의 코드를 이 API를 활용하여 바꿔보면 훨씬 간결해진 것을 알 수 있다.
time.php
1 2 3 4 5 | <?php $d1 = new DateTime; $d1->setTimezone(new DateTimezone($_POST['timezone'])); echo $d1->format($_POST['format']); ?> | cs |
demo.html
POST방식으로 서버와 통신하는 방법
예제 코드를 먼저 살펴보자
time.php
1 2 3 4 5 | <?php $d1 = new DateTime; $d1->setTimezone(new DateTimezone("asia/seoul")); echo $d1->format('H:i:s'); ?> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> <p>time : <span id="time"></span></p> <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="execute" value="execute" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('#execute').click(function(){ $.ajax({ url:'./time.php', type:'post', data:$('form').serialize(), success:function(data){ $('#time').text(data); } }) }) </script> </body> </html> | cs |
26번째줄
1 | data:$('form').serialize() | cs |
이 코드는 form태그의 정보를 값의 이름 = 값의 내용&값 의 형식으로 바꿔준다. 즉, form의 값들을 하나의 텍스트로 만들어주는 것이다.
JSON을 처리하는 방법
time.php
1 2 3 4 | <?php $timezones = ["Asia/Seoul", "America/New_York"]; echo json_encode($timezones); ?> | cs |
두 개의 값을 담고 있는 배열 timezones을 json_enode를 통해서 json타입으로 변환 후 그것을 화면에 출력해준다.
demo_json.html (html 포맷 생략)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <p id="timezones"></p> <input type="button" id="execute" value="execute" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('#execute').click(function(){ $.ajax({ url:'./time.php', dataType:'json', success:function(data){ var str = ''; for(var name in data){ str += '<li>'+data[name]+'</li>'; } $('#timezones').html('<ul>'+str+'</ul>'); } }) }) </script> | cs |
8번째줄 : time.php가 리턴해주는 데이터가 json형식이라는 것을 명시해줌
'웹' 카테고리의 다른 글
| [web server / was]아파치와 톰캣 (0) | 2018.06.07 |
|---|---|
| [CORS-크로스 도메인]프로토콜 문제 (0) | 2018.06.05 |
| [Ajax]생활코딩>클라이언트>JavaScript>웹브라우저 자바스크립트>Ajax (0) | 2018.05.31 |
| [프로토콜]http와 https의 차이 (0) | 2018.05.29 |
| [java] if문에서 break와 return의 차이 (0) | 2018.05.29 |