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&param2=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";

?>

위의 소스를 응용해서 사용하면 된다.