'jQuery AJAX'에 해당되는 글 4건

  1. 2013.06.05 jQuery AJAX 함수 Reference
  2. 2013.05.27 jQuery AJAX get(), post()
  3. 2013.05.27 jQuery AJAX load() (2)
  4. 2013.05.25 jQuery AJAX 소개

 

이번장에서는 jQuery AJAX Reference에 대해서 알아보겠습니다.

AJAX는 전체페이지를 로딩하지 않고 서버와 데이타 및 웹페이지의 업데이트 부분을 불러들일수 있는 예술적인 기능을 합니다.

AJAX 기능에 대해서 조금더 자세히 알고싶은 분들은 저의 블로그 jQuery AJAX 를 방문하시면 됩니다.

다음 내용은 모든 jQuery의 AJAX 방법을 나타냅니다.


$.ajax()
AJAX의 요청을 수행합니다.

$.ajaxPrefilter()
AJAX 요청을 보내기 전이나 $.ajax() 함수에 의해 호출되기 전에 AJAX 옵션들을 수정하거나 조작합니다.

말이 좀 어렵습니다. ^^; 저도 코딩하면서 거의 본적이 없는 함수이기에 ....

내용인즉슨 미리 정의 되어있는 AJAX의 요청을 취소 또는 수정할 수 있다 뭐 이런 의미입니다.

$.ajaxSetup()
Ajax 요청 시 옵션 값들을 정의합니다.

예를 들어서

$.ajaxSetup({
url: 'ping.php'
});

// 이런식으로 미리 url을 정의해 놓고

$.ajax({
// 여기에서 url 값으로 ping.php 을 다시 쓸 필요가 없습니다.
data: {'name': 'Dan'}
});

// url값을 따로 불러오지 않고 사용가능합니다.

$.get()
HTTP GET 방식 요청을 통해 서버로부터 데이터를 받습니다.

$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
가장 간단한 사용방법인데 success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 넘어옵니다. 또한 응답상태값도 문자열로 넘어옵니다.
$.get("test.php", { name: "Park;s", tel: "010-1234-5678" } );
// 처럼 test.php 페이지에 변수 name, tel값을 넘길수 있습니다.


$.getJSON()

HTTP GET 방식 요청을 통해 서버로부터 받은 JSON 데이터를 로드합니다.
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
서버로 보낼 Data는 URL 쿼리 스트링에 추가됩니다. 만일 data 파라미터가 object라면, 문자열과 url 인코딩을 통해 변환된 후 URL에 추가되어 전송됩니다.


$.getScript()
HTTP GET 방식 요청을 통해 서버로부터 받은 JavaScript 파일을 로드하고 실행합니다.

$.ajax({
url: url,
dataType: "script",
success: success
});

$.param()
URL 쿼리 스트링 또는 Ajax 요청에 사용할 수 있도록 배열이나 객체를 직렬화 합니다.

$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"


$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
// 처럼 직렬화하여 배열을 사용할 수 있습니다.

$.post()
HTTP POST 방식 요청을 통해 서버로부터 데이터를 받습니다.

$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
Success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 넘어옵니다. 또한 응답상태값도 문자열로 넘어옵니다.

ajaxComplete()
AJAX 요청이 완료되면 호출될 핸들러를 등록하는 이벤트 입니다.
$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("<li>Request Complete.</li>");
});
AJAX가 완료되면 실행을 하는데 AJAX가 성공/실패 관계없이 수행됩니다.


ajaxError()
Ajax 요청에 대해 에러가 발생되면 호출될 핸들러를 등록하는 이벤트 입니다.
$("#msg").ajaxError(function(event, request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
AJAX 요청이 실패할 경우 메시지를 보여줍니다.


ajaxSend()
AJAX 요청을 보내기 전에 실행시킬 함수를 정의하는 이벤트 입니다.

$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
AJAX 요청을 보내기 전에 메시지를 보여줍니다.


ajaxStart()

첫번째 AJAX 요청이 시작될 때 호출할 핸들러를 등록하는 이벤트 입니다.

$("#loading").ajaxStart(function(){
$(this).show();
});
AJAX 요청이 시작될 때 loading 메시지를 보여줍니다.


ajaxStop()
모든 AJAX 요청이 완료되면 호출할 핸들러를 등록하는 이벤트 입니다.

$("#loading").ajaxStop(function(){
$(this).hide();
});
모든 요청이 완료되면 loading 메시지를 안보이게 처리합니다.


ajaxSuccess()

Ajax 요청이 성공적으로 완료 때마다 실행될 함수를 작성하는 이벤트 입니다.

$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});

AJAX 요청이 성공하면 메시지를 보여줍니다.

load()
서버로부터 데이터를 받아서 일치하는 요소 안에 HTML을 추가합니다

$('#result').load('ajax/test.html');

성공했다는 요청이 오면(textStatus 에 "success" 나 "notmodified" 같은 데이터가 있으면), load() 함수는 반환된 데이터를 일치되는 요소에 HTML 형식으로 넣어 줍니다.

데이터를 object 형태로 보내는 경우 POST 메서드가 사용되고, 그렇지 않으면 GET이 사용됩니다.

AJAX를 하면서 가장 많이 사용되는 함수가 아닐까 합니다. 특정 요소를 선택하고 그 부분만 업데이트 하고자 할 경우 이 함수를 사용하는데 실시간 전송(우편번호선택, 아이디 유무 체크등)에 아주 유용하게 사용되는 함수입니다.

이 함수만 알아도 AJAX의 50% 이상을 알았다해도 과언이 아닐까 합니다. 꼭 알아두시기 바랍니다.


serialize()

데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩 합니다.

이 함수는 표준 URL인코딩 표기법으로 텍스트 문자열을 만듭니다. 폼 요소 집합(input, textarea, select 등)과 같은 개별 요소들이 이 함수를 사용합니다.


serializeArray()

폼 요소를 names와 values 배열로 인코딩합니다.
이 함수는 JSON 문자열 형태로 JavaScript 배열 객체를 만듭니다. 이 함수는 폼 요소 집합을 표현하는 jQuery 객체를 이용합니다

위의 Reference와 관련된 내용은 모두 http://api.jquery.com 에 있습니다. 기본적인 예제와 내용을 확인할 수 있을텐데요. 모두 영문으로 되어있습니다. 하나하나 꼼꼼하게 해석하고 제가 코딩했던것을 바탕으로 하고 싶었으나 영문에 강하지 못하네요.

어쨋든 Reference 관련 설명부분이니 더 꼼꼼하게 공부하시고 싶은 분들은 위 사이트를 방문하시면 되겠습니다.

'jQuery > jQuery Reference' 카테고리의 다른 글

jQuery 기타 References  (0) 2013.06.07
jQuery AJAX 함수 Reference  (0) 2013.06.05
jQuery HTML / CSS 함수 Reference  (0) 2013.06.04
jQuery Effect 함수들  (0) 2013.05.31
jQuery selector  (0) 2013.05.29
jQuery Examples  (0) 2013.05.28
Posted by 진격의 파파

댓글을 달아 주세요

jQuery AJAX get() 요청 방식과 post()의 요청방식 둘다 사용 가능합니다.

jQuery get() 은 기본적으로 서버로부터 데이터를 가져오는데 사용됩니다.

jQuery post() 은 서버로부터 일부 데이터를 가져옵니다.

 

jQuery get()

$.get(URL,callback); 기본사용 문법

$("button").click(function(){
$.get("test.php",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

// test.php 의 내용을 읽어들입니다.

test.php 의 내용은

---------------------------------------

<?
echo "이 내용은 php 내용입니다.";
?>

---------------------------------------

 

 

jQuery get() 관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("test.php",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});

</script>
</head>
<body>

<button>get() 버튼</button>

</body>
</html>

 

 

// "get() 버튼"을 클릭하면 위 그림처럼 test.php의 내용을 가져옵니다. function(data, status) 의 값은 임의의 변수 입니다. 하지만 founction에 임의의 변수값을 선언하면 가져올때도 같은 변수값을 사용해야 합니다. 만약 값이 틀릴경우 스크립트 오류가 발생합니다.

 

jQuery post()

$.post(URL,data,callback); 기본사용 문법

$("button").click(function(){
$.post("test_post.php",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

// test_post.php 의 내용을 읽어들입니다.

test_post.php 의 내용은

---------------------------------------

<?
$fname = $_POST["name"];
$thank = $_POST["thank"];
echo "이 블로그는 " . $fname . " 입니다.";

echo "많은 방문에 " . $thank . ".";
?>

---------------------------------------

 

 

jQuery post() 관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("test_post.php",
{
name:"Park's의 블로그",
thank:"감사드립니다"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});

</script>
</head>
<body>

<button>post() 버튼</button>

</body>
</html>

 

// 위 그림을 보면 어떻게 데이터가 이동했는지 알 수 있습니다.

일단 소스에서 보시면 name 값에 "Park's의 블로그", thank 값에 "감사드립니다" 의 내용이 들어가 있습니다.

그냥 변수값에 담겨졌다고 생각하면 이해하기 쉬울듯 합니다. 아래 function 구문은 위의 get() 과 동일합니다.

그리고 test_post.php 에서 $_POST["name"], $_POST["thank"] 이렇게 넘어온값을 받아옵니다.

그래서 그 값을 대입한 결과 위 그림처럼 메시지가 나타나게 되는 것입니다.

이제 어느정도 이해가 가나요? get() 방식은 그냥 데이터를 가져오기만 하지만 post() 방식은 데이터를 주고받을 수 있습니다.

실무에서 굉장히 많이 쓰이는 부분입니다. 위 내용은 기본 내용입니다. 응용하다 보면 더 고급 프로그래밍을 제작할 수 있습니다.

 

 

여기까지 jQuery AJAX 였습니다. jQuery 관련 블로그 포스팅을 하면서 저도 다시 공부하는 느낌이네요 ㅎㅎ

이글을 보시는 분들께 많은 도움이 되길 바라며, 모든 프로그래머분들 화이팅 하시기 바랍니다.

'jQuery > jQuery AJAX' 카테고리의 다른 글

jQuery AJAX get(), post()  (0) 2013.05.27
jQuery AJAX load()  (2) 2013.05.27
jQuery AJAX 소개  (0) 2013.05.25
Posted by 진격의 파파

댓글을 달아 주세요

이번장에서는 jQuery AJAX load() 함수에 대해서 알아보겠습니다.

실무에서 요긴하게 써먹는 부분이니 알아두면 도움이 많이 될듯합니다.

jQuery load() 함수는 간단하지만, 강력한 AJAX 방식입니다.

jQuery load() 함수는 전체 웹페이지를 새로고침하지 않고 웹페이지의 일부분만을 업데이트할 수 있습니다.

$(selector).load(URL,data,callback); // 기본 문법

- URL 은 불러들일 페이지의 주소값입니다.

- data 는 쿼리스트링 매개변수값 입니다.

- callback 은 load 함수가 완료된 후 실행되는 함수 입니다.

관련예제를 살펴보기전에 우선 text.txt 화일을 미리 생성해 둡니다.

test.txt 파일의 내용은

---------------------------------------

<h2>jQuery AJAX의 신기한 로딩</h2>
<p id="p1">제대로 로딩이 되었나요?</p>

---------------------------------------

입니다. 이렇게 텍스트 파일을 하나 만들어 놓은후 텍스트 파일의 내용을 불러들이겠습니다.

이전 페이지 jQuery AJAX 소개 부분에서 사용되었던 내용과 동일합니다.

관련예제는 아이디 p1의 내용만을 불러들이는 내용입니다.

관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test.txt #p1");
});
});

</script>
</head>
<body>

<div id="div1"><h2>jQuery AJAX 의 내용을 가져와라.</h2></div>
<button>가져오라</button>

</body>
</html>

 


// 위 그림을 보시면 test.txt 파일에서 아이디 p1 에 해당되는 내용만 가져온것을 알 수 있습니다.

이처럼 load() 함수는 서버상에 있는 데이터를 불러들일수 있습니다. DB의 값을 불러 오는데 유용하게 사용되며, DB의 값과 비교를 하여 참 거짓을 반환할 수 있기 때문에 다른 페이지로의 이동작업 없이 한페이지에서 해결할 수 있다는 장점이 있습니다. 제가 설명한 것은 간단한 작업이지만 그래도 기본적인 내용입니다. 기본적인 내용만 알고있어도 50%는 학습하였다 할수 있습니다. ^^

'jQuery > jQuery AJAX' 카테고리의 다른 글

jQuery AJAX get(), post()  (0) 2013.05.27
jQuery AJAX load()  (2) 2013.05.27
jQuery AJAX 소개  (0) 2013.05.25
Posted by 진격의 파파

댓글을 달아 주세요

  1. 2016.01.08 09:45  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2016.01.08 09:45  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

이번 장에서는 jQuery AJAX의 기능에 관한 소개를 하겠습니다.

 

AJAX는 웹페이지의 일부를 업데이트 할수 있고 서버와 데이터간의 교환을할 수 있는 예술적인 기술입니다. 

 

AJAX는  Asynchronous JavaScript and XML 의 줄임말입니다. 다시 말해서 AJAX는 전체페이지 로딩없이 백그라운드에서 데이터를 로딩할 수 있습니다. 설명이 조금 어려운듯 하여 예를 들어서 추가 설명하겠습니다.

 

☞ 예를들어 A.php 와 B.php가 있다고 가정했을때 A.php에서 B.php에 데이터를 읽어들이고 싶을경우 보통 팝업창을 띄워서 javascript 부모, 자식 기능을 이용하여 그 내용을 읽습니다. 하지만 AJAX는 그러한 작업없이 바로 하나의 페이지에서 두 개 이상의 다른 페이지에 있는 데이터를 읽어드릴 수 있습니다. 주소 팝업을 띄울경우, 아이디 중복검사를 할경우 등 엄청난 다양한 분야에 접목을 시킬 수 있습니다. 한 페이지에서 모두 처리되니 그 속도 또한 매우 빠르겠죠. 이렇듯 AJAX는 실시간에 활용된 기술에 적용시 매우 유용한 스킬입니다.

 

기본 예제를 살펴보며 신기한 AJAX 기능을 알아보겠습니다.

 

AJAX 관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("test.txt");
  });
});

</script>
</head>
<body>

<div id="div1"><h2>jQuery AJAX 의 내용을 가져와라.</h2></div>
<button>가져오라</button>

</body>
</html>

 

text.txt 의 내용은

-------------------------------------

<h2>jQuery AJAX의 신기한 로딩</h2>
<p id="p1">제대로 로딩이 되었나요?</p>

--------------------------------------
입니다. 


 

 


// "가져오라" 의 버튼을 클릭하면 위 그림처럼 내용이 바뀌는 것을 볼수 있는데 이것은 jQuery의 remove() , append() 등 어떤 특정기능을 이용하여 바꾼것이 아닙니다. 이것은 test.txt 의 파일 내용을 불러들인 것입니다. 파일을 읽어들일 경우 load() 함수를 사용하여 불러들입니다. AJAX의 기술을 활용하면 웹페이지의 로딩을 줄일뿐만 아니라 실시간 데이터 전송이 가능하여 익혀두면 매우 유용하게 사용하게 될것입니다.

 

다음장에서는 load() 함수에 대해서 좀더 구체적으로 알아보겠습니다.

'jQuery > jQuery AJAX' 카테고리의 다른 글

jQuery AJAX get(), post()  (0) 2013.05.27
jQuery AJAX load()  (2) 2013.05.27
jQuery AJAX 소개  (0) 2013.05.25
Posted by 진격의 파파

댓글을 달아 주세요