닉스로그

지금까지는 AJAX 를 부분적으로만 써왔는데

아예 폼의 데이터를 ajax 로 넘길수 있도록 하면 더 편할꺼 같아서 만들어보았다.

form 의 데이터를 post 형태로 ajax 로 자동으로 넘겨주는 소스이다.

[code]// AJAX POST SEND
var ajaxFormProcessing = false;
var ajaxProcessing = false;
var ajaxXmlHttp = null;
var ajaxForm = null;
function ajaxFormAction(form) {
 if (ajaxFormProcessing) {
  alert("현재 처리중입니다.");
  return;
 }
ajaxForm = form;
 ajaxFormProcessing = true;
 var inputObjs = form.getElementsByTagName("input");
 var param = "";
 for(var i=0;i<inputObjs.length;i++) {
  var inputObj = inputObjs[i];
  if (inputObj.name && inputObj.value) {
   if (inputObj.type == "text" || inputObj.type == "hidden" || inputObj.type == "password") {
    param += inputObj.name + "=" + encodeURIComponent(inputObj.value) + "&";
   }
   else if (inputObj.type == "radio" || inputObj.type == "checkbox") {
    if (inputObj.checked)
     param += inputObj.name + "=" + encodeURIComponent(inputObj.value) + "&";
   }
  }
 }
 
 var selectObjs = form.getElementsByTagName("select");
 for(var i=0;i<selectObjs.length;i++) {
  var selectObj = selectObjs[i];
  if (selectObj.name && selectObj.value) {
   param += selectObj.name + "=" + encodeURIComponent(selectObj.value) + "&";
  }
 }
 
 var textAreaObjs = form.getElementsByTagName("textarea");
 for(var i=0;i<textAreaObjs.length;i++) {
  if (textAreaObjs[i].name && textAreaObjs[i].value) {
   param += textAreaObjs[i].name + "=" + encodeURIComponent(textAreaObjs[i].value) + "&";
  }
 }
 param += "1=1";

 ajaxAction(param);
 return false;
}

function ajaxAction(param) {
 if (ajaxProcessing) {
  alert("현재 처리중입니다.");
  return;
 }
 ajaxProcessing = true;
 ajaxXmlHttp = createXMLHttpRequest();
 ajaxXmlHttp.onreadystatechange = function() {
  if (ajaxXmlHttp.readyState == 4) {
   //alert(ajaxXmlHttp.responseText);
   ajaxParseAction(ajaxXmlHttp.responseXML);
  }
 }
 ajaxXmlHttp.open("POST",ajaxForm.action,true);
 ajaxXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 ajaxXmlHttp.setRequestHeader("Content-length", param.length);
 ajaxXmlHttp.setRequestHeader("Connection", "close");
 ajaxXmlHttp.send(param);
}


function ajaxParseAction(xmlObj) {
// 넘어온 xmlObj 로 결과 처리 해 주면 된다.
}[/code]

위 소스를 스크립트에 집어넣어 놨다면 폼에다가는 아래와같이 해주면 알아서 넘어간다.

[code]<form name="formname" action="index.php" onsubmit="return ajaxFormAction(this)">
 
</form>[/code]

이렇게 해서 넘길수 있는데.

이 방법의 단점은 파일은 못 넘긴다는 것이다.

AJAX 를 구현하려면 XMLHttpRequest 객체부터 생성해야 한다.

XMLHttpRequest 객체는 최초 IE5에서 ActiveX Component 형식으로 먼저 제공되었으며 현재 대부분의 브라우저들이 지원하고 있다. XMLHttpRequest는 W3C의 표준이 아니므로 IE 는 ActiveX 형식으로, 다른 브라우저(FIreFox, Safari, Opera등)은 Native Javascript로 구현되었다.)

AJAX 요소 기술로는 앞서 얘기한 XMLHttpRequest를 필두로 XHTML,CSS,XML,XLST,Javascript,DOM 등이 사용되며, Javascript가 ECMA표준이며 다른 기술은 W3C표준이므로, 모든 브라우저 개발 업체/단체의 합의하에 통용되는 표준으로 자리매김되어 있다.

먼저 AJAX 초기화하려면 아래와같이 두개로 나눠서 해야한다.

위에서 설명한대로 IE 와 타 브라우저가 다르게 지원하기때문에 모두에 맞추려면 아래와같이 나눠서 처리해줘야 한다.

[code]function createXMLHttpRequest() {
var xmlHttp = null;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}

if (xmlHttp == null)
alert("XML 객체를 생성하지 못했습니다.");

return xmlHttp;
}[/code]

이것을 쓰기위해서는 아래와같이 오브젝트의 onreadystatechange 속성 에 이벤트를 걸어서 사용하는방법이 많이 사용된다.

[code]var xmlObj = createXMLHttpRequest();
xmlObj.open("GET","[URL]");
xmlObj.send();
xmlObj.onreadystatechange = function() {
if (xmlObj.readyState == 4) {
    [처리구문...]
}
}[/code]

이렇게 초기화 하고나면 처리를 해야하는데 처리 하기위한 메소드와 속성들을 알아보자.

- Method

- void open(String method,String url, boolean asynch, String username,String password)

: 요청을 초기화한다.

* method - 'POST','GET','PUT' 중 하나를 사용(필수)

* url - 요청 서버의 url (필수)

* asynch - true(default), false 설정(서버 응답까지 대기)

- void send(content)

: 요청을 서버로 보낸다. 비동기시 요청한다음 끝이지만 동기시면 응답 받을때까지 대기한다.

* content - DOM 객체(XML 객체)이거나 input stream,String 값등으로 설정

open() Parameter의 method 값이 'POST'로 설정되어 있으면

HttpRequest body에 포함되어 서버로 전달된다.

GET방식으로 요청하려면 null 을 설정하면 된다.

- void setRequestHeader(string header,String value)

: open() 다음에 위치해서 HttpRequest 헤더에 value를 설정하는 메소드

- void abort() : 요청을 중지한다.

- string getAllResponseHeaders()

: 요청에 대응되는 응답의 헤더정보를 리턴한다.

즉, Content-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.

- string getResponseHeader(string header)

: 응답의 헤더정보중에서 header 에 대응되는 값을 string 형식으로 반환한다.

- Attribute

- onreadystatechange

: 자바스크립트 콜백함수(function pointer) 를 저장한다.

이 함수는 readyState 값이 변할때 마다 호출된다.

- readyState

: 현재 요청의 상태를 의미한다.

상태는 아래와같이 다섯가지가 있다.

- responseText

: 서버의 응답을 string 형식으로 나타낸다.

그냥 단순히 내용을 text 로 돌려준다.

- responseXML

: 서버의 응답을 XML로 나타낸다.

이 속성은 DOM객체로 파싱할 수 있다.

- status

: 서버로부터의 HTTP 상태코드

200 - OK

404 - NOT Found

202 - 결과 값이 없을때

등등...

- statusText

: HTTP 상태코드에 대한 텍스트 값이다.

OK, NOT Found 등등...

자 이제 덤으로 DOM 을 알아보자.

파싱을 하려면 어쩔수없이 써야하는거다.

- Method

- selectSingleNode(xpath)

: 특정 노드를 xpath 를 이용해 검색해서 단일레코드를 돌려준다.

- selectNodes(xpath)

: 특정 노드를 xpath 를 이용해 검색해서 매칭된 레코드들을 돌려준다.

여기서 xpath 란 xml 상의 정규식 이라고 보시면 된다.

- getElementById(id)

: document 에서 특정한 ID 속성값을 가지고있는 요소를 반환한다.

- getElementsByTagName(name)

: 특정한 태그 이름을 가지고있는 자식요소로 구성된 배열을 리턴한다.

- hasChildNodes()

: 자식요소가 있는지 없는지 boolean 을 리턴한다.

- getAttribute(name)

: 해당 요소의 속성값을 리턴한다.

- appendChild(childNode)

: 특정 노드를 현재 엘리먼트의 자식 노드에 추가시킨다.

- setAttribute(name,value)

: 속성값을 지정한다.

- insertBefore(newNode,targetNode)

: newNode targetNode 앞에 삽입한다.

- removeAttribute(name)

: 해당 요소의 name 속성을 제거한다.

- removeChild(childNode)

: 자식 요소를 제거한다.

- replaceChild(newNode, oldNode)

: oldNode 를 newNode 로 치환한다.

- document.createElement(tagName)

: 해당 태그명으로된 요소를 생성한다 (table 를 주면 table 요소가 생성된다.)

- document.createTextNode(text)

: 정적 텍스트를 담고있는 노드를 생성한다.

- Attribute

childNodes : 현재 요소의 자식을 배열로 표현한다.

firstChild : 현재 요소의 첫번째 자식이다.

lastChild : 현재 요소의 마지막 자식이다.

nextSibling : 현재 요소와 바로 다음 요소를 의미한다.

text : 해당 요소의 값을 읽고 쓸 수 있는 속성을 정의한다. (==data,==nodeValue)

parentNode : 해당 요소의 부모노드이다.

previousSibling : 현재 요소와 바로 이전의 요소를 의미한다.