JAVASCRIPT AJAX 사용방법
JAVASCRIPT AJAX 사용방법
jQuery를 사용하면 조금더 간단하지만 자바스크립트로 ajax를 사용하는 방법에 대해서 알아보자.
AJAX 는 "Asynchronous JavaScript And XML" 의 약어이다.
▶ ajax.js ( 공통적으로 사용되는 커스텀 함수 )
function getXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) { return null; }
}
} else {
return null;
}
}
function sendRequest(url, params, callback, method) {
var httpRequest = getXMLHttpRequest();
var httpMethod = method ? method : 'GET';
if (httpMethod != 'GET' && httpMethod != 'POST') {
httpMethod = 'GET';
}
var httpParams = (params == null || params == '') ? null : params;
var httpUrl = url;
if (httpMethod == 'GET' && httpParams != null) {
httpUrl = httpUrl + "?" + httpParams;
}
httpRequest.open(httpMethod, httpUrl, true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.onreadystatechange = callback(httpRequest);
httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}
▶ ajax_test.html
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function ajax_result(httpRequest) {
return function() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) { // 아랫부분은 응용하면 된다.
if(!httpRequest.responseText.match(null)) {
try {
var resultData = httpRequest.responseXML.getElementsByTagName('resultData')[0];
var resultText = resultData.firstChild!=null ? resultData.firstChild.nodeValue : null;
if(resultData.getAttribute('result')=='success') {
var arr = JSON.parse(resultText);
if(arr.ret=='success') {
alert(arr.msg);
}
else {
alert(arr.msg);
}
}
else {
alert(resultText);
}
} catch(e) {
alert(e.message + httpRequest.responseText);
}
}
} else {
alert("Failed : "+httpRequest.status);
}
}
}
}
function action_ajax() {
var url = "ajax_test.php";
var param = 'param1=1¶m2=2';
sendRequest(url, param, ajax_result, 'POST');
return false;
}
</script>
▶ ajax_test.php
<?php
$ret_arr = array();
$ret_arr['ret'] = "success";
$ret_arr['msg'] = "메시지";
header("Content-type: text/xml");
header("Cache-Control: no-cache");
echo "<?xml version='1.0' encoding='utf-8'?>\n";
echo "<resultData result='success'>";
echo json_encode($ret_arr);
echo "</resultData>\n";
?>
위의 소스를 응용해서 사용하면 된다.