웹마스터 팁
스크립트 객체로 AJAX 구현하기
2007.08.20 23:59
개요
정확하게는 AJAJs가 되는 셈입니다.
AJAJs의 정의 : AJAX의 본말 중에서 XML을 Script로 바꿔치기한 것의 약자.
1. Script 객체로 AJAJs를 구현 (AJAX는 XMLHttpRequest로 구현)
2. GET 방식만 가능
본론
스크립트 언어를 받아서 브라우저가 해석하므로 서버에서 데이터의 처리법까지 기술 가능. 최상의 경우 단순 대입코드만으로 단순화. (적용 분야에 따라서 복잡해질 수도 있음)
서버 측 코드
alert("니가 한 말은 <?=$said?>");
클라이언트 측 코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="test">
<script type="text/javascript">
var Obj = document.getElementById("test");
var loc = "test.php";
function say(){
var said = document.getElementById("prompt").value;
var JsObj = document.createElement("script");
JsObj.src = loc + "?said=" + said;
Obj.appendChild(JsObj);
}
</script>
<input type="input" value="말 입력하시오" id="prompt" />
<input type="button" value="말 보내기" onclick="say();" />
</div>
</body>
</html>
예제 테스트 : http://ubiskorea.mireene.com/ajajs.html
뱀발
- 무성의한 예제 죄송, 향후 충실한 예제 업로드 하겠음
정확하게는 AJAJs가 되는 셈입니다.
AJAJs의 정의 : AJAX의 본말 중에서 XML을 Script로 바꿔치기한 것의 약자.
1. Script 객체로 AJAJs를 구현 (AJAX는 XMLHttpRequest로 구현)
2. GET 방식만 가능
본론
스크립트 언어를 받아서 브라우저가 해석하므로 서버에서 데이터의 처리법까지 기술 가능. 최상의 경우 단순 대입코드만으로 단순화. (적용 분야에 따라서 복잡해질 수도 있음)
서버 측 코드
alert("니가 한 말은 <?=$said?>");
클라이언트 측 코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="test">
<script type="text/javascript">
var Obj = document.getElementById("test");
var loc = "test.php";
function say(){
var said = document.getElementById("prompt").value;
var JsObj = document.createElement("script");
JsObj.src = loc + "?said=" + said;
Obj.appendChild(JsObj);
}
</script>
<input type="input" value="말 입력하시오" id="prompt" />
<input type="button" value="말 보내기" onclick="say();" />
</div>
</body>
</html>
예제 테스트 : http://ubiskorea.mireene.com/ajajs.html
뱀발
- 무성의한 예제 죄송, 향후 충실한 예제 업로드 하겠음
댓글 12
-
LArc
2007.08.25 13:07
-
ukisdakimil
2007.09.01 22:32
예제가 부실하네요.
-
Kesarr
2007.09.03 04:34
DOM으로 script 객체를 만들어 활용한 예제군요.
하지만 eval()로 동적으로 스크립트를 실행하는 것과 같은 심각한 XSS 보안 취약점이 있어 아무데나 사용하면 안 될 듯 합니다. -
ukisdakimil
2007.09.03 15:42
제가 그 점을 미처 명시하지 않았군요. 좋은 지적 감사합니다.
덕분에 그 취약점의 관용명까지 알 수 있는 좋은 기회가 되었습니다. -
조영조793
2007.09.07 10:12
부탁인데요... 좀만 더 상세하게 설명해 주세요.. 서버측 페이지에서 자바스크립트 실행하니까 구문오류 라고에러가 납니다.
-
ukisdakimil
2007.09.07 11:54
혹시 "" 나 ; 같은 문자가 들어 있지 않았나요? -
11
2007.09.07 13:37
아... 완전 이해 했습니다. 성공두 했구요 ^^
서버측 코드에 alert("니가 한 말은 <?=$said?>"); 이걸 해야 한다는게
결국 스크립트에 포함한다는 내용이었군요... -
핑크플로이드
2007.09.12 19:36
AJAX [에이잭스] 가 정확한 발음이에용!
^^;; -
ukisdakimil
2007.09.13 16:36
네... ^^ -
정확히
2007.11.20 20:15
발음이 정해져 있는게 아닙니다. 아약스라고 하는데도 있고 에이젝스라고 하는데도 있고 아작스라고 하는데도 있고... AJAX 첨 만든 사람도 발음은 맘대로 해도 된다고 했구요. -
hangoon
2008.03.28 11:18
위에 분들도 많이 지적해 주셨지만 본래 한글이 아닌것을 정확하게 한글 표기할 수는 없습니다.'Ajax'라는 낱말은 제시 제임스 가렛(Jesse James Garrett)이 2005년 2월 18일 쓴 'A New Approach to Web Applications'이라는 에세이에서 'Ajax(Asynchronous JavaScript + XML)'라는 낱말로 이 기술을 소개한 이후 퍼진 것으로 알려졌다. Ajax를 한글로 표기하면 '에이잭스'나 '에작크스' '아약스'에 가깝지만 현재 대부분의 한국 네티즌에게는 '아작스'라는 표기로 친숙해진 상태다.
검색해보면 위에처럼 대부분 아약스나 아작스라고 하지만 본 이름이 영어라면 영어로 AJAX로 표기하는게 정석입니다.
HTML을 뭐라고 표기하나요? 에이티엠엘이라고 표기하나요? 에잇티엠엘이라고 표기하나요?
HTML로 표기하는게 깔끔하고 정확한 전달이 될 수 있다는것을 알아두세요. -
종박이
2007.09.26 14:48
XMLHttpRequest는 현재 이 소스에서는 쓰이지 않은 듯해요ㅠ
지금 이 소스는 웹에 있는 php를 이용해서, 자바스크립트를 생성해서 보여주는 것 같습니다^^;
그래도, 비슷하긴 하지만 흐흐~
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 플레쉬 마우스 오버하면└---┘ 이런식으로 나오는 것 자바스크립트로 제어하기 | Sena㏇ | 2007.02.24 |
| 비밀번호 입력해야 해당 페이지 보이기 [3] | 이명우 | 2007.02.28 |
| Light box 이용하기.. [10] | 이진수 | 2007.03.12 |
| 자바스크립 동영상 플레이어 2 (네이버 발췌) [4] | 이진수 | 2007.03.28 |
| 간단한 검색 창입니다. [3] | sunholic | 2007.03.31 |
| 웬 소리가????(하이퍼링크 효과음) [7] | 김민환 | 2007.04.08 |
| 스크립트 객체로 AJAX 구현하기 [12] | nextini | 2007.08.20 |
| 링크 클릭시 점선 → 링크, 이미지, form 태그 동시 적용 [2] | 펠릭스 | 2007.11.28 |
| 배열 활용하기(초급) | 예뜨락 | 2007.12.03 |
| 프린트소스 인데요.. [1] | 이영훈346 | 2007.12.12 |
간단한 Ajax 메모
[1]
 | 엔시™ | 2007.12.31 |
|
주민등록번호로 성별/나이/연령대 구분
[4]
| 강병기 | 2008.01.09 |
|
Javascript 달력 - 거트 캘린더
[4]
| 강세임 | 2008.01.10 |
| 자신의 홈피에 날씨를 달아보자. [2] | Rising.kr | 2008.01.21 |
| 자신의 홈피에 통합 검색 순위 (검색어, 음악, 영화, 도서)를 달아보자. [1] | Rising.kr | 2008.01.21 |
| 자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. [3] | Rising.kr | 2008.01.21 |
| 동적 테이블 (행추가, 특정행 삭제) | Juny. | 2008.02.20 |
| 동적 INPUT | june44.myid.net/ | 2008.03.31 |
| 프레임홈일때 부분프레임 무단링크 방지하기 [3] | gosoo99 | 2008.04.08 |
| 웹페이지에 마우스 따라다니는 예쁜 시계를 넣자 [5] | gosoo99 | 2008.04.08 |
아작스가 이런거였나요 -ㅁ-;