티스토리 뷰
에휴...뭐라 드릴말씀이 없을정도로 바쁘네요....
여기 주인장도 맨날 옆에서 일하느라 죽어나고....저도 요즘 눈코뜰새없이 바쁘고....
일이 좋아라 한다고는 하지만......ㅠ.ㅠ 가끔은 울고 싶을정도의 일이 몰려드는...흑흑.....
ㅡㅡ;죄송합니다..갑작스럽게 푸념을...ㅎㅎㅎ
좀힘들더라도...제가 해본내용은 올려보지요~~^^물론 회사에서 써먹었던거구요...^^
우선 기본적인 폼부터 알아보죠..뭐...대부분 이글을 읽고 계신정도면...ASP의 기본은 아실꺼라..굳게 믿기때문에
ASP에 관한 자세한 내용은 안올리겠습니다....물론 ASP부분은 정말(무쟈게..)가벼운정도로만 씁니다...ㅋㅋ(다 초보잖아요..나도 그렇고..^^)
또...잡소리가..ㅡㅡ;
우선 기본적인 폼을 놓습니다.
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<title>Post테스트</title>
</head>
<body>
<h3>정보입력</h3>
<form action="javascript:void%200" onsubmit="sendData();return false">
<table border="1">
<tr>
<td>이름적고</td>
<td><input type="text" name="name" size="20" ></td>
</tr>
<tr>
<td>성별적고</td>
<td><input type="text" name="sex" size="20"></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="phone" size="20"></td>
</tr>
<tr>
<td colspan="2"><button type="submit">전송</button></td>
</tr>
</table>
</form>
</body>
</html>
설마......여기 html에서 이해가 안간다고 말씀주시면......ㅡㅡ;
아...form에 action을 저렇게 준 이유를 잘 모르실수도 있겠네요..^^
저렇게 준이유는..
폼 전송이 일어날 때 자바 스크립트 함수가 호출돼야 하는데 그럴려면 폼의 action이 실행되지 않아야하므로....
저렇게 준거구요...그럼 왜!!앞의 javascript는 쓴건 알겠는데 void%200은 뭐야!!이렇게 화를 내실지 모르시는 분들을 위해..
그부분은 void(빈칸)0 ==> (빈칸) = %20이라 이거죠!! 이해되셨습니까??ㅋㅋ 뭐 딱 정의 내리면!!폼을 적돼!!실행하지마라!!이거죠
혹....다른 문의가 있으시다면...저한테 메일을 주시거나..카페주인장한테 메일주시길..자세히 알려줄껍니다..ㅋㅋ
위처럼 적으신다면..아래 그림처럼 나오겠지요??당근히!!
var queryString;
setQueryString();
var url = "http://localhost/test.asp";
httpRequest("post",url,true);
}
queryString = "";
var frm = document.forms[0];
var numberElements = frm.elements.length - 1;
for(var i = 0; i < numberElements; i++){
if(i < numberElements-1){
queryString += frm.elements[i].name + "=" + encodeURIComponent(frm.elements[i].value) + "&";
}else{
queryString += frm.elements[i].name + "=" + encodeURIComponent(frm.elements[i].value);
}
}
}
try{
request = new XMLHttpRequest();
}catch(trymicrosoft){
try{
request = new ActiveXObject("Msxm12.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request = null;
}
}
}
alert("객체가 생성되지 않았습니다.");
}else{
initReq(reqType,url,asynch);
}
}
request.onreadystatechange = handleResponse;
request.open(reqType,url,isAsynch);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=euc-kr");
request.send(queryString);
}
if(request.readyState == 4){
if (request.status == 200){
alert(request.responseText);
}else{
alert("상태코드 확인!!");
}
}
}
흠...적어놓긴 했지만...역시나 복잡한!!!!ㅋㅋ
var queryString;
setQueryString();
var url = "http://localhost/test.asp";
httpRequest("post",url,true);
}
queryString = "";
var frm = document.forms[0];
var numberElements = frm.elements.length;
for(var i = 0; i < numberElements; i++){
if(i < numberElements-1){
queryString += frm.elements[i].name + "=" + encodeURIComponent(frm.elements[i].value) + "&";
}else{
queryString += frm.elements[i].name + "=" + encodeURIComponent(frm.elements[i].value);
}
}
}
httpRequest("post",url,true);
try{
request = new XMLHttpRequest();
}catch(trymicrosoft){
try{
request = new ActiveXObject("Msxm12.XMLHTTP");
}catch(othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request = null;
}
}
}
alert("객체가 생성되지 않았습니다.");
}else{
initReq(reqType,url,asynch);
}
}
request.onreadystatechange = handleResponse;
request.open(reqType,url,isAsynch);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=euc-kr");
request.send(queryString);
}
이부분으로 넘어와서는 젤 중요한게 여기에서 많이 써있네요...^^
초심자쪽에서 보셨겠지만..onreadystatechange...이부분은 서버가 자료를 받아온 다음에 뭘해야할지를 가리켜주는겁니다...
당연 handleResponse를 다시 호출하라고 적혀있네요..(참고로..()는 안쓰셔야 해요..ㅋㅋ쓰면 바로 스크립트 에러남..ㅡㅡ;)
자 그다음에 초심자쪽에서 배운게 또나오네요..계속 나오네~~좋아~~ㅋㅋ
중요한 open을 해주는것이죠~~오~~좋아....ㅋㅋ세가지 항목...아까 해주었던..post,서버url,true 이 세가지를 가지고!!open을 시켜주는 겁니다....
자 그밑에거는 처음 보셨을텐데요...흠...이놈이 바로..헤더 설정을 하는 놈입니다..
헤더 설정은 GET방식이 아닌 POST방식으로 보낼경우 요청을 위해 Content-Type헤더를 설정하는겁니다....
GET방식에서는 send할때 null로 해주지만 이놈은 값을 넘겨야 하기때문에 헤더를 적고 가지고 있던 queryString을 send해주는거죠..
자..이제 거의 끝나가는데요~~
서버쪽의 주소를 보면..
<%
Response.CharSet = "euc-kr"
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "Expires","0"
sex = Trim(Request("sex"))
phone = Trim(Request("phone"))
%>
아주 간단하지 않습니까??제가 처음에 말씀드린것처럼...^^
단지 Request받은 값을 Write해주는것 뿐이죠~~^^움홧홧....
위에 코드페이지하고 charset/addheader은 asp를 아신다면...이해하실듯 한데 자세한건 나중에 적도록 하고.....
우선 저건 기본적으로 적어주시고 그밑에는 받은값을 다시 write해서 찍어주는것 뿐입니다....하지만...이값은...javascript의 alert창으로 보여줄꺼란거....^^
자 js의 마지막 부분....입니다...
if(request.readyState == 4){
alert(request.status);
if (request.status == 200){
alert(request.responseText);
}else{
alert("상태코드 확인!!");
}
}
}
'프로그래밍 > Ajax' 카테고리의 다른 글
| 웹사이트 접근의 새로운 혁명 Ajax (0) | 2008.06.23 |
|---|---|
| [Ajax] Ajax 마스터하기 (0) | 2008.06.22 |
| [Ajax] Ajax로 실시간 업데이트 페이지 만들때 캐싱 문제 (0) | 2008.06.22 |
| [Ajax] Ajax 와 Struts를 이용한 ProgressBar 구현 (0) | 2008.06.22 |
| [Ajax] refresh 시키기(자동리프래쉬) with php (0) | 2008.06.22 |
- Total
- Today
- Yesterday