01. jQuery.ajax( options )
Parameters : options(Map) - key/value 쌍으로 이루어진 값. 모든 option의 값 들은 생략가능하며, $.ajaxSetup()의 형태로 default 값을 만들어서 사용이 가능하다. option을 구성하는 값은 다음과 같다.
asyn(Boolean) : 모든 request는 기본적으로 비동기(Asynchronous)방식이다. 만약 동기(synchronous)방식을 원한다면, asyn:false의 형식으로 구성하면 된다. 동기방식의 request인 경우, 응답을 받는 동안 화면이 멈추는 현상과 화면에서 다른 조작을 취할 수 없다.
beforeSend(Function) : request를 보내기 전에 XMLHttpRequest 값의 변경을 가능하게 하는 콜백함수. XMLHttpRequest는 beforeSend() function의 입력 값 형태로 사용된다. Ajax.Event 에서 상세한 내용을 다룬다.
cache(Boolean) : jQuery 1.2 에서 추가 되었으며, false일 경우 요청 내용이 화면에 바로 반영되며, true일 경우 browser에 의해 저장된다.
complete(Function) : 요청이 완료되었을 경우 호출된다. (complere가 호출된 이후에 success 또는 error function이 호출된다. complere()는 XMLHttpRequest 객체와 요청에 대한 성공 여부를 문자열 값으로 받는다.)
contentType(String) : 서버로 보내지는 데이터의 content-type. 서버로 전송되는 data는 일정한 형식으로 인코딩 되며, "application/x-wwwform-urlencoded"는 URL 인코딩이라고 부르며, 별도의 설정을 하지 않은 경우 기본 값으로 URL인코딩을 사용한다.
URL인코딩 방식은 대량의 data나 이미지, 파일 등과 같은 바이너리 형식의 data를 전송하기에 적합한다. 이런 경우 "multipart/form-data"와 같은 contentType을 사용한다.
data(Object|String) : 서버로 보내지는 데이터를 의미하며, 입력받은 문자열이 &name=vale 형식의 값이 아닐 경우 자동으로 변환한다. 입력 값 중 문자열을 제외한 객체 형식의 입력 값은 key/value 쌍의 값 형태로 되어 있어야 하며, 값이 Array 형태일 경우 jQuery는 같은 key로 서로 다른 값을 갖게 된다. (i.e. {foo:[bar1,bar2]} becomes "foo=bar1&foo=bar2")
dataType(String) : request에 대한 응답 결과의 형태. dataType:none의 형태로 설정할 경우 XML과 HTTP 형태 중 jQuery가 적합하다고 판돤하는 형식으로 data-type을 정의한다. XML 형식일 경우 responseXML, TEXT 형식일 경우 responseHTTP 형식으로 변환해서 success() function의 입력 값이 전달된다. success() 콜백함수의 첫 번째 입력 값의 형태는 다음과 같다.
① "xml" - 응답 결과를 jQuery에 의해서 가공된 XML Document 형식으로 처리한다.
② "html" - 응답 결과를 HTML 형식으로 처리하며 Script block의 내용 또한 그대로 유지한다.
③ "script" - 응답 결과를 Javascript로 인식한다.
④ "json" - 응답 결과를 JSON 객체 형식으로 처리한다.
⑤ "jsonp" - 요청 data에 콜백함수를 추가해서 보내고 서버에서는 응답 형식으로 JSON 객체를 사용한다.
⑥ "text" - 응답 결과를 가공하지 않은 문자열로 처리한다.
error(Function) : 요청이 실패한 경우 호출된다. error() function은 XMLHttpRequest 객체, error가 발생한 원인에 대한 설명(문자열 형태) 그리고exception 객체(Optional)로 구성되는 2개의 입력 값을 받는다.
global(Boolean) : ajaxStart() 또는 ajaxStop() 등 Ajax 를 trigger 할 수 있는 option을 제공한다. global:false의 형식으로 설정될 경우 trigger를 못하도록 막는다.
ifModified(Boolean) : 현재의 응답이 이전의 응답 결과와 다를 경우만 처리하도록 한다. 헤더 값에 존재하는 "if-Modified-Since"의 값으로 처리하며 기본 값은 헤더의 값을 체크하지 않는 false이다.
jsonp(String) : jsonp 요청에 대한 콜백함수를 override한다. GET, POST 방식에서 value 값이 콜백일 경우 'callback=?'로 사용된다. 따라서 {jsonp:'onJsonPLoad'} 일 경우 'onJsonPLoad=?'의 형식으로 서버로 보내진다.
processData(Boolean) : data:{key:"value"}의 형식에서 {key:"value"}의 값들을 query String 형식인 &key=value의 형식으로 변경한다. DOM Document 형식 또는 query string 이 아닌 다른 형태를 원할 경우 processData:false로 설정한다.
success(Function) : 요청이 성공했을 때 호출된다. 2개의 입력 값을 받으며, 첫 번째 입력 값은 서버로부터 받은 결과이고 형태는 'dataType'에서 정의된 형태로 전달되고, 두 번째 입력 값은 상태에 대한 문자열 형식으로 입력된다.
timeOut(Number) : 요청에 대한 응답 제한 시간을 millisecond 단위로 설정한다. $ajaxSetup에서 설정한 time-out 시간을 override한다. 한 예로 $ajaxSetup에서 정의한 time-out 시간보다 많은 시간이 필요한 페이지에서 적용할 수 있다.
type(String) : POST, GET 등의 요청 타입을 정의한다. PUT, DELETE 등의 HTTP method() 등도 사용 가능하나, 모든 browser들에서 지원되지는 않는다.
url(String) : 요청을 보낼 서버의 URL
Returns : XMLHttpRequest
Description : jQuery에서 제공하는 Ajax toolkit. (Load a remote page using an HTTP request)
■ Javascript 파일을 실행 가능한 형태로 load한다.
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.ajax({
type: "GET",
url: "./test.js",
dataType: "script",
success:function(data){
call("jQuery!");
}
});
});
</script>
위 예제는 jQuery ajax를 통해서 local directory에 위치하는 test.js인 Javascript 파일을 load한 후 실행하는 예제이다. 이 때 jQuery ajax의 옵션 중 dataType이 "script"로 설정되어 있어야 한다.
test.js
function call(param){
alert("Parameter is "+param);
}
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.ajax({
type: "POST",
url: "http://localhost/jquery/js/remote.js",
dataType: "script",
complete:function(){
alert(remoteScript("jQuery!"));
}
});
});
</script>
위 예제는 local에 위치하는 Javascript 파일이 아니라, 다른 서버에 존재하는 Javascript 파일을 load하는 예제이다. local에 존재하는 Javascript 파일을 laod하여 사용하는 것과 차이가 없음을 알 수 있다.
remote.js
function remoteScript(userName){
return "Hello, "+useName;
}
■ Server로 데이터를 보내고, 요청에 대한 응답을 받는다.
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://www.google.co.kr/search",
data: {
q: "jquery"
},
success: function(data, textStatus){
$.each($($("img:not([src*='icons']):not([src$='png'])", data)), function(i){
if (i < 4)
$("#message").append($(this));
});
}
});
});
</script>
<style>
div {
font-family: verdana;
font-size: 12px;
border: 1px solid gray;
width: 350px;
text-align: center;
}
</style>
<body>
<div id="message"></div>
</body>
Ajax에서 일반적으로 가장 많이 사용되는 형태 중 하나이다. url의 값으로 등록된 주소로 data에 해당하는 값을 보내고, 요청에 해당하는 응답을 success의 callback function을 통해서 받게 된다.
콜백함수의 인수로 들어오는 값의 첫 번째 인자는 서버에서 보내온 결과 값을 의미하고, 두 번째 인자인 textStatus는 성공일 경우 "success" 문자열을 나타낸다.
■ 최신의 HTML Page를 가져온다.
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "cache.html",
cache: false,
success: function(data, textStatus){
$("#message").append(data);
}
});
});
</script>
<style>
div {
font-family: verdana;
font-size: 12px;
border: 1px solid gray;
width: 200px;
text-align: center;
}
</style>
<body>
<div id="message"></div>
</body>
cache의 값이 true일 경우 browser cache에 저장되어 있는 HTML page의 구성 요소(img, css, Javascript)의 정보를 가져온다. cache의 값이 false일 경우 browser의 cache에 HTML page의 구성요소 값이 존재하더라도, 서버에서 모든 정보를 다시 읽어와 화면에 보여준다.
■ 서버로 전송된 요청에 대한 응답이 있기 전까지 화면의 조작을 막게 된다.
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var html = $.ajax({
url: "http://localhost/jquery/ajax/",
data: {
"param": "jQuery!",
"async": "false"
},
async: false
}).responseText;
$("#message").append(html);
$("button").click(function(){
alert($("button").text())
});
});
</script>
<style>
div {
font-family: verdana;
font-size: 12px;
border: 1px solid gray;
width: 200px;
text-align: center;
}
</style>
<body>
<button>Hello, jQuery</button><br><br>
<div id="message"></div>
</body>
옵션 async의 값이 false일 경우 요청에 대한 응답이 오기 전까지 화면에 대한 조작을 할 수 없게 된다.
위의 예제는 화면이 로드됨과 동시에 Hello, jQuery 버튼을 클릭해도 alert 창이 보이지 않다가 3초 후에 보이게 된다.
parameter로 async=false의 형태로 값을 보내면 서버에서 값을 확인한 후에 async의 값이 false일 경우 3초간 thread를 sleep 시키게 된다. 따라서 응답은 3초 후에 클라이언트에게 전송되고 응답을 받기 전인 요청 후 3초간은 화면에서의 조작을 할 수 없게 되는 것이다.
02. load( url [,data] [,callback] )
Parameters : url(String) - server url, data(Map)(Optional) - name/value 쌍의 서버로 전송할 데이터, callback(Function)(Optional) - 요청에 대한 응답 정보를 입력 값으로 받는 콜백함수
Returns : jQuery
Description : jQuery ajax의 가장 간단한 형태중 하나. jQuery 1.2 부터는 url에 jQuery selector를 적용 가능하다. url의 값으로 등록된 파일을 load하여 현재의 document 안에 삽입한다. callback function의 입력 값 형태는 function(responseText, textStatus, XMLHttpRequest)와 같으며, responseText는 결과 값, textStatus는 성공 여부를 'success' 와 'error' 의 형식으로 나타낸다.
$("#links").load(http://www.google.co.kr img);
id가 links인 엘리먼트 안에 url의 값을 load한다. www.google.co.kr 에 접속 했을 때 보여주는 페이지에서 img 엘리먼트를 모두 가져와서 보여준다.
$("#links").load("feed.html img");
local에 존재하는 feed.html 을 load한 후 가져온 문서에서 img 엘리먼트를 가져와서 현재 docuemtn에 id가 links인 엘리먼트 안에 포함시킨다.
feed.html
...
<p>Hello, jQuery!</p>
So, easy!
<img src="../../img/jQuery.jpg">
...
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#links").load("feed.html p", function(){
alert($(this).html());
});
});
</script>
<body>
<div>
<b id="links"></b>
</div>
</body>
load(url, data, callback)의 3번째 입력 값인 콜백함수를 추가했다. 여기서 콜백함수 안에 구현된 this는 $("#links")를 의미한다.
03. jQuery.get( url [,data] [,callback] [,type] )
Parameters : url(String) - The URL of the page to load, data(Map)(Optional) - {name:value} 쌍의 서버로 전송할 데이터, callback(Function)(Optional) - 요청이 성공으로 완료된 후 호출될 콜백함수, type(String)(Optional) - Type of data to be returned to callback function: "xml", "html", "script", "json", "jsonp", or "text"
Returns : XMLHttpRequest
Description : Get방식으로 서버와 통신하는 jQUery Ajax 형태이다. 세 번째 콜백함수는 요청에 대한 응답이 성공일 경우만 호출된다. 따라서 성공이 아니니 경우의 처리를 원할 경우 Global jQUery Ajax Function 이나, jQuery.ajax(...) 의 형태를 사용해야 한다. callback function의 형태는 function(data, textStatus)의 형태이며, 데이터는 성공일 경우의 응답 결과값을 나타내고, textStatus 는 성공일 경우만 'success'문자열로 입력된다.
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$.get("http://www.google.co.kr", function(data){
$(data).find('img').appendTo("#result");
});
});
</script>
<body>
<div>
<span id="result"></span>
<br>
</div>
</body>
url 값이 http://www.google.co.kr 인 페이지를 호출한 후 요청 url의 결과 값에서 img 엘리먼트를 추출, document에 있는 id가 "result"인 엘리먼트 안에 추가한다.
<script src="../../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$.ajaxSetup({
dataType: "text"
});
$.get("http://localhost/jquery/ajax/", {
"param": "jQuery!"
}, function(data, textStatus){
alert(textStatus);
$("#result").append(data);
});
});
</script>
<body>
<div>
<span id="result"></span>
<br>
</div>
</body>
서버로 데이터를 전송하고, 성공일 경우 XMLHttpRequest의 상태 값을 alert로 확인한 후, 서버에서 보내온 응답을 id가 'result' 인 엘리먼트에 추가한다.
이 예제에서 상단부의 $ajaxSetup(...)은 현재 document에서 모든 jQuery를 통한 Ajax 설정에 적용되는 공통 값(전역속성)이라고 생각하면 될 것이다. 공통설정에서 dataType의 option을 'text'의 형태로 정했다. (jQuery에서 dataType이 생략될 경우 jQuery 내부에서 text 값을 적용할지 XML 형식의 값을 적용할지, 그렇지 않으면 나머지 값들을 적용할지 판단한다.)
<script type="text/javascript">
$.ajaxSetup({
dataType: "text"
});
$(function(){
$.get("http://localhost/jquery/ajax/", {
"한글": "입니다!"
}, function(data, textStatus){
alert(textStatus);
$("#result").append(data);
});
$("#result").ajaxComplete(function(evt, xhr, opt){
//this --> DOM Element
$(this).append("<br>Event called[" + evt.type + "] " +
"<br>server url[" +
opt.url +
"] " +
"<br>data type[" +
opt.dataType +
"] " +
"<br>data[" +
opt.data +
"]");
});
});
</script>
GET 방식으로 요청이 이루어질 경우 실제 option 값들이 어떤 식으로 보내지는지 확인하는 예제이다.
GET 방식일 경우 data option 의 name:value의 값들이 url의 서버 주소 뒤에 쿼리 문자열 형태로 변경이 되며, 한글일 경우 위의 예제처럼 encoding 되어 서버로 전송되는 것을 알 수 있다.
jquery ajax 활용