AJAX에 대해 기본적으로 알고 싶다면
http://wiki.javajigi.net/pages/viewpage.action?pageId=3919 << 여기가서 한번 보시길 바랍니다.
바로 소스로 들어가 보겠습니다.
HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<script language="JavaScript" src="ajax02.js">
</script>
<script language="JavaScript">
/*
브라우저에 상관없이 HttpRequest를 생성했다.
GET방식으로 test.xml를 호출했다.
XMLHttpRequest는 UTF-8 문자셋을 이용하여 전송한다.
이를 XMLHttpRequest에서 변경하지 못하기 때문에 전송해 주는 쪽에서 처리해야 한다.
*/
function btn2_click()
{
sendRequest("./test.xml",null,handleReq,"GET");
}
window.onload = function()
{
var btn1 = document.getElementById("btnTemp1");
var btn2 = document.getElementById("btnTemp2");
btn2.onclick = btn2_click;
}
var firstTime = true;
function handleReq()
{
if( request == null )
return;
if( request.readyState == 4 ){
if( request.status == 200 ){
var txt = request.responseText;
toDebug( txt );
}
else if( request.status == 404 ){
toDebug("요청한 파일이 존재하지 않습니다.");
}
else if( request.status == 500 ){
toDebug("요청한 파일을 처리하면서 에러가 발생했습니다.");
}
firstTime = true;
}
else if( request.readyState == 1 ||
request.readyState == 2 ||
request.readyState == 3 )
{
if( firstTime ){
toDebug( "데이터 전송중입니다." );
firstTime = false;
}
}
}
</script>
<body>
<input type="button" value="click" id="btnTemp">
<input type="button" value="click" id="btnTemp2">
<div id="debug"></div>
</body>
</html>
JS (ajax02.js)
스크립트가 길어서 계쏙 공통으로 쓸 스크립트는 js로 걸어 둔것입니다.
html 한곳에 다넣어도 상관은 없습니다.
var firstDebug = true;
function toDebug( l )
{
var tmp = document.getElementById("debug");
if( firstDebug )
{
tmp.innerHTML = l;
firstDebug = false;
}
else
{
tmp.innerHTML = tmp.innerHTML + "<br>" + l;
}
}
var request = null;
function sendRequest(url,param,callback, imethod)
{
request = getXMLHttpRequest();
request.onreadystatechange = callback;
request.open( imethod, url, true );
request.send( param );
}
function getXMLHttpRequest()
{
if(window.ActiveXObject)
{
try
{
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
return null;
}
}
}
else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else
{
return null;
}
}
XML
<?xml version="1.0" encoding="utf-8" ?>
<lists>
<name>XML</name>
<name1>AJAX</name1>
</lists>
이정도로해서 실행을 시켜서 버튼을 눌러보면 xml에 있는 값이 불러 오게 됩니다.
asp,jsp,php를 이용해서 xml이나 db에 있는값을 받아와서 이용하면
멋진 ajax를 만들수 있을겁니다.^^
'개발 > AJAX' 카테고리의 다른 글
| ajax 변수 담기 (0) | 2018.02.20 |
|---|
쭈니후니
개발자로서 공부와 낚시를 좋아하는 한사람으로서의 추억을 담을 블로그입니다.
