ajax로 검색한 결과 :: 시소커뮤니티[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

회원가입 I 비밀번호 찾기


SSISO Community검색
SSISO Community메뉴
[카페목록보기]
[블로그등록하기]  
[블로그리스트]  
SSISO Community카페
블로그 카테고리
정치 경제
문화 칼럼
비디오게임 스포츠
핫이슈 TV
포토 온라인게임
PC게임 에뮬게임
라이프 사람들
유머 만화애니
방송 1
1 1
1 1
1 1
1 1
1

ajax로 검색한 결과
등록일:2008-03-18 17:24:15
작성자:
제목:Ajax와 XML: HTML 폼에 Ajax 사용하기 (한글)


ajax를 사용하여 입력 폼을 생성하는 법

developerWorks
문서 옵션

JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다.

수평출력으로 설정

이 페이지 출력

이 페이지를 이메일로 보내기

이 페이지를 이메일로 보내기

토론

샘플 코드

영어원문

영어원문


제안 및 의견
피드백

난이도 : 중급

Jack Herrington, 소프트웨어 엔지니어, Code Generation Network

2008 년 3 월 04 일

HTML 폼에 ajax(비동기식 JavaScript™ + XML) 콜백을 인수로 서버에 넘기는 방식은 응용 프로그램에 웹 2.0 기능을 추가하는 실용적인 방법입니다. 여기서는 ajax 코드를 추가하여 PHP 응용 프로그램의 사용 편의성을 높이는 다양한 기법을 소개합니다.

흔히 웹 2.0 응용 프로그램이라고 하면 가장 주목 받는 프로그램을 떠올린다. 유튜브(YouTube) 비디오, 구글 맵(Google Maps)의 탐색 지도, 플리커(Flickr)의 위치 추적 기능 등이 좋은 예다. 그러나 ajax 기술의 인기와 더불어 크게 탈바꿈한 HTML 폼은 이런 사이트에서 자주 간과되는 부분이다.

이 기사에서는 ajax 코드를 폼 인수로 넘길 때 흔히 발생하는 문제를 Prototype.js라는 자바스크립트 라이브러리를 이용하여 해결하는 방법을 소개한다.

간단한 ajax 폼 제출하기

진짜 간단한 코드부터 살펴보자. 입력 필드가 여럿인 등록 폼을 기존 방식이 아니라 ajax로 제출하는 코드다. Listing 1은 이러한 코드를 보여준다.


Listing 1. index.html
                
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<form id="myform">
<table>
<tr><td>First</td><td><input type="text" name="first"></td></tr>
<tr><td>Last</td><td><input type="text" name="last"></td></tr>
<tr><td>Email</td><td><input type="text" name="email"></td></tr>
</table>
<input type="button" onclick="dosubmit()" value="Submit">
</form>
<div id="result" style="padding:5px;">
</div>
<script>
function dosubmit( ) {
new ajax.Updater( 'result', 'add.php', { method: 'post',
parameters: $('myform').serialize() } );
$('myform').reset();
}
</script>
</body>
</html>

코드 상단에서 prototype.js 자바스크립트 파일을 포함했다. 여기서는 이 자바스크립트 파일 하나면 충분하다. 다음에는 전형적인 HTML 폼이 나온다. 필드는 first, last, email, 이렇게 세 개다. 다음으로 폼을 제출하는 버튼이 있다. 이 버튼은 dosubmit()이라는 자바스크립트 함수를 호출한다.

dosubmit() 함수는 ajax.Updater 클래스를 사용하여 add.php 스크립트에 데이터를 전달한다. 그런 다음 호출 옵션을 추가하는데, 여기서는 제출 방법을 post로 설정하고 폼의 serialize() 메서드로 폼 변수를 추가한다. serialize() 메서드는 표준 자바스크립트 코드가 아니다. 자바스크립트 라이브러리에서 제공하는 메서드다.

ajax.Updater 호출에서 첫 번째 인수는 add.php가 받을 <div> 태그 ID이다. 이는 버튼을 클릭한 사용자에게 처리 결과를 알려주는 가장 쉬운 방법이다.

add.php 스크립트는 Listing 2와 같다.


Listing 2. add.php
                
Thanks <?php echo( $_POST['first'] ) ?> <?php echo( $_POST['last'] ) ?>!

위 스크립트는 사용자가 폼에 입력한 정보를 그대로 다시 돌려준다. 실제 사이트에서는 데이터를 데이터베이스에 추가하는 등 다양한 작업을 수행하겠지만 구체적인 비즈니스 논리 구현은 각자에게 맡긴다.

Listing 1을 브라우저로 읽으면 그림 1과 같은 페이지가 뜬다.


그림 1. 간단한 ajax
간단한 <font style='background-color: rgb(51, 51, 51);' color='#ffff00' size='4'>ajax</font> 폼

여기서 정보를 입력한 후 Submit 버튼을 클릭하면, 폼 데이터가 add.php로 전달된다. add.php가 반환하는 HTML은 그림 2와 같이 Submit 버튼 바로 아래에 표시된다.


그림 2. Submit을 클릭한 결과
Submit을 클릭한 결과

다음으로 폼 자동 채우기 예제를 살펴보자. 사용자가 입력한 키 값에 따라 다른 필드 값을 갱신하는 코드다. 예를 들어, 사용자가 ID를 입력한 후 버튼을 클릭하면 나머지 필드에 현재 사용자 정보가 표시된다.

Listing 3은 이런 코드를 보여준다.


Listing 3. index.html
                
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<form id="myform">
<table>
<tr><td>ID</td><td><input
type="text" name="id"></td></tr>
<tr><td>First</td><td><input type="text"
name="first" id="elFirst"></td></tr>
<tr><td>Last</td><td><input type="text"
name="last" id="elLast"></td></tr>
<tr><td>Email</td><td><input type="text"
name="email" id="elEmail"></td></tr>
</table>
<input type="button" onclick="dofill()" value="Fill Fields">
</form>
<script>
function dofill( ) {
new ajax.Updater( 'result', 'getdata.php',
{ method: 'post', parameters: $('myform').serialize(),
onSuccess: function( transport ) {
$('elFirst').value = transport.responseXML.getElementsByTagName('first')
[0].firstChild.nodeValue;
$('elLast').value = transport.responseXML.getElementsByTagName('last')
[0].firstChild.nodeValue;
$('elEmail').value = transport.responseXML.getElementsByTagName('email')
[0].firstChild.nodeValue;
} } );
}
</script>
</body>
</html>

Listing 1에서 소개했던 폼에 ID라는 필드를 추가했다. 사용자가 ID를 입력하는 필드다. 버튼을 클릭하면 dofill() 함수가 getdata.php 페이지를 호출하고, getdata.php 스크립트는 주어진 사용자 ID에 해당하는 성, 이름, 전자편지 주소를 XML 형식으로 반환한다.

ajax.Updater로 넘긴 onSuccess 핸들러는 모든 브라우저가 지원하는 내장 DOM(Document Object Model) 함수를 사용하여 XML 데이터에서 정보를 추출한다. 그런 다음, XML에서 추출한 값을 elFirst, elLast, elEmail <input> 필드 값으로 설정한다.

Listing 4는 getdata.php 스크립트다.


Listing 4. getdata.php
                
<?php
header( "content-type: text/xml" );

$first = ' ';
$last = ' ';
$email = ' ';

if ( $_POST['id'] == '1' )
{
$first = 'Jack';
$last = 'Herrington';
$email = 'jherr@pobox.com';
}
?>
<data>
<first><?php echo( $first ) ?></first>
<last><?php echo( $last ) ?></last>
<email><?php echo( $email ) ?></email>
</data>

getdata.php는 단순한 스텁 코드로, 일반적으로는 데이터베이스를 조회하여 성, 이름, 전자편지 주소를 가져온다.

Listing 3을 브라우저로 읽으면 그림 3과 같은 페이지가 뜬다.


그림 3. 채우기 폼
채우기 폼

ID 필드에 1을 입력한 후 Fill Fields 버튼을 클릭하면 getdata.php가 반환하는 성, 이름, 전자편지 주소가 해당 필드에 채워진다. 결과는 그림 4와 같다.


그림 4. ID를 입력 받아 자동으로 채워진 필드
ID를 입력 받아 자동으로 채워진 필드

다음으로 소개할 ajax 기교는 즉석에서 갱신되는 할 일 목록(to-do list)이다.




위로


즉석에서 갱신되는 목록

루 비 온 레일스(Ruby on Rails)에서 자주 시연하는 데모 예제 중 하나가 즉석에서 갱신되는 할 일 목록이다. 페이지 상단에는 할 일 목록이 표시되고 하단에는 텍스트 상자가 있다. 사용자가 텍스트 상자에 무언가를 입력한 후 Submit 버튼을 클릭하면 페이지가 변하지 않으면서 상단 목록에 새 항목이 추가된다. 물론 텍스트 상자는 새 값을 쉽게 입력하도록 초기화된다.

실은 아주 어려운 기교라서 PHP를 써서 실력을 과시하기로 맘먹었다. 코드는 Listing 5와 같다.


Listing 5. index.php
                
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>

<div id="result" style="padding:5px;">
<?php
$fh = fopen( 'list.txt', 'r' );
while( $str = fgets( $fh ) ) {
?>
<?php echo( $str ); ?><br/>
<?php
}
?>
</div>

<form id="myform">
<input type="text" name="todo">
</form>

<input type="button" onclick="dosubmit()" value="Submit">

<script>
function dosubmit( ) {
new ajax.Updater( 'result', 'add.php',
{ method: 'post', parameters: $('myform').serialize() } );
$('myform').reset();
}
</script>

</body>
</html>

할 일 목록을 데이터베이스에 저장하지 않고 list.txt라는 파일에 한 줄 당 한 항목씩 저장했다. 따라서 페이지 상단에 목록을 표시하려면, ID가 result<div> 태그 안에서 파일을 열고 한 행씩 읽어들이면 된다.

목록 아래는 새 항목을 입력 받는 텍스트 상자가 온다. 텍스트 상자 아래는 dosubmit() 자바스크립트 함수를 호출하는 버튼이 있다. dosumit() 함수는 ajax.Updater 클래스를 사용하여 add.php를 호출하고, add.php는 할 일 목록에 새 항목을 추가한 후 갱신된 할 일 목록을 반환한다.

Listing 6은 add.php 스크립트다.


Listing 6. add.php
                
<?php
$total = '';

$fh = fopen( 'list.txt', 'r' );
while( $str = fgets( $fh ) ) {
?>
<?php echo( $str ); ?><br/>
<?php
$total .= $str;
}

if ( array_key_exists( 'todo', $_POST ) )
{
?>
<?php echo( $_POST['todo'] ); ?><br/>
<?php
$fh = fopen( 'list.txt', 'w' );
fwrite( $fh, $total."\n".$_POST['todo'] );
fclose( $fh );
}
?>

내 할 일 목록은 Listing 7과 같다.


Listing 7. list.txt
                
Get swim goggles
Practice swimming
Swim in race

Listing 5를 브라우저로 읽으면 그림 5와 같은 페이지가 뜬다.


그림 5. 할 일 목록을 추가하기 전
할 일 목록을 추가하기 전

텍스트 상자에 Finish in record time을 입력한 후 Submit을 클릭한다. 그러면 페이지가 갱신되지 않으면서 그림 6과 같은 결과를 얻는다.


그림 6. 할 일 목록을 추가한 후
할 일 목록을 추가한 후

몰 론 레일스로 시연하는 할 일 목록 예제에는 멋진 기능이 훨씬 더 많지만, 위 예제도 웹 2.0을 돋보이게 만드는 요소 중 하나다. 아직 레일스를 써보지 않았다면 강력히 추천한다. 프로젝트에서 레일스를 사용하지 않더라도, 응용 프로그램 구성 방식, MVC(Model-View-Controller) 메커니즘을 사용하는 방식, 데이터베이스 저장 모델(database persistent model)을 쉽게 생성하는 방법 등은 눈여겨 볼만하다.

웹에서 또 하나 자주 필요한 기능은 필드 목록을 늘이는 기능이다. 나는 이것을 동적 확장 리스트라 부른다.




위로


동적 확장 리스트

레 코드에 사용자가 입력하는 키워드 수를 제한하지 않으려면 어떻게 해야 할까? 간단하게는 쉼표로 키워드를 분리하는 방법이 있다. 또 다른 방법은 동작 중에 새 키워드 필드를 추가하는 버튼이다. 그러면 사용자가 원하는 수만큼 키워드를 입력할 수 있다. Listing 8은 두 번째 방법을 보여준다.


Listing 8. index.html
                
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<form id="myform">
<table id="keytable">
<tr><td>Keyword</td><td><input type="text"
name="keyword_1"></td></tr>
</table>
</form>

<input type="button" onclick="addkeyword()" value="Add Keyword">
<input type="button" onclick="dosubmit()" value="Submit">

<div id="result" style="padding:5px;">
</div>

<script>
var nextkeyid = 2;
function addkeyword()
{
var elTR = $('keytable').insertRow( -1 );

var elTitleTD = elTR.insertCell( -1 );
elTitleTD.appendChild( document.createTextNode( 'Keyword' ) );

var elInput = document.createElement( 'input' );
elInput.type = 'text';
elInput.name = 'keyword_'+nextkeyid;
nextkeyid++;

var elInputTD = elTR.insertCell( -1 );
elInputTD.appendChild( elInput );
}
function dosubmit( ) {
new ajax.Updater( 'result', 'add.php',
{ method: 'post', parameters: $('myform').serialize() } );
}
</script>
</body>
</html>

여기서 주의 깊게 살펴볼 코드는 addkeyword() 함수다. 이 함수는 insertRowinsertCell을 사용하여 키워드 테이블에 새 행을 생성한다. 그런 다음, document.createElement를 사용하여 새 입력 필드를 생성한다. 사용자가 Submit을 클릭하면 ajax.Updater 코드는 add.php 스크립트를 호출한다. add.php는 폼이 넘긴 키워드 목록을 그대로 다시 반환하는 스크립트다. Listing 9는 add.php 코드를 보여준다.


Listing 9. add.php
                
Post Result:<br/>
<?php var_export( $_POST ) ?>

이 페이지를 브라우저로 읽으면 그림 7과 같은 페이지가 뜬다.


그림 7. 키워드가 하나인 폼
키워드가 하나인 폼

Add Keyword를 몇 번 클릭하여 새 필드를 추가한 후 Submit을 클릭한다. 결과는 그림 8과 같다.


그림 8. 키워드를 추가하고 폼을 제출한 결과
키워드를 추가하고 폼을 제출한 결과

사용자가 키워드, 전화번호, 주소 등 여러 값으로 레코드를 추가할 경우에 유용한 예제다. 또 하나 ajax를 자주 사용하는 경우는 로그인 폼이다.




위로


로그인 폼

ajax 로 구현한 로그인 폼은 특히 멋지다. 즉석에서 로그인을 수행하고 로그인 여부를 확인할 수 있기 때문이다. 예를 들어, 사용자가 기사를 읽다가 의견을 추가하고 싶은데 로그인 상태가 아니라고 가정하자. 이 때 ajax를 사용하면 기사 페이지에 그대로 있으면서 로그인을 수행할 수 있다. 로그인 정보가 올바르면 새 폼이 표시되고 여기에 의견을 추가하면 된다. 사용자가 읽던 기사를 기억하고 있다가 로그인 후에 해당 페이지로 이동하는 방법보다 훨씬 간단하다.

Listing 10ajax로 짠 간단한 로그인 기능이다.


Listing 10. index.html
                
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<form id="logform">
User: <input type="text" name="user"><br/>
Password: <input type="password" name="password"><br/>
<input type="button" onclick="login()" value="Login">
</form>
<div id="noway" style="display:none;">
No way!
</div>
<script>
function login() {
new ajax.Request( 'login.php',
{
method: 'post',
postBody: $('logform').serialize(),
onSuccess: function( transport ) {
if( transport.responseText.match( /\<ok\/\>/ ) )
window.location = 'home.html';
else
$('noway').style.display='block';
}
} );
}
</script>
</body>
</html>

페이지 상단에는 User 필드와 Password 필드가 있다. 바로 아래는 ID가 noway<div> 태그가 있는데, 이 태그는 로그인에 실패할 때 표시된다. login() 자바스크립트 함수는 ajax.Request 클래스를 사용하여 로그인을 시도한다. login.php가 반환하는 XML이 <ok />이면 폼은 사용자를 홈 페이지로 이동시킨다. 그렇지 않으면 noway라는 텍스트가 표시된다.

Listing 11은 login.php 코드다.


Listing 11. login.php
                
<?php
header( 'Content-type: text/xml' );
if ( $_POST['user'] == 'jack' && $_POST['password'] == 'password' )
echo( "<ok/>" );
else
echo( "<bad/>" );
?>

위 코드는 사용자가 입력한 계정/암호가 코드에 내장된 계정/암호와 일치하는지 확인한다. 일치하면 ok를, 아니면 bad를 반환한다.

예제를 실행하려면 홈 페이지 코드가 필요하다. Listing 12는 home.html 코드다.


Listing 12. home.html
                
<html>
<body>
You are logged in and this is your home page.
</body>
</html>

Listing 10을 브라우저로 읽은 후 잘못된 사용자 이름과 암호를 입력하고 Login을 클릭한다. 결과는 그림 9와 같다.


그림 9. 잘못된 암호를 입력한 결과
잘못된 암호를 입력한 결과

이번에는 올바른 사용자 이름과 암호를 입력한 후 Login을 클릭한다. 그러면 그림 10과 같이 홈 페이지로 이동한다.


그림 10. 올바른 사용자 이름과 암호를 입력한 결과
올바른 사용자 이름과 암호를 입력한 결과

마지막 예제로 XForm에 ajax를 사용하는 방법을 살펴보겠다.




위로


XForm ajax

XForm 전문가는 아니지만 나는 XForm이 멋진 표준이라고 생각한다. 다음 예제에서 클라이언트측 XForm에 Prototype.js와 ajax 기법을 접목했다.

Listing 13은 간단한 XForm 예제다.


Listing 13. index.xhtml
                
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>XForms ajax Example</title>
<xforms:model id="modelData">
<xforms:instance xmlns="">
<Data>
<First>First</First>
<Last>Last</Last>
<Email>email@email.com</Email>
</Data>
</xforms:instance>
</xforms:model>
<script src="prototype.js"></script>
</head>
<body>
<xforms:input ref="/Data/First">
<xforms:label>First: </xforms:label>
</xforms:input><br/>
<xforms:input ref="/Data/Last">
<xforms:label>Last: </xforms:label>
</xforms:input><br/>
<xforms:input ref="/Data/Email">
<xforms:label>Email: </xforms:label>
</xforms:input><br/><br/>

<button onclick="submit()">Submit</button>
<script>
function submit()
{
var m = $('modelData');
var base = m.getElementsByTagName('Data')[0];
var s = new XMLSerializer();
var data = ( s.serializeToString( base ) ).toString();
new ajax.Updater( 'result', 'params.php',
{ method: 'post', parameters: 'data='+escape( data ) } );
}
</script>

<br/><br/>
<div id="result">
</div>

</body></html>

코드 상단에는 XForm의 XML 모델이 있다. 다음으로 폼 자체에 해당하는 XForm label과 input이 나온다. Submit 버튼은 submit() 자바스크립트 함수를 호출한다. 이 함수는 XMLSerializer 자바스크립트 개체를 사용하여 XForm 데이터 모델을 XML 문자열로 변환한 후 params.php로 넘긴다. params.php 스크립트는 페이지에 출력되는 결과를 볼 수 있도록 XML을 HTML로 반환한다. Listing 14는 params.php 코드다.


Listing 14. params.php
                
<?php
echo( htmlentities( $_POST['data'] ) );
?>

(XForm 컴포넌트를 추가한) 브라우저에서 XForm 페이지를 읽으면 그림 11과 같은 페이지가 표시된다.


그림 11. ajax를 사용하는 XForm 페이지
<font style='background-color: rgb(51, 51, 51);' color='#ffff00' size='4'>ajax</font>를 사용하는 XForm 페이지

폼을 채운 후 Submit을 클릭하면 그림 12와 같은 결과가 표시된다.


그림 12. Submit을 클릭한 결과
Submit을 클릭한 결과

위 그림은 데이터 모델을 XML 문자열로 변환한 후 params.php로 보냈다가 result <div> 태그로 반환 받은 결과다.




위로


결론

소셜 북마크

mar.gar.in mar.gar.in
digg Digg
del.icio.us del.icio.us
Slashdot Slashdot

HTML 폼에서 ajax를 활용하는 방법은 너무나 다양하며 이 기사는 빙산의 일각에 불과하다. 그러나 여기서 소개하는 예제를 통해 기본적인 개념을 이해하리라 믿는다. 또한 예제가 실용적이니 만큼 기존 페이지 코드를 크게 변경하지 않고도 현재 사이트에 ajax를 시도해 보기에 무리가 없으리라 생각한다.





위로


다운로드 하십시오

설명이름크기다운로드 방식
폼 응용 프로그램 코드x-ajaxxml9-forms.zip101KBHTTP
다운로드 방식에 대한 정보


참고자료

교육

토론


필자소개


Jack D. Herrington은 20년 경력의 소프트웨어 엔지니어이다. Code Generation in Action, Podcasting Hacks, PHP Hacks(출간 예정)의 저자이기도 하다. 30개 이상의 기술자료도 집필했다. (jack_d_herrington@codegeneration.net)