1. Ajax
1.1 Ajax란?
-Asynchronous(비동기) JavaScripr and XML의 약어
-xml를 이용하여 비동기로 통신을 처리하기 위한 기술
-XMLHttpRequest(XHR) 객체로 구현
-자바스크립트로 동적 파일 실행 요청
-자바스크립트로 HTML요소 제어
1.2 Ajax의 장점
-응답이 오기전에 다른 작업 가능
-브라우저의 페이지 전체 갱신이 없음 à 페이지 이동 없이 빠르게 화면을 전환
-서버처리를 기다리지 않고 비동기 요청이 가능
-수신하는 데이터 양을 줄일 수 있음
|
***실습1 자바스크립트로 Ajax 구현하기 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트로 Ajax 구현하기</title> <script type="text/javascript"> window.onload = function() { var xhr; //표준 & 비표준 구분. if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } else { throw new Error("Ajax를 지원하지 않는 브라우저입니다."); }
xhr.onreadystatechange = function() { if (xhr.readyState == 4) { //완료가 되면 if (xhr.status >= 200 && xhr.status < 300) { //제대로 읽어왔다면 alert(xhr.responseText); document.getElementById('container').innerHTML = xhr.responseText; } } }
xhr.open('GET', 'resource.html'); //GET방식으로 xhr 객체에 resource.html을 보내는것 xhr.send(''); } </script> </head> <body> <div id="container"></div> </body> </html>
XMLHttpRequest 객체??? -웹서버와 데이터를 주고 받을 때 사용 -비표준, 그러나 대부분의 브라우저에서 지원 -내용의 변경 없이 새로운 컨텐츠를 불러 올 수 있음 -자바스크립트로 동기 방식의 호출을 할 수 있음 |
|
***실습2 서버의 데이터를 대상 엘리먼트에 삽입하기 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>서버의 데이터를 대상 엘리먼트에 삽입하기</title> <style type="text/css"> div { width: 180px; height: 80px; margin: 3px; float: left; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#menu1').click(function () { $('#message1').load('menu.html'); return false; });
$('#menu2').click(function () { $('#message2').load('menu.html li'); return false; }); }); </script> </head> <body> <div> <a href="#" id="menu1">메뉴 보기 1</a><p> <span id="message1"></span> </div> <div> <a href="#" id="menu2">메뉴 보기 2</a><p> <span id="message2"></span> </div> </body> </html>
menu.html
<p> 중 식 메 뉴 </p> <ul> <li> 짜장면 </li> <li> 짬뽕 </li> <li> 기스면 </li> <li> 탕수육 </li> </ul> <p> 메뉴를 골라주세요.</p> |
|
***실습3 서버의 데이터를 대상 엘리먼트에 삽입하기 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>서버의 데이터를 대상 엘리먼트에 삽입하기</title> <style type="text/css"> div { width: 200px; height: 80px; margin: 3px; float: left; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#menu1').click(function () { $.ajax({ url:'menu.html', dataType:"html", success: function(data){ $('#message1').html(data); } }); return false; });
$('#menu2').click(function () { $.ajax({ url:'menu.html', dataType:"html", success: function(data){ $('#message2').html($(data).find('li')); } }); return false; }); }); </script> </head> <body> <div> <a href="#" id="menu1">메뉴 보기 1</a><p> <span id="message1"></span> </div> <div> <a href="#" id="menu2">메뉴 보기 2</a><p> <span id="message2"></span> </div> </body> </html>
|
|
***실습4 JSON 이용하기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSON 이용하기</title> <style> td { border: 1px solid gray; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $.ajax({ url : "item.json", dataType : "json", success : function(data) { $("#treeData").append( "<tr><td>id</td>" + "<td>name</td>" + "<td>price</td>" + "<td>definition</td>" + "</tr>"); $.each(data, function(i) { $("#treeData").append("<tr>" + "<td>" + this.id + "</td>" + "<td>" + this.name + "</td>" + "<td align='right'>" + this.price + "</td>" + "<td>" + this.definition +i+ "</td>" + "</tr>"); }); } }); }); </script> </head> <body> <table id="treeData"></table> </body> </html>
Item.json
[ { "id": "1", "name": "레몬", "price": " 3000", "description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다." }, { "id": "2", "name": "키위", "price": " 2000", "description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다." }, { "id": "3", "name": "블루베리", "price": " 5000", "description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다." }, { "id": "4", "name": "체리", "price": " 5000", "description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다." }, { "id": "5", "name": "메론", "price": " 5000", "description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다." }, { "id": "6", "name": "수박", "price": "15000", "description": "수분이 풍부한 과일이다." } ]
JSON 란???? -자바스크립트로 개체를 표현하는 또다른 방법
|
|
***실습5 $.getJSON으로 데이터 얻기 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>$.getJSON으로 데이터 얻기</title> <style> img { height: 100px; float: left; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?" + "tags=raccoon&tagmode=any&format=json&jsoncallback=?", function(data) { $.each(data.items, function(i, item) { $("<img/>").attr("src", item.media.m).appendTo("#images"); if (i == 4) return false; }); }); }); </script> </head> <body> <div id="images"></div> </body> </html> |
|
****실습6 XML 파일을 GET 방식으로 로드하기 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XML 파일을 GET 방식으로 로드하기</title> <style> td { border: 1px solid gray; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $.get('item.xml', function(data) { $("#treeData").append( "<tr><td>id</td>" + "<td>name</td>" + "<td>price</td>" + "<td>description</td>" + "</tr>"); $(data).find('item').each(function() { var $item = $(this); $("#treeData").append("<tr>" + "<td>" + $item.attr("id") + "</td>" + "<td>" + $item.attr("name") + "</td>" + "<td align='right'>" + $item.find("price").text() + "</td>" + "<td>" + $item.find("description").text() + "</td>" + "</tr>"); }); }); }); </script> </head> <body> <table id="treeData"></table> </body> </html> Item.xml <?xml version="1.0" encoding="UTF-8"?> <items> <item id="1" name="레몬"> <price>3000</price> <description> 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. </description> </item>
<item id="2" name="키위"> <price>2000</price> <description> 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. </description> </item>
<item id="3" name="블루베리"> <price>5000</price> <description> 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. </description> </item>
<item id="4" name="체리"> <price>5000</price> <description> 체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다. </description> </item>
<item id="5" name="메론"> <price>5000</price> <description> 메론에는 비타민A와 칼륨이 많이 포함되어 있다. </description> </item>
<item id="6" name="수박"> <price>15000</price> <description> 수분이 풍부한 과일이다.</description> </item> </items> |
'Web > jQuery' 카테고리의 다른 글
| [Javascript 기본 개념] Javascript 문법-함수(function)이란 (0) | 2016.06.23 |
|---|---|
| [Javascript 기본 개념] Javascript 문법-조건문/반복문 (0) | 2016.06.23 |
| [Javascript 기본 개념] Javascript 문법-비교/= == === 차이점 (0) | 2016.06.23 |
| [Javascript 기본 개념] Javascript 문법-자바스크립트란/숫자/문자/변수 (0) | 2016.06.23 |
| JavaScript & jQuery/예제/실습 (0) | 2016.06.22 |