AJAX 예제(4) (JAVASCRIPT 내용)

function createRequest() {

try {

request = new XMLHttpRequest();

} catch (tryMS) {

try {

request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (otherMS) {

try {

request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (failed) {

request = null;

}

}

}

return request;

}

 

이 부분은 인터넷익스플로우 브라우저에서 객체를 구하는 내용입니다.

function tester() {

request = createRequest();

if (request == null)

alert("Unable to create request");

else {

var url = "test.leaf";

request.onreadystatechange = showTable;

request.open("GET", url, true);

request.send(null);

}

}

이 부분은 test.jsp 에서 호출하는 함수입니다.

request.onreadystatechange = showTable; 

 =  웹써버로부터 응답이 도착하면 특정한 자바스크립트 함수 호출(콜백함수)

 = showTable라는 함수를 호출한다.

request.open("GET", url, true); = 이부분은 첫장에 설명했지만

(첫번째인자 방식) get방식, post방식

(두번째인자 방식) url 주소입니다.

(세번째인자 방식) 동기/비동기 방식 선언

request.send(null);  =  

post방식으로 데이터를 전달하고 싶을때는 request.send(id=andn%pw=1234)이런식으로 보내면 됩니다. 

function showTable() {

if (request.readyState == 4) {

if (request.status == 200) {

var xml_content = request.responseXML;

var root_Node = xml_content.getElementsByTagName("Member");

var child_Node_id = xml_content.getElementsByTagName("id");

var child_Node_pass = xml_content.getElementsByTagName("pass");

var result_content = "";

for ( var i = 0; i < root_Node.length; i++) {

id = child_Node_id[i].childNodes[0].nodeValue;

pass = child_Node_pass[i].childNodes[0].nodeValue;

result_content = result_content + id + " : " + pass

+ "<br/>";

}

document.getElementById("content").innerHTML = result_content;

}

}

}

콜백함수 showTable 입니다. 

앞에서 tester()함수를 부르면  

request.onreadystatechange = showTable;    이 구문.. 이 이함수를 실행시킵니다.

request.readyState == 4 

이부분은  = 서버의 응답결과가 온것이므로 알맞게 처리한다는 의미입니다.

(request.status == 200)  요청을 성공했다는 의미

request.responseXML == 요청한 결과값을 XML로 받는다.

 

var root_Node = xml_content.getElementsByTagName("Member");

var child_Node_id = xml_content.getElementsByTagName("id");

var child_Node_pass = xml_content.getElementsByTagName("pass");

var result_content = "";

for ( var i = 0; i < root_Node.length; i++) {

id = child_Node_id[i].childNodes[0].nodeValue;

pass = child_Node_pass[i].childNodes[0].nodeValue;

result_content = result_content + id + " : " + pass

+ "<br/>";

}

위에 이 부분은 루트엘리먼트 자식엘리먼트를 구해서 뿌린다는 의미이다

document.getElementById("content").innerHTML = result_content; 

= 구한값을 content에 담는것입니다. 즉 <div id ="content">  여기에서 content에 담는다는 의미입니다.