<form name="bodyForm">
<input type="file" name="fl" style="display:none">
<input type="text" name="fileName"><img src="fileSearch.gif" onclick="document.bodyForm.fl.click()">
</form>
<form name="frm8" method="post" action="someFile.jsp">
<input type="text" name="myCtrl">
</form>
위와 같이 form tag 안에 element가 한개만 있을경우, "myCtrl"에서 enter를 눌렀을때 화면이 refresh가 된다.
이것을 막기 위해 아래와 같이 <input type="text" style="width:0; visibility:hidden;">를 추가해 주면 된다.
<form name="frm8" method="post" action="someFile.jsp">
<input type="text" name="myCtrl">
<input type="text" style="width:0; visibility:hidden;">
</form>
사실 꽁수다...
좋은 자료라서 올림..
Post 방식으로 전송하는 것을 해보려고 하는데요.
이건 Asp&Ajax 에서 빵쓰님이 한번 쓰셨었던 강좌입니다. ㅋㅋ
완전 똑같죠 !
자. 시작해볼까요. 일단,
이렇게 폼을 만들었고요. 밑에 있는 테이블에는 전송이 완료되면 완료된 것을 다시 가져와서 저런 식으로 해줄 겁니다.
일단 우리가 잘 쓰는 request 만드는 함수를 쓰고요.
var request = null;
function createRequest(){
try{
request = new XMLHttpRequest();
} catch(trymicrosoft){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(failed){
request = null;
}
}
}
if(request == null) location.reload();
}
createRequest();
이 함수에 대한 설명은 지난 강좌들에서 설명했으므로 패스 -.
자자 그러면
요청함수와 받는함수를 만들어볼까요?
요청함수는 ajaxPostSend()로 받는함수는 ajaxPostRequest() 로 할 예정입니다.
폼의 html을 보자면
<form>
아이디 : <input type="text" name="userId"><br>
암호 : <input type="password" name="pwd"><br>
이름 : <input type="text" name="userName"><br>
<input type="button" value="전송" onclick="ajaxPostSend()">
</form>
<table border="1" width="300" height="200">
<tr>
<td id="requestResult"></td>
</tr>
</table>
button에 요청함수를 걸어서 전송할 수 있게 했고요.
테이블의 td 안에 id를 주어서 안에 돌려받은 것을 넣을 수 있게 해줍니다.
여기까지는 쉽지요?
요청함수입니다.
function ajaxPostSend(){
var url = "ajax_post.asp";
var postString = "";
postString = "userId=" + encodeURIComponent(document.getElementById("userId").value);
postString += "&pwd=" + encodeURIComponent(document.getElementById("pwd").value);
postString += "&userName=" + encodeURIComponent(document.getElementById("userName").value);
request.open("POST",url,true);
request.onreadystatechange = ajaxPostRequest;
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=euc-kr");
request.send(postString);
}
젤 중요한건. setRequestHeader 입니다.
get 방식은 요청Body가 비어있는 형식이지만 post 방식은 요청Body에 담아서 보냅니다.
그렇기에 지금 보내려는 정보가 어디 있는지 알려줘야 하는거죠.
setRequestHeader를 쓰지 않는다면 서버는 get 방식으로 데이터를 읽으려할 것입니다.
그렇기에 post 방식이라면 삭제해선 안되는 줄입니다.
postString 이라는 곳에 보낼 변수를 담습니다.
하지만, get과 마찬가지로 인코딩을 바꾸거나 escape 해주어야하죠.
제가 쓴 encodeURIComponent 함수는 utf-8 방식으로 인코딩합니다. 그래서 한글이 깨질 수 도 있는거죠.
한글을 생각하신다면 저 부분은 escape로 고쳐주시면 한글이 깨지지 않아요.
send에 우리가 만든 것을 담아서 보내버립니다.
get 방식이라면 요청본문이 null 이기에 null을 보내고
post라면 postString을 보낼것이기에 넣어주는 것이지요.
open함수의 첫번째는 POST로 알려주고 세번째인자의 동기/비동기 여부는 현재 비동기로 준 상태입니다.
제가 생각하기에는 POST로 보내고 디비에 insert를 시키는 작업이라면 동기로 주는 것도 낳을듯 하네요.
(이렇게 된다면 ajax를 쓰는 것보단 따로 페이지를 넘어갔다 오는 것이 효율적이겠지요)
이제는 받는 함수입니다.
function ajaxPostRequest(){
if(request.readyState == 4){
if(request.status == 200){
var strText = request.responseText;
document.getElementById("requestResult").innerHTML = strText;
}
}
}
간단하죠?
그냥 text 형식으로 가져와서 지정된 id의 innerHTML을 고치는 형식입니다.
요청처리 asp 페이지도 간단합니다.
<% Session.CodePage = 949 %>
<%
Response.CharSet = "euc-kr"
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "Expires","0"
response.write "사용자아이디 : " & request("userId") &"<br>"
response.write "사용자비번 : " & request("pwd")&"<br>"
response.write "사용자이름 : " & request("userName")
%>
한글이 깨지지 않도록 여러가지를 셋팅한후. 보낼 정보를 그냥 찍어버리는 거죠.
Post로 보내는 전송은 로그인쪽에서 쓰일 듯 하네요.
아니면 다중 select박스를 구현할때?
get과 post 방식 두가지로 ajax전송하는 법. 강좌를 다썼네요.
아마 이다음 강좌는 json으로 이중셀렉트 하기/post방식으로 file 보내기 둘중 하나가 될꺼 같습니다.
post 방식으로 file 보내기는 빵스님이 해주셨으면 하는 바램이 살-짝 있습니다. ㅎㅎ
index.htm
ajax_post.asp출처 http://webarty.com
AJAX에 대해서 인터넷 검색을 하다 여기저기에 있는 것들을 허락없이 재구성했습니다.ㅜㅜ
활용처는 개발자의 상상력과 응용력에 따라 무한히 확장될 수도 있겠네요.
prototype.js를 이용하여 확장한 것이 바로 아래 것들,
http://script.aculo.us/
http://openrico.org/
여기 나온 예제들도 함 봐보세요. 이런 걸 RIA라고들 하네요.
http://wiki.script.aculo.us/scriptaculous/show/Demos
http://openrico.org/rico/demos.page
몇 년전만 해도 정말 이런거 할려면 삽질에 삽질을 거듭해야 했는데...
세상 너무 좋아졌습니다...ㅜㅜ
AJAX는...
- 동일 도메인 내에서만 가능합니다.(웹 C/S라고들 하던데...)
(만약 서버투서버(자바<->ASP)로 데이터 통신을 하고 싶다면 XML-RPC를 이용해 보세요.
순수 ASP로만 짜여진 것도 존재합니다.)
- XMLHTTPRequest를 이용하여 HTTP로 통신합니다.
: XMLHTTPRequest는 utf-8로 처리합니다.
- AJAX를 이용한 MVC 모델2 패턴 개발 방법이 가능합니다.
- 자바스크립트로 서버측 데이터를 핸들링합니다.
- 자바스크립트로 OOP도 하네요...ㅡㅡ;
아래 샘플은 prototype.js 파일이 있어야 실행가능합니다.
www.prototypejs.org에서 prototype.js 파일을 다운로드 받으세요.^^
아래 샘플 이외에 Ajax.PeriodicalUpdater 함수도 함 사용해보세요.
지정한 초마다 응답 페이지에서 서버쪽 데이터를 끌어옵니다.
물론 페이지 리프레쉬없이요.
이외에도 다른 함수를 보면 여러개의 이벤트를 동시에 실행할 수 있습니다.
api 참조하세요.
http://www.prototypejs.org/api
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script src="lib/prototype/prototype.js" type="text/javascript"></script>
<script language="javascript">
function ajaxRequest(strResponseURL)
{
var httpObj = new Ajax.Request
(
strResponseURL,
{
// 기본값은 비동기식, 동기식으로 작성할려면, api 참조
// method:'post', // post가 기본값이므로 생략 가능
parameters:Form.serialize('frm'),
// form의 요소들을 통째로 응답페이지로 전송
onSuccess:displayJson,
// 성공했을 경우, displayJson 함수 호출
// onSuccess:displayTextHtml // 일반 텍스트나 html 형식을 경우
onFailure:displayError
// 실패했을 경우, displayError 함수 호출
}
);
}
function displayJson(responseHttpObj)
{
var returnData = responseHttpObj.responseText;
// 만약 XML 형태로 데이터를 받아온다면 responseHttpObj.responseXML
returnData = eval("(" + returnData + ")");
switch (returnData.dataType)
{
// 사실 응답 페이지가 utf-8로 저장되었다면 decodeURIComponent를 안써도 상관없지만,
// 그래도 혹시나 하여 사용
case 'one' : $("results").innerHTML = decodeURIComponent(returnData.response);
break;
case 'array' : viewResponse(returnData.response);
break;
default : $("results").innerHTML = decodeURIComponent(returnData);
}
}
function displayTextHtml(responseHttpObj)
{
var returnData = responseHttpObj.responseText;
$("results").innerHTML = decodeURIComponent(returnData);
}
function viewResponse(data)
{
var intLength = data.length;
var strHTML = "";
for(var i=0; i<intLength; i++)
{
strUserID = decodeURIComponent(data[i].userID);
strUserName = decodeURIComponent(data[i].userName);
strHTML += "ID : " + strUserID + '<br>';
strHTML += "이름 : " + strUserName + '<br>';
}
$("results").innerHTML = strHTML;
}
function displayError()
{
$("results").innerHTML = 'AJAX failed';
}
/*
// 2번과 3번은 skip해도 됩니다.
1. AJAX 응답 페이지는 utf-8로 인코딩하여 저장
: 한글 처리를 위해서 반드시 필요
: 여기서는 json.asp, json2.asp, json3.asp을 utf-8 인코딩 형식으로 저장하였음.
2. 응답 페이지에서 단일값을 전송할 경우, displayJson
{
"dataType":"one",
"response":"realsnake"
}
3. 응답 페이지에서 배열로 전송할 경우, displayJson
{
"dataType":"array",
"response":
[
{
"name":"realsnake",
"height":"???"
}
]
}
4. 응답페이지에서 text나 html을 통째로 전송할 경우 : displayTextHtml
*/
</script>
</head>
<body>
<h3>AJAX in prototype.js Example</h3>
<p>
prototype.js를 이용한 AJAX 예제
</p>
<form id="frm">
<!--
<input type="text" id="test" size="10">
form의 요소의 값들을 전송한다면, 받는 페이지에서는 strTest = Request("test")와 같이,
일반적인 get/post 방식으로 받으시면 됩니다.
//-->
<p><input type="button" value=" 확인 " onclick="ajaxRequest('json3.asp');"></p>
</form>
<div id="results">[Results Area]</div>
<!--
위 div 태그 안의 내용은 AJAX로 받아온 데이터로 변경됩니다.
//-->
</body>
</html>
<!-- 이하 파일들은 반드시 utf-8 인코딩 방식으로 저장 //-->
json3.asp
<%
' ---------------------------------
' asp 파일에서 DB 처리를 하고 결과 값을 넘겨도 잘 됩니다.
' 옵션대신 DB 처리결과를 함 넣어보세요.
' 그냥 일반 text만 써도 되고 아래처럼 html 태그를 같이 써도 됩니다.
' 아래 html코드와 텍스트가 그대로 위 div 태그에 페이지 리프레쉬없이 입력됩니다.
%>
<select name id="selectID" style="font-size:12px;">
<option value="1">옵션</option>
</select>
<%
' ---------------------------------
%>
json2.asp
<%
' 아래 예제들은 json(javascript object notation) 형태의 예제입니다.
' -------------------------------------
' 호출하는 페이지의 viewResponse 함수를 볼 것
%>
{
"dataType":"one",
"response":"응답"
}
<%
' -------------------------------------
%>
json.asp
<%
' -------------------------------------
' dataType이니 response니 하는 것들은 나름대로 데이터를 구조화하기 위하여
' 임의적으로 작성하여 사용한 것입니다.
' 호출하는 페이지의 viewResponse 함수를 볼 것
%>
{
"dataType":"array",
"response":
[
{
"userID":"realsnake",
"userName":"누구신지"
}
]
}
<%
' --------------------------------------
%>