-
728x90반응형
Ajax의 개요
Ajax 란?
Ajax란 Asynchronous JavaScript and XML을 의미한다.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.
Ajax는 백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시해 준다.
예제
$function( ) {
$("#requestBtn").on("click", function() {
$("#text").load("/examples/media/jquery_ajax_data.txt");
});
});
Ajax 프레임 워크
Ajax를 사용하여 손쉽게 개발할 수 있도록 미리 여러 가지 기능들을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다.
이러한 Ajax 프레임워크 중에서도 가장 많이 사용되는 대표적인 프레임워크는 다음과 같다.
- prototype
- script.aculo.us
- dojo
- jQuery
이외에도 수많은 Ajax 프레임워크가 있지만, 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)이다.
제이쿼리와 Ajax
제이쿼리에서는 Ajax 기능을 손쉽게 사용할 수 있도록 여러 메소드를 제공하고 있다.
이러한 메소드를 사용하면 HTTP 요청(request)을 손쉽게 보낼 수 있다.
또한, 데이터의 종류에 따라 그에 알맞는 메소드를 사용하여 서버에 데이터를 요청할 수 있다.
HTTP 요청 방식
클라이언트인 브라우저가 서버에 HTTP 요청을 보낼 때는 다음 방식 중 하나를 사용한다.- GET 방식
- POST 방식
GET 방식
GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식이다.
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장된다.
또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있다.
따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST방식을 사용하여 요청하는 것이 좋다.
POST 방식
POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식이다.
POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다.
또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송된다.따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높다.GET 방식과 POST 방식의 비교
특징
GET 방식
POST 방식
캐시화(cached)
캐시될 수 있음.
캐시되지 않음.
브라우저 히스토리
히스토리에 쿼리 문자열이 기록됨.
히스토리에 기록되지 않음.
데이터 길이
데이터의 길이가 URL 주소의 길이 이내로 제한됨
(익스플로러에서 URL 주소가 가질 수 있는 최대 길이는 2,083 자이며, 이 중에서 순수 경로 길이는 2, 048자 까지만 허용됨)
제한 없음.
데이터 타입
오직 ASCII 문자 타입의 데이터만 전송할 수 있음.
제한 없음.
보안성
데이터가 URL 주소에 포함되어 전송되므로, 아무나 볼 수 있어 보안에 매우 취약함.
브라우저 히스토리에도 기록되지 않고, 데이터가 따로 전송되므로, GET 방식보다 보안성이 높음.
Tip : 현재 주요 웹 브라우저에서 사용할 수 있는 URL 주소의 최대 길이는 익스플로러를 제외하면, 제한을 두지 않고 있다.
$.get( ) 메소드
제이쿼리에서는 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get( ) 메소드를 제공한다.
이 메소드를 사용하면 서버에 GET 방식의 HTTP 요청을 보낼 수 있다.
$.get( ) 메소드의 원형은 다음과 같다.
원형
$.get(URL 주소[,콜백함수]);
URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이다.콜백 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의한다.
예제12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Ajax HTTP Request</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {$("#requestBtn").on("click", function() {// GET 방식으로 서버에 HTTP Request를 보냄.$.get("/examples/media/request_ajax.php",{ species: "고양이", name: "나비", age: 3, }, // 서버가 필요한 정보를 같이 보냄.function(data, status) {$("#text").html(data + "<br>" + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.});});});</script></head><body><h1>$.get() 메소드</h1><button id="requestBtn">GET 방식으로 데이터 불러오기!</button><p id="text"></p></body></html>cs $.post( ) 메소드
제이쿼리에서는 Ajax를 이용하여 POST 방식의 HTTP 요청을 구현한 $.post( ) 메소드를 제공한다.
이 메소드를 사용하면 서버에 POST 방식의 HTTP 요청을 보낼 수 있다.
원형
$.post(URL주소[,데이터][,콜백함수]);
URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이다.데이터는 HTTP 요청과 함께 서버로 보낼 데이터를 전달한다.
콜백 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의한다.
예제
12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Ajax HTTP Request</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {$("#requestBtn").on("click", function() {// POST 방식으로 서버에 HTTP Request를 보냄.$.post("/examples/media/request_ajax.php",{ name: "홍길동", grade: "A" }, // 서버가 필요한 정보를 같이 보냄.function(data, status) {$("#text").html(data + "<br>" + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.});});});</script></head><body><h1>$.post() 메소드</h1><button id="requestBtn">POST 방식으로 데이터 불러오기!</button><p id="text"></p></body></html>cs $.ajax 메소드
제이쿼리는 Ajax와 관련된 다양하고도 편리한 많은 메소드를 제공한다.
그중에서도 $.ajax( ) 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드이다.
$.ajax( ) 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.
$.ajax( ) 메소드의 원형은 다음과 같다.
원형
$.ajax(URL주소[,옵션])
URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이다.
옵션은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합이다.
다음 예제는 $.ajax( ) 메소드에서 사용할 수 있는 대표적인 옵션을 설명하는 예제이다.
문법
$.ajax({
url: "/examples/media/request_ajax.php", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
data: { name: "홍길동" }, // HTTP 요청과 함께 서버로 보낼 데이터
method: "GET", // HTTP 요청 방식(GET, POST)
dataType: "json" // 서버에서 보내줄 데이터의 타입
})
// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.done(function(json) {
$("<h1>").text(json.title).appendTo("body");
$("<div class=\"content\">").html(json.html).appendTo("body");
})
// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
.fail(function(xhr, status, errorThrown) {
$("#text").html("오류가 발생했습니다.<br>")
.append("오류명: " + errorThrown + "<br>")
.append("상태: " + status);
})
// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
.always(function(xhr, status) {
$("#text").html("요청이 완료되었습니다!");
});
다음 예제는 $.ajax( ) 메소드의 동작을 보여주는 간단한 예제이다.
예제
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Ajax Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {$("#requestBtn").on("click", function() {$.ajax("/examples/media/request_ajax.php").done(function() {alert("요청 성공");}).fail(function() {alert("요청 실패");}).always(function() {alert("요청 완료");});});});</script></head><body><h1>$.ajax() 메소드</h1><button id="requestBtn">$.ajax() 메소드 실행</button><p id="text"></p></body></html>cs load( ) 메소드
load( ) 메소드는 선택한 요소에서 호출하는 유일한 제이쿼리 Ajax 메소드이다.load( ) 메소드는 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치한다.
또한, 선택자를 URL 주소와 함께 전송하면, 읽어 들인 HTML 코드 중에서 선택자와 일치하는 요소만을 배치한다.
예제
1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Ajax Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {$("#requestBtn").on("click", function() {// URL 주소에 존재하는 HTML 코드에서 <li>요소를 읽은 후에 id가 "list"인 요소에 배치함.$("#list").load("/examples/tryit/htmlexample/jq_elementTraversing_etc_01.html li");});});</script></head><body><h1>.load() 메소드</h1><button id="requestBtn">HTML 코드 로딩!</button><ol id="list"></ol></body></html>cs Ajax 메소드
제이쿼리는 $.ajax( ) 메소드뿐만 아니라 Ajax와 관련된 다양한 메소드를 제공하고 있다.메소드
설명
$.ajax( )
비동기식 Ajax를 이용하여 HTTP요청을 전송함.
$.get( )
전달받은 주소로 GET 방식의 HTTP 요청을 전송함.
$.post( )
전달받은 주소로 POST 방식의 HTTP 요청을 전송함.
$.getScript( )
웹 페이지에 스크립트를 추가함.
$.getJSON( )
전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JAON 파일을 전송받음.
.load( )
서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함.
Ajax와 Form 요소
Ajax에서는 서버와의 비동기식 통신을 위해 form 요소를 통해 입력받은 데이터를 직렬화(serialization)하여 전송한다.
이때 직렬화(serialization)란 입력받은 여러 데이터를 하나의 쿼리 문자열로 만드는 것을 의미한다.
이렇게 함으로써 form 요소를 통해 입력받은 데이터를 한 번에 서버로 보낼 수 있게 된다.
직렬화(serialization)
제이쿼리에서는 HTML form 요소를 통해 입력된 데이터의 직렬화 작업을 매우 간단하게 수행할 수 있다.
.serialize( ) 메소드와 .serializeArray( ) 메소드를 이용하여 손쉽게 데이터를 직렬화할 수 있다.
.serialize( ) 메소드는 HTML form 요소를 통해 입력된 데이터를 쿼리 문자열로 변환한다.
.serializeArray( ) 메소드는 serialize( ) 메소드와는 달리 입력된 데이터를 문자열이 아닌 배열 객체로 변환한다.
예제
1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Ajax Form</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {$("form").on("submit", function(event) { // <form>요소에 "submit" 이벤트가 발생할 때,event.preventDefault(); // 서버로 전송하지 않음.$("#text").html($(this).serialize()); // 입력받은 데이터를 직렬화하여 나타냄.});});</script></head><body><h1>직렬화(serialization)</h1><form action="/examples/media/request.php">자신의 별명을 적어주세요 : <br><input type="text" name="nickname" value="홍길동"><br><br>현재 살고 있는 지역을 선택해 주세요 : <br><input type="radio" name="region" value="서울" checked> 서울 <br><input type="radio" name="region" value="경기"> 경기 <br><input type="radio" name="region" value="대전"> 대전 <br><input type="radio" name="region" value="부산"> 부산 <br><input type="radio" name="region" value="광주"> 광주 <br><br>좋아하는 음악 장르를 모두 골라주세요 : <br><input type="checkbox" name="music" value="팝" checked> 팝 <br><input type="checkbox" name="music" value="재즈"> 재즈 <br><input type="checkbox" name="music" value="댄스"> 댄스 <br><input type="checkbox" name="music" value="발라드"> 발라드 <br><br><input type="submit" value="전송"></form><p id="text"></p></body></html>cs 실행결과 :
직렬화(serialization)
Tip : 한글이 포함된 입력 데이터가 쿼리 문자열로 변환될 때는 퍼센트 인코딩(percent-encoding)을 통해 변환된다.
이때 모든 한글 문자는 퍼센트 기호(%)를 포함한 16진수 값으로 변환된다.
728x90반응형'Library > jQuery' 카테고리의 다른 글
유틸리티 메소드 (0) 2018.10.25 이펙트 효과(페이드/슬라이드/jQuery.fx 객체/animate) (0) 2018.10.25 이벤트 처리 (0) 2018.10.25 스타일 설정(프로퍼티/클래스) (0) 2018.10.25 요소의 영역(크기/위치) (0) 2018.10.24
