November 24, 2019
Ajax는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.
보통 브라우저에서 웹페이지를 요청하면 서버와 통신하여 화면을 refresh하는데, Ajax를 이용하여, 서버로부터 웹 페이지가 반환될 때 화면 전체를 refresh하지 않고, 일부만을 갱신할 수 있게 해준다. 이와 같은 효과로 인해, 페이지 전체를 로드하여 렌더링할 필요가 없어지며, 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.
특히 jQuery 라이브러리로 Ajax를 사용하면 자바스크립트로만 처리하는 것에 비해 간결해지고 크로스 브라우징 문제도 해결된다.
Ajax는 비동기적으로 서버와 브라우저가 데이터를 주고 받는데, 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML만을 사용해서 통신해야 하는 것은 아니다. 사실 XML보다는 JSON을 더 많이 사용한다.
서버와 클라이언트 또는 애플리케이션에서 처리할 데이터를 주고받을 때 쓰는 자료 형식 중 대표적인 것으로는 XML과 JSON이 있다.
HTML과 같이 태그 구조의 형식으로 데이터를 표현한다. XML 문법 특성상 데이터 이외에 열고 닫는 태그가 반드시 필요하기 때문에 구조가 복잡해지고 용량이 커지는 것이 단점이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?xml version="1.0" encoding="UTF-8"?> <books> <book> <title>자바스크립트</title> <author>Jessie</author> <price>20000</price> </book> <book> <title>알고리즘</title> <author>cokk</author> <price>15000</price> </book> <book> <title>자료구조</title> <author>ellie</author> <price>18000</price> </book> </books> | cs |
서버에 지정한 형식의 자료를 요청하는 제이쿼리 범용 메소드이다. XML, JSON 등 다양한 타입의 자료를 요청할 수 있다.
1 2 3 4 5 6 7 8 | $.ajax({ url: '가져올 파일명', dataType: '데이터 형식', success: function() { //콜백 함수(가져온 파일에 대한 처리) ... } }); | 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 | <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> </head> <body> <script> $(function(){ $.ajax({ url: 'book.xml', dataType: 'xml', success: function(data){ $(data).find('book').each(function(){ var title = $('title', this).text(); var author = $('author', this).text(); var price = $('price', this).text(); var txt = "<li>" + title + ", " + author + ", " + price + "</li><hr>"; $('body').append(txt); }); } }); }) </script> </body> </html> | cs |
$(data)
는 $.ajax()
메소드가 ‘book.xml’파일에서 불러온 데이터 객체다. find()
메소드로 하위 book
객체를 찾아서 작성된 book
객체만큼 each()
를 반복 수행한다.this
는 현재 book
객체를 의미하고, title
은 book
객체 안의 title
객체를 선택한다는 의미이다. 선택한 객체의 내용을 title
변수에 대입한 것이며 나머지 author
과 price
도 같은 형태로 지정한다.JSON(JavaScript Object Notation)은 자바스크립트 객체 데이터 형식으로, XML 데이터 형식에 비해 구조 정의의 용이성과 가독성이 뛰어나서 AJAX의 표준으로 사용된다.
1 2 3 4 5 6 7 8 9 10 | { "student": { "이름": "Jessie", "나이": 20, "성별": "여", "주소": "경기도 용인시 수지구", "취미": "프로그래밍", "별명": "제씨" } } | cs |
제이쿼리 getJSON() 메소드는 ajax() 메소드의 축약형으로, JSON 데이터에 특화되어 있다.
$.getJSON(url, 콜백함수);
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 | <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> </head> <body> <script> $(function(){ //json 파일을 data로 가져옴 $.getJSON('book.json', function(){ //data 객체 지정 var books = data.book; //데이터 순회 $(books).each(function(i, obj){ var title = obj.title; var author = obj.author; var price = obj.price; var txt = "<li>" + title + ", " + author + ", " + price + "</li><hr>"; $('body').append(txt); }); }); }); </script> </body> </html> | cs |
data
객체는 json()
에서 불러온 데이터이다. data
객체의 book
객체를 지정해 변수 book
에 대입한다.each()
메소드로 book
객체에 포함된 내부 속성 값을 읽어와 출력한다. i
는 book
객체의 배열 index
값이고, obj
는 book
객체를 의미한다.