Ajax |
| (Asynchronous Javascript and XML , 에이잭스)는 대화식 웹 애플리케이션의 제작을 위해 이용하는 웹 개발 기법. |
어떤 원리이고 흐름인가? 보통 웹사이트 들어갈 때 어떻게 들어가는가? 브라우저 위에 주소창에 URL을 쓰고 들어간다. 그러면 브라우저가 그 URL(서버)로 연결시켜준다. 서버에서 받아온 데이터들을 브라우저가 받아서 파싱해서 뿌려준다. 이게 보통 웹의 흐름이라면, AJAX는 AJAX 자체가 브라우저라고 생각하면 된다. URL을 받고, AJAX 내부에서 XMLHttpRequest 통신을 해서 URL(서버)로 연결시켜준다. 서버에서 받아온 데이터들을 AJAX가 받는다. (어떻게 뿌릴지는 여기서 직접 알아서 한다 ㅋㅋ) |
장점
- 페이지 이동없이 고속으로 화면을 전환할 수 있다.
- 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
- 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
단점
- Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
- Http클라이언트의 기능이 한정되어 있다.
- 페이지 이동없는 통신으로 인한 보안상의 문제
- 지원하는 Charset이 한정되어 있다.
- 스크립트로 작성되므로 Debugging이 용이하지 않다.
- 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
- 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.
* 순수 Ajax는 http://mainia.tistory.com/314 블로그 참조.
i. Ajax 기본
1. 기본예제
jQuery를 이용하면 간단 명료하게 작성 가능하다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { jQuery.ajax({ type:"GET", url:"/test", dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨 success : function(data) { // 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다. // TODO }, complete : function(data) { // 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다. // TODO }, error : function(xhr, status, error) { alert("에러발생"); } }); }); </script> |
* <script src="http://code.jquery.com/jquery-latest.min.js"></script>
이렇게 쓰면 jQuery의 항상 최신 버전을 쓸 수 있다.
보통 complete을 쓸 지, success를 쓸 지는 상황에 따라 다르다.
둘 중 하나만 써야함. 그냥 설명하기 위해 2개 쓴 것임.
(반드시 둘 중 하나만 써야하는건 아니고, 둘다 쓰면 두 번 호출되기 때문에)
2. 값 받아오기
success를 통해 받아온 값을 alert 으로 띄운다거나,
HTML 코드에 추가해서 나타내거나 여러가지 방법으로 보여지도록 할 수 있다.
JSON으로 받는 법을 정리하겠다
JSON 객체는 요렇게 생긴 객체임.
{"name": "lioncat", "age": 14, "nickname": "qwerty"} |
서버 단에서는,
객체에 있는 값을 JSON 형태로 만들어주는 라이브러리들이 있으니
서버는 그 것을 사용해서 JSON으로 리턴 하면된다.
클라이언트에서도 JSON으로 받아야 하는데,
3번 예제처럼 dataType:"JSON" 부분을 써주면 JSON으로 받아진다.
success에서 받아온 객체인 data를 alert으로 띄워보면
[Object object] 라고 나올 것이다.
저것을 어떻게 보느냐???
-> each 함수를 사용해야 된다. (자세한 each 사용법은 검색 ㄱㄱ)
// success나 complete 안에서 사용 $.each(data, function() { alert(this["name"]); alert(this.age); }); 또는 $.each(data, function(index, entry) { alert(entry["name"]); alert(entry.age); }); |
* 참고로 jQuery를 사용하지 않은 순수 AJAX를 통해 데이터를 받아왔을 때는 eval 함수를 써야한다.
jQuery의 AJAX에서는 자체적으로 JSON Object로 변환 시켜준 것이기 때문에 each로 쓸 수 있지만,
순수 AJAX에서는 JSON 객체로 변환되지 않았기 때문이다.
ii. Ajax 메서드
1. jquery Ajax 기본 메서드
$.ajax( url [, settings ] );
예제 >
$.ajax({
url: "http://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
})
.done(function( data ) {
if ( console && console.log ) {
console.log( "Sample of data:", data.slice( 0, 100 ) );
}
});
2. jquery Ajax 부가 메서드
1) $.get(url [,data][,success][,dataType]) get 방식으로 ajax 를 수행함
2) $.post(url [,data][,success][,dataType]) post 방식으로 ajax 를 수행함
3) $.getJSON(url [,data][,success]) get 방식으로 ajax 를 수행하여 json 데이터를 가져옴 (jsonp 사용가능)
4) $.getScript(url [,success]) get 방식으로 ajax 를 수행하여 javascript 데이터를 가져옴
5) $(selector).load(url [,data][,complete]) ajax를 수행한 후에 선택자로 선택한 문서 객체 안에 응답 데이터를 넣음
3. jquery Ajax 보조 메서드
1) $.param( obj ) 객체의 내용을 요청 매개 변수 문자열로 만듬
접기
<script>var params = { width:1680, height:1050 };var str = jQuery.param( params );</script>결과 >>> width=1680&height=1050
접기
2) .serialize() 입력 양식의 내용을 요청 매개 변수 문자열로 만듬
접기
<form><select name="single"><option>Single</option><option>Single2</option></select><br><select name="multiple" multiple="multiple"><option selected="selected">Multiple</option><option>Multiple2</option><option selected="selected">Multiple3</option></select><br><input type="checkbox" name="check" value="check1" id="ch1"><label for="ch1">check1</label><input type="checkbox" name="check" value="check2" checked="checked" id="ch2"><label for="ch2">check2</label><br><input type="radio" name="radio" value="radio1" checked="checked" id="r1"><label for="r1">radio1</label><input type="radio" name="radio" value="radio2" id="r2"><label for="r2">radio2</label></form>
<script>function showValues() {var str = $( "form" ).serialize();$( "#results" ).text( str );}$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );$( "select" ).on( "change", showValues );showValues();</script>
결과 >>> single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
접기
3) .serializeArray() 입력 양식의 내용을 객체로 만듬
접기
<form><select name="single"><option>Single</option><option>Single2</option></select><br><select name="multiple" multiple="multiple"><option selected="selected">Multiple</option><option>Multiple2</option><option selected="selected">Multiple3</option></select><br><input type="checkbox" name="check" value="check1" id="ch1"><label for="ch1">check1</label><input type="checkbox" name="check" value="check2" checked="checked" id="ch2"><label for="ch2">check2</label><br><input type="radio" name="radio" value="radio1" checked="checked" id="r1"><label for="r1">radio1</label><input type="radio" name="radio" value="radio2" id="r2"><label for="r2">radio2</label></form>
<script>function showValues() {var fields = $( ":input" ).serializeArray();$( "#results" ).empty();jQuery.each( fields, function( i, field ) {$( "#results" ).append( field.value + " " );});}$( ":checkbox, :radio" ).click( showValues );$( "select" ).change( showValues );showValues();</script>
결과 >>> Single2 Multiple2 check2 radio1
접기
3. jquery Ajax 보조 메서드
1) $.param( obj ) 객체의 내용을 요청 매개 변수 문자열로 만듬
<script>var params = { width:1680, height:1050 };var str = jQuery.param( params );</script>결과 >>> width=1680&height=1050
2) .serialize() 입력 양식의 내용을 요청 매개 변수 문자열로 만듬
<form><select name="single"><option>Single</option><option>Single2</option></select><br><select name="multiple" multiple="multiple"><option selected="selected">Multiple</option><option>Multiple2</option><option selected="selected">Multiple3</option></select><br><input type="checkbox" name="check" value="check1" id="ch1"><label for="ch1">check1</label><input type="checkbox" name="check" value="check2" checked="checked" id="ch2"><label for="ch2">check2</label><br><input type="radio" name="radio" value="radio1" checked="checked" id="r1"><label for="r1">radio1</label><input type="radio" name="radio" value="radio2" id="r2"><label for="r2">radio2</label></form>
<script>function showValues() {var str = $( "form" ).serialize();$( "#results" ).text( str );}$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );$( "select" ).on( "change", showValues );showValues();</script>
결과 >>> single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
3) .serializeArray() 입력 양식의 내용을 객체로 만듬
<form><select name="single"><option>Single</option><option>Single2</option></select><br><select name="multiple" multiple="multiple"><option selected="selected">Multiple</option><option>Multiple2</option><option selected="selected">Multiple3</option></select><br><input type="checkbox" name="check" value="check1" id="ch1"><label for="ch1">check1</label><input type="checkbox" name="check" value="check2" checked="checked" id="ch2"><label for="ch2">check2</label><br><input type="radio" name="radio" value="radio1" checked="checked" id="r1"><label for="r1">radio1</label><input type="radio" name="radio" value="radio2" id="r2"><label for="r2">radio2</label></form>
<script>function showValues() {var fields = $( ":input" ).serializeArray();$( "#results" ).empty();jQuery.each( fields, function( i, field ) {$( "#results" ).append( field.value + " " );});}$( ":checkbox, :radio" ).click( showValues );$( "select" ).change( showValues );showValues();</script>
결과 >>> Single2 Multiple2 check2 radio1
4. jquery Ajax 이벤트 연결 메서드
- spinner 구현 등에 사용 ( 아래 순서대로 이벤트 실행 )
- 만약 $.ajax() 나 $.ajaxSetup() 의 global 옵션값이 false 이면 이벤트 핸들러는 작동하지 않음
1) .ajaxStart( handler ) ajax 요청을 시작할 때 실행
2) .ajaxSend( handler ) ajax 요청을 보낼 때 실행
3) .ajaxSuccess( handler ) ajax 요청이 성공할 때 실행
4) .ajaxError( handler ) ajax 요청이 실패할 때 실행
5) .ajaxComplete( handler ) ajax 요청이 완료될 때 실행
6) .ajaxStop( handler ) ajax 요청을 중지할 때 실행
예제)
$( document ).ajaxComplete(function( event, xhr, settings ) {if ( settings.url === "ajax/test.html" ) {$( ".log" ).text( "Triggered ajaxComplete handler. The result is " +xhr.responseHTML );}});
추가) jQuery AJAX ajaxSetup() Method
Method | Description |
AJAX 요청을 수행합니다. | |
AJAX 요청을 완료했을 때 수행할 함수를 명시합니다. | |
AJAX 요청을 완료했으나 오류가 있을때 수행할 함수를 명시합니다. | |
AJAX 요청을 보냈을 때 수행할 함수를 명시합니다. | |
AJAX 요청하기 위해 디폴트 값을 설정합니다. | |
ajaxStart() | 가장 첫 AJAX 요청을 시작할 때 수행할 함수를 명시합니다. |
ajaxStop() | 모든 AJAX 요청이 완료됐을 때 수행할 함수를 명시합니다. |
ajax.Success() | 모든 AJA 요청이 성공했을 때 수행할 함수를 명시합니다. |
$.get() | AJAX HTTP GET Request를 사용하여 서버로부터 데이터를 로드합니다. |
$.getJSON() | AJAX HTTP GET Request를 사용하여 서버로부터 JSON-ecoded 데이터를 로드합니다. |
$.getScript() | AJAX HTTP GET Request를 사용하여 서버로부터 Javascript를 로드하거나 수행합니다. |
load() | 서버로부터 데이터를 로드하고 리턴된 HTML을 선택된 엘리먼트에 넣습니다. |
$.param() | 배열이나 오브젝트를 한 줄로 표현할 수 있게 합니다. (쉬운 예로, URL query 형식) |
$.post() | AJAX HTTP POST Request를 사용하여 서버로부터 데이터를 로드합니다. |
serialize() | 한 세트의 form 엘리먼트를 string 형태로 submit할 때, 이를 인코딩합니다. |
serializeArray() | 한 세트의 form 엘리먼트를 name과 value 형태의 배열로 submit할 때, 이를 인코딩합니다. |
Method | Description |
data() | 선택된 엘리먼트에 데이터를 추가하거나, 선택된 엘리먼트로부터 데이터를 얻습니다. |
each() | selector와 일치하는 각각의 엘리먼트에 수행할 함수를 명시합니다. |
get() | selector와 일치하는 DOM 엘리먼트를 얻습니다. |
index() | 선택된 엘리먼트 중에서 특정 엘리먼트의 index 값을 찾을 수 있습니다. |
$.noConflict() | 자신이 원하는 특정 이름으로 $표시를 대체할 수 있습니다. |
removeData() | data()메서드를 사용하여 이전에 설정된 데이터를 삭제합니다. |
size() | selector와 일치하는 DOM 엘리먼트 개수를 리턴합니다. |
toArray() |
Name | Value/Description |
async | Boolean 값 요청이 비동기식으로 처리되는지 여부를 나타냄 기본값은 true |
beforeSend(xhr) | 요청을 보내기 전에 실행되는 함수 |
cache | Boolean 값 브라우저가 요청된 페이지를 캐싱해야 하는지 여부를 나타냄 기본값은 true |
complete(xhr,status) | 요청이 완료됐을 때 실행되는 함수 |
contentType | 서버로 보내지는 데이터의 content-type 기본값은 “application/x-www-form-urlencoded" |
context | |
data | 서버로 보내지는 데이터를 의미 |
dataFilter(data,type) | XMLHttpRequest의 응답 데이터를 처리할 때 사용되는 함수 |
dataType | 서버 응답으로 받는 데이터 타입 |
error(xhr,status,error) | 요청이 실패했을 때 실행되는 함수 |
global | Boolean 값 요청에 대해 전역 AJAX 이벤트를 실행할 지 여부를 명시함 기본값은 true |
ifModified | Boolean 값 마지막 요청 이후에 응답이 변경됐을 때만 처리하는지를 명시 기본값은 false |
jsonp | jsonp 요청에서 callback 함수를 오버라이딩하는 문자열 |
jsonpCallback | jsonp 요청에서 callback 함수 이름을 나타냄 |
password | HTTP 접근 인증(access authentication) 요청에 사용할 password를 나타냄 |
processData | Boolean 값 요청으로 보낸 데이터를 query string 형태로 변환할지 여부를 나타냄 기본값은 true |
scriptCharset | 요청할 때의 charset을 나타냄 |
success(result,status,xhr) | 요청이 성공했을 때 수행되는 함수 |
timeout | 요청에 대해 로컬의 응답제한시간(timeout)을 밀리초로 나타냄 |
traditional | Boolean 값 파라미터 직렬화를 기존 방식으로 사용할 지 여부를 나타냄 |
type | 요청 type(GET 혹은 POST)을 명시함 |
url | 요청을 보낼 URL을 나타냄 기본값은 현재페이지 |
username | HTTP 접근 인증(access authentication) 요청에 사용할 username을 나타냄 |
xhr | XMLHttpRequest 오브젝트를 생성할 때 사용하는 함수 |
********************************** Ajax 예제 모음. **********************************
예제> Get 방식 // 버튼 클릭시 네이버 실시간 검색어 가져오는 Ajax
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> jquery </title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button>download</button> <ul id="dataAdd"> </ul>
type : "POST" //"POST", "GET"
, async : true //true, false
, url : "Inquiry.jsp" //Request URL
, dataType : "html" //전송받을 데이터의 타입
, timeout : 30000 //제한시간 지정
, cache : false //true, false
, data : $("#inputForm").serialize() //서버에 보낼 파라메터
, contentType: "application/x-www-form-urlencoded; charset=UTF-8"
, error : function(request, status, error) {
//통신 에러 발생시 처리
alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
}
, success : function(response, status, request) {
//통신 성공시 처리
$('#resultDIV').append(response);
}
, beforeSend: function() {
//통신을 시작할때 처리
$('#ajax_indicator').show().fadeIn('fast');
}
, complete: function() {
//통신이 완료된 후 처리
$('#ajax_indicator').fadeOut();
}
});
<div id="ajax_indicator" style="display:none">
<p style="text-align:center; padding:16px 0 0 0; left:50%; top:50%; position:absolute;"><img src="/Report/images/ajax-loader.gif" /></p>
</div>
$("#inputForm").submit(function(){ //form에서 submit시
$("#searchBtn").click(function(){ //button 클릭시
function search(){ //일반 함수로 정의하여 버튼 등에 onclick="search()"로 연결
$(function(){ //스크립트 로드시
'knowledge' 카테고리의 다른 글
| http / https (0) | 2014.04.08 |
|---|---|
| COOKIE , Session (0) | 2014.04.08 |
| XML (0) | 2014.04.08 |
| LocalStorage (Web Storage) (0) | 2014.04.08 |
| JSON (0) | 2014.04.08 |