HTTP 준비 상태 * 0: (open()을 호출하기 전에는) 요청이 초기화 되지 않는다.
* 1: (send()를 호출하기 전에는) 요청은 설정은 되지만 보내지지 않는다.
* 2: 요청이 보내지고 처리 중에 있다. (이 시점에서 응답에서 콘텐트 헤더를 얻을 수 있다.)
* 3: 요청이 처리 중에 있다. 부분적인 데이터를 응답에서 사용할 수 있지만 서버는 이 응답으로는 종료되지 않는다.
* 4: 응답이 완료된다. 서버의 응답을 받고 이를 사용한다.
readyState 0 (readyState == 0)으로 표시되는 첫 번째 준비 상태는 초기화 되지 않은 요청을 나타낸다. 요청 객체에 대해 open()을 호출하면 속성은 1로 설정된다. 대부분 요청을 초기화 하면서 open()을 호출하기 때문에 readyState == 0을 보는 일은 드물다. 더욱이 초기화 되지 않은 준비 상태는 실제 애플리케이션에서는 쓸모 없다.
function getSalesData() {
// Create a request object
createRequest();
alert("Ready state is: " + request.readyState);
// Setup (initialize) the request
var url = "/boards/servlet/UpdateBoardSales";
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
open()이 호출되기 전에 준비 상태를 체크
요청 객체가 새로운 요청을 만들기 전에 초기화 되지 않은 상태(readyState == 0)에 있다는 것을 확인
0이 4와 같을 때
다중 JavaScript 함수들이 같은 요청 객체를 사용하는 경우, 그 요청 객체가 사용되고 있지 않다는 것을 확인하기 위해 준비 상태 0을 확인하면 문제가 많아질 수 있다. readyState == 4는 완료된 요청을 나타내기 때문에, 4로 설정된 준비 상태인 채로 사용되지 않은 요청 객체를 종종 보게 된다. abort()이라고 하는 요청 객체를 리셋하는 함수가 있지만 이는 여기에 사용하는 것이 아니다. 다중 함수들을 사용해야 한다면 다중 함수에 객체를 공유하는 것 보다 각 함수용 요청 객체를 생성 및 사용하는 것이 낫다.
브라우저 차이
Firefox 1.5
* 1
* 2
* 3
* 4
Safari 2.0.1
* 2
* 3
* 4
Safari는 첫 번째 준비 상태를 배제하고 그 이유에 대해서는 자세히 나와있지 않다. 바로 이것이 Safari 방식이다. 또한 중요한 포인트이기도 하다. 서버에서 데이터를 사용하기 전에 요청의 준비 상태가 4라는 것을 확인하는 것은 좋은 생각인 반면 일시적인 준비 상태에 의존하는 코드를 작성하는 것은 다른 브라우저 마다 다른 결과를 얻을 수 있는 확실한 방법이다.
Opera 8.5를 사용할 때 상황은 더 악화된다.
* 3
* 4
Internet Explorer
* 1
* 2
* 3
* 4
responseText 준비 상태 2에서 responseText 속성은 정의되지 않는다
준비 상태 3에서, 서버는 responseText 속성에 값을 배치한다
준비 상태 3의 응답은 스크립트 마다, 서버 마다, 브라우저 마다 다르다. 애플리케이션을 디버깅 하는데 매우 유용하다.
모든 문서와 스팩들에서는 준비 상태가 4가 되어야지만 데이터를 안전하게 사용할 수 있다고 나와있다. 나를 믿으라. 준비 상태가 3일 때에도 responseText 속성에서 데이터를 얻을 수 있다. 하지만 여러분의 애플리케이션에서 이것에 의존하는 것은 좋지 않은 생각이다. 준비 상태 3에서 완전한 데이터에 의존하는 코드를 작성하는 것은 데이터가 불완전하다는 증거이다.
준비 상태가 변할 때 마다 폼이나 페이지에 대한 필드를 업데이트 할 수 있다. 예를 들어, 프로그레스 인디케이터의 넓이를 준비 상태 1에 25 퍼센트, 준비 상태 2에 50 퍼센트, 준비 상태 3에 75 퍼센트, 준비 상태 4에 100 퍼센트를 설정한다. 물론 알다시피, 이 방식은 좋기는 하지만, 브라우저에 의존적이다. Opera에서는 첫 번째 두 개의 준비 상태를 결코 얻지 못하고 Safari는 처음 1 상태를 누락시킨다.
HTTP 상태 코드
* 401: Unauthorized
* 403: Forbidden
* 404: Not Found
* 200: Everything is OK
리다이렉션과 재 라우팅
에러에 대해 이야기 하기 전에 Ajax를 사용할 때 걱정하지 않아도 될 부분에 대해 말해두겠다. 바로 리다이렉션이다. HTTP 상태 코드에서, 이것은 300 대의 상태 코드이다.
* 301: Moved permanently
* 302: Found (요청이 또 다른 URL/URI로 리다이렉션 된다.)
* 305: Use Proxy (요청은 프록시를 사용하여 요청 받은 리소스에 액세스 해야 한다.)
Ajax 프로그래머가 리다이렉션에 대해 염려 할 필요가 없는 이유가 두 가지 있다.
* Ajax 애플리케이션들은 특정 서버측 스크립트, 서블릿, 애플리케이션을 위해 작성된다. 그 컴포넌트를 없애거나 다른 곳으로 이동하기 위함이다. 리소스는 변경되었다는 것을 (이미 이동했기 때문에)알고, 요청에서 URL을 변경하고 이러한 종류의 결과를 절대 만나지 않게 된다.
* 보다 관련성 있는 이유가 있다. Ajax 애플리케이션과 요청들은 샌드박스화 되어있다. Ajax 요청을 만드는 웹 페이지를 공급하는 도메인은 그러한 요청에 응답해야 하는 도메인이다. 따라서 ebay.com에서 공급 받은 웹 페이지는 Ajax 스타일의 요청을 amazon.com에서 실행되는 스크립트에 할 수 없다. ibm.com 상의 Ajax 애플리케이션은 netbeans.org에서 실행되는 서블릿으로 요청할 수 없다.
결국, 요청은 보안 에러를 만들지 않고서는 또 따른 서버로 리다이렉션 될 수 없다. 그러한 경우에, 상태 코드를 전혀 얻을 수 없다. 디버그 콘솔에 JavaScript 에러를 갖게 된다. 따라서 많은 상태 코드에 대해 생각하는 동안 리다이렉션 코드 정도는 무시할 수 있는 것이다.
HTTP 상태코드 처리
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML =
response[1].replace(/\n/g, "<br />");
} else if (request.status == 404) {
alert ("Requested URL is not found.");
} else if (request.status == 403) {
alert("Access denied.");
} else
alert("status is " + request.status);
}
}
추가 요청 유형
향상된 에러 핸들링과 정보 수집을 위해 HEAD 요청에 대해 배워야 한다.
function getSalesData() {
createRequest();
var url = "/boards/servlet/UpdateBoardSales";
request.open("HEAD", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
alert(request.getAllResponseHeaders());
}
}
이러한 헤더들을 개별적으로 사용하여 Ajax 애플리케이션에서 추가 정보나 기능을 제공할 수 있다.
유용한 HEAD 요청
HEAD 요청이 유용한 한 가지 부분은 콘텐트 길이나 콘텐트 유형을 검사할 때이다. 요청을 처리하기 위해 많은 양의 데이터를 보낼 것인지, 서버가 HTML, 텍스트, XML 대신 바이너리 데이터를 리턴해야 할지를 결정할 수 있다. (이 세 가지 모두 바이너리 데이터 보다 JavaScript에서 처리하는 것이 더 쉽다.)
이 경우, 적절한 헤더 이름을 사용하고 이를 XMLHttpRequest 객체의 getResponseHeader() 메소드로 보낸다. 따라서 응답의 길이를 알려면 request.getResponseHeader("Content-Length");를 호출한다. 콘텐트 유형을 알려면 request.getResponseHeader("Content-Type");를 사용한다.
많 은 애플리케이션에서 HEAD 요청을 하면 어떤 기능도 추가하지 않고 요청의 속도를 늦출 수 있다. (HEAD 요청을 실행하여 응답에 대한 데이터를 얻고 후속 GET 또는 POST 요청을 통해 응답을 실제로 받는다.) 하지만 스크립트나 서버측 컴포넌트에 대해 확실하지 않은 경우 HEAD 요청으로 기본적인 데이터를 받을 수 있다.
결론
Ajax 와 웹 프로그래머에게 이 글은 다소 어려울 것이다. HEAD 요청을 하는 것의 가치는 무엇인가? JavaScript에서 리다이렉션 상태 코드를 핸들해야 하는 때는 언제인가? 이 모두 좋은 질문이다. 간단한 애플리케이션의 경우, 이 모든 것은 가치가 별로 없다.
하지만 웹이 단순한 애플리케이션만 수용하는 것은 아니다. 사용자는 점점 고급화 되고 고객들도 강력한 에러 리포팅을 원한다. 관리자 역시 애플리케이션이 조금만 느려져도 해고를 당하게 된다.
간단한 애플리케이션을 넘어 XMLHttpRequest에 대한 이해를 높여야 할 때이다.
* 다양한 준비 상태를 이해하고 이들이 브라우저 마다 어떻게 다른지를 이해하면 애플리케이션을 빠르게 디버깅 할 수 있다. 준비 상태에 기반하여 창조적인 기능을 만들고 요청자의 상태에 대해 사용자와 고객에게 보고할 수 있다.
* 상태 코드를 핸들했다면 스크립트 에러, 예기치 못한 응답들, 엣지 케이스들을 다룰 수 있다. 결국, 애플리케이션은 언제나 잘 작동될 것이다.
* 여기에 더하여 HEAD 요청을 만들고, URL의 존재를 검사하고 파일이 언제 수정되었는지를 파악하고 사용자가 유효 페이지를 얻었는지를 확인할 수 있다면 언제나 최신의 정보와 강력한 기능으로 사용자들을 만족시킬 수 있을 것이다.
사실 HEAD 요청은 뭐에 필요한지 잘 모르겠음.
리다이렉션 상태 코드는 핸들하지 않아도 상관없어 보임.
결론에서도 보듯이 핸들하면 좋다...는 정도일려나?
예를 들다보니 위와 같이 되었지만, 위와 같은 것은 없는듯.
TEXT1과 element의 레벨이 같아지므로, 관리불가!? 어느게 TEXT이고 어느게 element인지 알 수 없다. 전부 NODE이므로..
책이나 웹 찾아봐도 MIXED라는 것이, 문자 데이터 또는! 자식 엘리먼트이지, 문자 데이터와 자식 엘리먼트는 아니었음.
위의 경우도 마찬가지로 TEXT2, ATTR은 전부 하나의 노드로 취급한다. 하지만 속성은 그 값을 얻는 방식이 다르다.
parent <- element <- TEXT2
<- ATTR
parent에 ATTR, element가 종속되어 있으나, ATTR 과 element는 동일 레벨이 아니다.
속성값(ATTR)을 얻을 때는 parent.getAttribute("attr");
TEXT1을 얻을 때는 eText = element.getFirstChild() 한 후, eText.getData();
/child::booklist/child::book[attribute::kind="computer"]
루트 노드의 자식 노드인 booklist의 자식 노드인 book 중에서, 속성 kind 값이 "computer"인 book 노드를 찾아라
/child::booklist/child::book[contains(child::title, "전자")]
루트 노드의 자식 노드인 booklist의 자식 노드인 book 중에서, book의 자식인 title 노드의 문자 데이터 값 중에 "전자" 가 포함된 book 노드를 찾아라.
<book>
<title>전자사전</title>
</book>
뭐 이런거...
//book
XML문서 전체에서 book 노드를 찾아라. /booklist/book 은 booklist의 자식 노드인 book을 찾는 것이므로 다르다.
/booklist/book[@kind="computer"]
루트 노드의 자식 노드인 booklist의 자식 노드인 book 중에서, book의 속성 kind의 값이 computer인 book 노드를 찾아라
//book[@kind="computer"]
XML문서 전체에서 속성 kind의 값이 computer인 book 노드를 찾아라
/booklist/book/title[../@kind="computer"]
루트 노드의 자식 노드인 booklist의 자식 노드인 book의 자식 노드인 title 중에서, title의 부모인 book 노드의 속성 kind 값이 computer인 title 노드를 찾아라
XPath 함수 사용
/booklist/book[position()=last()] 또는 /booklist/book[last()]
루트 노드의 자식 노드인 booklist의 자식 노드인 book 중에서, 마지막 위치에 있는 book 노드를 찾아라
/booklist/book[position()=2] 또는 /booklist/book[2]
루트 노드의 자식 노드인 booklist의 자식 노드인 book 중에서, 두번째 위치에 있는 book 노드를 찾아라
count(/booklist/book)
booklist 밑의 book 노드의 총 개수를 얻는다
/booklist/book[starts-with(title, '사')]
booklist 밑의 book 노드 밑의 title 노드의 컨텐츠 내용이 '사'로 시작하는 book 노드를 찾아라
/booklist/book[contains(title, 'XML')]
book 노드 중에서 자식 노드인 title 노드의 컨텐츠 내용에 'XML'이 포함되어 있는 book 노드를 찾아라
/booklist/book[not(contains(title, 'XML'))]
book 노드 중에서 자식 노드인 title 노드의 컨텐츠 내용에 'XML'이 포함되어 있지 않은 book 노드를 찾아라
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest(); // 생성 시도. IE이외의 브라우저라면 생성됨.
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>
생성 로직을 별도의 함수로 만들어서 사용하면(위와 같이 정적 자바스크립트가 아닌), 생성 시 문제 발생에 대한 에러 통지기능을 지연시키므로 대부분의 Ajax 프로그래머들은 위의 방법을 활용하지 않는다.
10/15 필드가 있는 복잡한 형태에 선택상자 등등이 있다고 상상해보자. 사용자가 필드 14에 있는 텍스트를 형식에 나온 대로 기입할 때 몇 가지 Ajax 코드를 전송한다고 하면, 이 시점에서 생성 함수를 실행해 XMLHttpRequest 객체를 생성하려 했지만 실패한다. 그러면 사용자에게 이 애플리케이션을 사용할 수 없다는 것을 경고로 알리게 된다 (많은 경우). 하지만 사용자는 이미 형식 상에서 데이터를 기입하느라 시간을 보냈다. 아마도 상당히 짜증을 내게 되면서 사용자는 결국엔 사이트로 관심을 기울이지 않게될 것이다.
XMLHttpRequest로 요청 전송하기
샌드박스
Ajax는 샌드박스 보안 모델이 포함되어 있다. 그 결과 Ajax 코드(특히 XMLHttpRequest 객체)는 실행 중인 동일한 도메인에만 요청을 생성한다.
서버 URL 설정
우선 결정할 것은 연결할 서버의 URL이다. URL은 Ajax에서만 있는 것은 아니다. 분명URL을 구성하는 방법에 대해 알아야 한다. 하지만 URL은 연결 설정 시 여전히 필수적인 것이다. 대부분의 애플리케이션에서 사용자가 다루는 형식에서 나온 데이터와 정적 데이터 세트를 결합해 URL을 구성한다.
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
escape() 메소드는 정확히 명백한 텍스트로 전송될 수 없는 문자를 변환하는데 사용된다. 예를 들어, 전화번호에서의 임의의 공간은 %20 문자로 바뀌며 이로 인해 URL과 같이 문자를 전송할 수 있게 된다.
요청 열기
XMLHttpRequest 객체 상의 open() 메소드를 사용해 요청을 구성한다.
request-type: 전송 요청 형태. GET/POST가 일반적인 값이고 HEAD 요청도 전송함.
url: 연결된 URL.
asynch: 비동기 요청을 설정할 경우 true값, 동기식 요청인 경우에는 false임. 이 매개변수는 옵션이고 기본값이 true값임.
username: 사용인증을 요구할 경우 사용자이름을 지정한다. 옵션 매개변수고 기본값이 없다
password: 사용인증을 요구할 경우 암호를 지정한다, 옵션 매개변수고 기본값이 없다.
비동기성에 대한 문제
동기식은 다시 말하면 클라이언트는 서버로부터의 응답이 올 때까지 대기한다. 버튼을 누르면 트리거된 요청이 응답되기 전까지는 애플리케이션을 사용할 수 없다.
비동기식 요청은 서버가 응답할 때까지 대기하지 않는다. 요청을 전송한 다음에는 애플리케이션을 계속 실행한다.
요청 전송
send() 메소드는 단 하나의 매개변수인 전송 컨텐트만 있으면 된다. 그 메소드에 대해 너무 깊게 생각하기 이전에 이미 URL 자체를 통해 데이터를 전송했음을 기억하라.
콜백 메소드 지정
비동기 식 XMLHttpRequest의 경우, 자바 메소드(예에 나온 getCustomerInfo())는 서버 상에서 대기하지 않는다. 따라서 서버에 XXMLHttpRequest객체에 의해 전송된 요청에 관한 처리과정을 완료할 경우 서버는 몇 가지 형태의 명령어를 포함해야 한다. 없다면 브라우저는 서버가 요청을 처리했는지 안했는지 어떤 상태인지 알 수 없다. 이런 상황에서 바로 onreadystatechange 속성이 작용한다. 이 속성으로 콜백 메소드를 지정한다. 웹 페이지 자체에서 벌어지는 현상에 관계없이 웹 페이지로 다시 호출할 때 서버에서 개시하기 때문에 콜백이라 부르는 것이다. 예를 들어, 사용자가 의자에 앉아 키보드를 사용하지 않는 동안 콜백 메소드를 호출하기도 한다. 하지만 사용자가 입력하고 마우스를 움직이고, 화면 이동시키고 버튼을 클릭하는 동안에도 콜백 메소드를 호출하기도 한다. 사용자가 하는 업무는 그다지 중요하지 않다. 이런 상황에서 비동시성이 작용한다.
특 히 onreadystatechange 속성이 결정된 코드 위치에 주의를 기울인다. 그 위치는 바로 send()가 호출되기 전의 위치다. 요청을 전송하기 전 onreadystatechange 속성을 설정해야 한다. 그래야만, 서버에서 요청 응답을 종료할 때 onreadystatechange 속성을 탐지하게 된다.
서버 응답 처리
요청을 만들면 사용자는 웹 형식에서 여유롭게 작업하며 (서버에서 요청을 처리하는 동안에는) 서버는 요청 처리과정을 완료한다. 서버는 onreadystatechange 속성에서 나타나며 호출방법을 결정한다.
function updatePage() {
alert("Server is done!");
}
이렇게 하면 간단한 경고가 울리면서 서버가 종료될 때를 알려준다. 하지만 확인을 클릭한 경우에도 경고는 팝업을 연속한다. 브라우저에 ‘따라 웹 형식에서 경고 팝업을 중지할 때까지 경고가 두 번, 세 번, 심지어는 네 번까지 울린다. 그러면 무슨 일이 벌어지고 있는 것인가? 요청/응답 사이클의 중요 구성요소인 HTTP 준비상태에 대해 고려하지 않았다.
function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
}
복잡성을 줄이고 더 강력한 에러 처리기능을 추가하려면 기타 상태코드에 관한 점검기능/두 가지 기능을 추가할지도 모른다.
function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
else if (request.status == 404)
alert("Request URL does not exist");
else
alert("Error: status code is " + request.status);
}
응답 텍스트 읽기 이제 요청을 준비상태를 통해 완전히 처리하고, 서버로 정상적인 확인 응답을 상태 코드를 통해 받았으므로 서버에서 재전송되는 데이터를 최종적으로 처리한다. 이 데이터는 XMLHttpRequest객체의 responseText 속성에 저장된다.
포맷/길이에 의한 responseText 속성의 텍스트 모양에 관한 상세사항은 이 장에서는 논하지 않기로 한다. 이렇게 되면 서버는 이 텍스트를 실지로 임의로 설정한다. 예를 들어, 한 스크립트로 콤마-분리 값 및 파이프-분리 값이 나오고 또 다른 파이프-분리 값은 텍스트의 긴 문자열로 나올 수도 있다. 이런 현상은 서버에 따라 다르게 된다.
이 글에서 사용된 예의 경우, 서버는 파이프 기호로 분리된 고객의 마지막 순서 및 주소가 나오게 된다.
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/\n/g, "<br>");
} else
alert("status is " + request.status);
}
}
XMLHttpRequest 객체의 중요한 속성 중 하나인 responseXML 속성에 대해 언급한다. 이 속성은 서버가 XML과의 응답을 선택한 경우, XML 응답을 포함한다. XML 응답 처리는 평범한 텍스트 처리과정과 상당히 다르며, 문장분석 및 문서 객체 모델(DOM)을 포함한다. 많은 단순 Ajax 애플리케이션의 경우, responseText만 있으면 된다.
Ajax는 근본적으로 자바 스크립트 기술 및 웹 양식 및 서버 간의 XMLHttpRequest 객체를 결합한다. 사용자가 웹 양식을 기입할 때 데이터는 직접 서버 스크립트에 전송되지 않고 자바 스크립트 코드에 전달된다. 대신 자바 스크립트 코드는 양식 데이터를 포착해 Request를 서버에 전송한다. 이 과정이 일어나는 동안, 사용자 스크린 상의 양식은 순식간에 나타나거나 깜빡이거나 사라지거나 정지하지 않는다. 즉 자바 스크립트 코드는 몰래 Request를 전송하며 사용자는 Request가 만들어졌는지도 알지 못한다. 게다가 Request를 비동기적으로 전송하기 때문에 더 좋은 상황이 된다. 이는 자바 스크립트에서 서버 응답을 그냥 대기하지 않는다는 것을 의미한다. 따라서, 사용자는 데이터를 계속 기입하고 화면이동하고 애플리케이션을 사용한다. 그런 다음 서버는 자바 스크립트 코드(웹 양식에 대해 아직도 대기 중임)에 데이터를 다시 전송한다. 자바 스크립트 코드에서는 데이터와의 상호기능을 결정하며 연속적으로 양식 필드를 업데이트 하면서 애플리케이션에 즉각적인 응답을 준다. 결국 사용자는 양식을 제출/재생하는 작업 없이 새로운 데이터를 얻게 된다. 자바 스크립트 코드는 데이터를 얻고 계산도 수행하며 또 다른 Request를 전송하며 이런 모든 과정은 사용자 개입 없이도 된다! 이것이 바로 XMLHttpRequest 객체의 장점이다. XMLHttpRequest 객체는 서버와 같이 커뮤니케이션을 주고받고 사용자는 그 과정에서 벌어지는 과정을 알지 못한다.
일련의 수행 순서
1. 자바 스크립트 코드로 HTML 양식에서 데이터를 꺼내 이를 XMLHttpRequest 객체를 이용해서 서버에 전송
2. 서버에서 연산을 거친 결과값을 역시 XMLHttpRequest 객체를 이용해서 받아옴(XML/JSON 등으로)
3. 받아온 결과값을 필드 값 설정이나 연속적인 이미지 교체작업 등의 업데이트 작업을 수행
위의 모든 건 자바 스크립트에서 가능. 데이타는 DOM 등으로 처리.
XMLHttpRequest 객체 생성
다중 브라우저 방식으로 XMLHttpRequest 객체 생성하기
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
1. 변수 xmlHttp를 생성해 앞으로 생성할 XMLHttpRequest 객체를 참조한다.
2. Microsoft 브라우저에서의 객체를 시도, 생성한다.
* Msxml2.XMLHTTP 객체를 사용해 XMLHttpRequest 객체를 시도, 생성한다.
* 과정이 실패할 경우, Microsoft.XMLHTTP 객체를 사용해 XMLHttpRequest 객체를 시도, 생성한다.
3. xmlHttp가 아직도 설정되지 않은 경우 비-Microsoft 방식으로 XMLHttpRequest 객체를 생성한다.
function callServer() {
// Get the city and state from the web form
// 자바스크립트로 폼에서 데이터를 가져온다
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
// 데이터를 보낼 주소를 설정
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
// 서버로의 connection 열기 - 데이터 넘기는 방식(GET/POST), 주소, 연결방식(true:비동기/false:동기)
// 비동기 연결이기 때문에 사용자는 서버의 응답을 기다리지 않고 다른 작업이 가능
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
// XMLHttpRequest 객체의 상태변경 시마다 호출할 함수. 즉 서버로부터의 응답이 있을 때마다 호출할 함수
xmlHttp.onreadystatechange = updatePage;
// Send the request
// null - request에 추가해 보낼 것이 없다.
xmlHttp.send(null);
}
// xmlHttp.onreadystatechange = updatePage;에서 설정한 상태변경 시마다 호출되는 함수
// 상태가 바뀔 때마다 호출되지만, 상태에 대한 조건문을 이용해서 전부 OK일 경우에만 결과에 대해 처리한다.
function updatePage() {
if (xmlHttp.readyState == 4) { // Loaded
// if(xmlHttp.status == 200) { // OK
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
// }
}
}
Query Explorer에서 DB의 정보를 가져오는 객체들을 만든 다음,
Page Explorer에서 Query Explorer가 관리하는 객체들을 가지고 원하는 형태로 리포트를 작성한다.
그밖의 리포트 생성용 조건은 Prompt Page에서, 특정 조건에 따라 리포트 형태변화 등은 Condition을 이용해서.
ROUND
ROUND는 반올림 함수이다.
형식: ROUND(숫자, 자릿수)
ROUND는 자릿수만 조심하면 된다. 2번째 결과는 8을 반올림하여 그 앞의 9에 1이 더해진것이고 3번째 결과는 9가 반올림된것이다.
CEILING, FLOOR
CEILING은 소수점 첫번째 값을 기준으로 올림을 하고 FLOOR는 소수점 첫번째 값을 기준으로 내림을 한다.
형식: CEILING(숫자) ... FLOOR도 동일
CEILING과 FLOOR는 소수 첫번째값이 5 이상이든 이하든간에 무조건 올림, 내림을 수행한다.
REPLACE
REPLACE함수는 지정한 문자열을 다른 문자열로 바꾸어준다.
형식: REPLACE(문자, 타겟문자, 바꿀문자)
REPLICATE
REPLICATE함수는 문자열을 지정된 횟수만큼 반복한다.
형식: REPLICATE(문자, 횟수)
STUFF
STUFF함수는 문자열에서 특정 시작위치에서 지정된 길이만큼 문자를 바꾸어준다.
형식: STUFF(문자, 시작위치, 길이, 바꿀문자)
SUBSTRING
SUBSTRING은 STUFF와 비슷하지만 문자를 바꾸는 것이 아니라 그 문자를 반환한다.
형식: SUBSTRING(문자, 시작위치, 길이)
PATINDEX, CHARINDEX
PATINDEX와 CHARINDEX는 문자열에서 지정한 패턴이 시작되는 위치를 뽑아준다.
형식: PATINDEX(문자패턴, 문자) - 문자패턴은 Like 사용과 같다.
형식: CHARINDEX(문자패턴, 문자) - 문자패턴은 일반형식을 사용한다.
SPACE
SPACE함수는 지정한 수 만큼 공백을 추가한다.
형식: SPACE(횟수)
시간 및 날짜 함수
GETDATE()
GETDATE()는 현재 시간을 표시해준다.
DATEADD
DATEADD함수는 날자에 지정한 만큼을 더한다.
형식: DATEADD(날자형식, 더할 값, 날자)
DATEDIFF
DATEDIFF함수는 두 날자사이의 날자형식에 지정된 부분을 돌려준다.
형식: DATEDIFF(날자형식, 시작 날자, 끝 날자)
DATENAME
DATENAME함수는 지정한 날자의 날자형식의 이름을 돌려준다.
형식: DATENAME(날자형식, 날자)
DATEPART
DATEPART함수는 날자에서 지정한 날자형식부분만 추출해줍니다.
형식: DATEPART(날자형식, 날자)
주일은 일요일부터 1로 시작해서 토요일날 7로 끝나게 된다.
--*******************************************************************
-- 함수(Conversion)
--*******************************************************************
--cast, convert : 문자로 치환/number와 date를 문자로 치환.
-- /간단한 형 변환(CAST)
-- /날짜를 문자로 변환 시 여러가지 형식이 가능하므로 주로 사용하는 함수는(CONVERT)이다.
select convert(char, 123456789) result1,
cast(123456789 as char) result2
--
select convert(varchar,456789) result1,
cast(456789 as varchar) result2,
str(456789, 10) result3
/* 숫자를 바꾸는 convert함수를 썼는데 2번째줄의 경우는 '300567'이라는 6섯자를
'char(4)' 4자로 바꾸라는 것: 이것은 말이 안되므로 * 표시가 프린트됨!(주의 사항) */
select convert(char(7),300567) result1,
convert(char(4),300567) result2
--
select convert(char,getdate(),0) result1,
cast(getdate() as char) result2
--
select convert(CHAR, GETDATE(), 109) RESULT
select convert(CHAR, GETDATE(), 111) RESUlT
select convert(CHAR(10), GETDATE(), 121) RESULT
select convert(CHAR, GETDATE(), 114) RESULT
--1. 방법1
select mem_id "회원ID",
left(mem_id,1) + right(convert(char(4),right(mem_id,3) + 1010),3) "조합회원ID"
from member
where mem_name = '이쁜이'
--2. 방법2
select mem_id "회원ID",
left(mem_id,1) + right(convert(char(4),substring(mem_id,2,4)+1010),3) "조합회원ID"
from member
where mem_name = '이쁜이'
--***********************************************************************
-- 함수(conversion) : 날짜로 치환
--***********************************************************************
--날짜로 치환/모양만 날짜형인 문자를 DATE로 치환
select'19990101'result1,'1999-01-01'result2,
'1999-01-01 00:00:00.000'result3
--
select convert(datetime,'20201025',112)" result1",
convert(datetime,'20201025')" result2",
convert(datetime,'2020-10-25 10:15:20.000') " result3",
cast('2020-10-25 10:15:20.000' as datetime) " result4"
--
--회원테이블에서 주민등록번호1을 날짜로 치환한 후 검색!
--(Alias는 회원명, 주민등록번호1, 치환날짜)
select mem_name 회원명, mem_regno1 주민등록번호1,
convert(datetime,'19'+mem_regno1) 치환날짜
from member
--1900년대 사람들만 있다고 가정했을 경우 19를 더해서 밀레니엄버그를 없앨 수 가 있다.
--회원테이블에서 주민등록번호1을 날짜로 치환한 후 500일을 더한 날짜를 검색!
--(Alias는 회원명, 주민등록번호1, 치환날짜)
select mem_name 회원명, mem_regno1 주민등록번호1,
convert(datetime,'19'+mem_regno1) + 500 치환날짜
from member
--회원테이블에서 주민등록번호1을 날짜로 치환한 후 '1974-01-01'부터 '1975-12-31'사이의 날짜를 검색!
--(Alias 회원명, 주민등록번호1, 치환날짜)
select mem_name 회원명, mem_regno1 주민등록번호1,
convert(datetime,'19'+mem_regno1) 치환날짜
from member
where convert(datetime,'19'+mem_regno1)between'1974-01-01'and'1975-12-31'
--회원테이블에서 생일을 문자로 치환한 후 LIKE '1975%'의 조건을 사용하여 해당회원을 검색!
--Alias는 회원명, 생일)
select mem_name 회원명, mem_bir 생일
from member
where convert(char, mem_bir, 121) like '1975%'
--******************************************************************
-- 함수(NULL)
--******************************************************************
/* ## 데이터를 처리할 때 NULL값의 사용은 최대한 줄여야 하지만 사용해야 할 경우가 있다.
## 학생에 대한 정보를 입력할 때 '전화번호' 속성은 전화번호가 없는 학생이 있을 수가 있다 .이런 경우에는 NULL값을 사용한다.
## NULL값은 0.1과 같은 특정한 값이 아니고 아무 것도 없는 것을 뜻한다.
## SQL에서 NULL값을 허용하지 않는 속성에 대해 NULL값으로 수정하려 한다면 에러가 발생한다. */
--null값을 찾을 때에는 is null
select buyer_name buyer_charger
from buyer
where buyer_charger is null
--null인 값을 찾을 때 '='은 성립되지 않는다.
select buyer_name buyer_charger
from buyer
where buyer_charger=null
--
select buyer_name buyer_charger
from buyer
where buyer_charger =''
--null값이 아닌 값을 찾으려 할 때 is not null
select buyer_name buyer_charger
from buyer
where buyer_charger is not null
--ISNULL(c,d) / c가 NULL값이면 d값으로 치환
--null값일 때 '이름없다' 로 출력!
select buyer_name, buyer_charger, isnull(buyer_charger, '이름없다')
from buyer
--null에다 100을 더하면 null이다.
select null + 100
--
select isnull(null,0)+100
--
select mem_name, mem_mileage, mem_mileage+100
from member
--
select mem_name, mem_mileage, mem_mileage + 100
from member
where mem_name like '[바-
WHILE @i>=@j
BEGIN
INSERT INTO @temp(date) values(@temp_date)
SET @j=@j +1;
SET @temp_date= DATEADD(dd,@j,@s_date)
END
/*SELECT date FROM @temp*/
INSERT INTO DUAL_CALENDAR
SELECT
DATENAME(yy, date), DATENAME(mm, date),
/*DATENAME(dd, date), */
SUBSTRING(CONVERT(char(10), date,121), 9, 10),
CONVERT(char(10), date,121) AS date
FROM @temp
/*여기까지 한번에 실행할 것. 100년까지는 한번에 안되는듯. 50년은 됨.
50년 마다 한번씩 실행되게 스케줄러에 등록 또는 1년마다 한번씩 되도록 등록*/
다소 쌩뚱맞긴 합니다만... ^^;;
통계작업에 유용하게 사용할 수 있는 달력테이블을 만들어서 사용하기도 합니다.
create table 달력 (년 varchar2(4), 월 varchar2(2), 일 varchar2(2), 년월일 varchar2(8));
요로코롬 말이지요.
말씀하시는바와 같이 화면에 임의의 년에대한 모든 월데이터를 보인다던가.. 할때 유용하게 사용할 수 있지요.
통계화면이 한두개가 아니다보니.. 요로코롬 미리 테이블을 구성한 후 join으로 이용하는것도 꽤 괜찮은 방법입니다.
DBA님이나 사수분께 의논해보심은 어떠시련지요. ^^;;
아니면.. 제 오래된 기억에 mssql 2000의 경우엔 템프테이블을 만들 수 있는 방법이 있었는데요..
요 템프테이블을 달력테이블처럼 구성하여 사용하셔도 될듯 합니다.
그럼 ^^;;
통계 시 실제 데이터가 없는 일/월/연을 0건으로 표시하기 위해서 위와 같은 처리가 필요.
아님
select 1 as month, 0 as cnt
from dual
union all
select 2 as month, 0 as cnt
from dual
union all
select 3 as month, 0 as cnt
from dual
union all
select 4 as month, 0 as cnt
from dual
union all
select 5 as month, 0 as cnt
from dual
....
으로 가라로 뷰를 하나 만든다음에 outer join 하면 되지 않을까요?
mgcos
이건 넘 쿼리가 길어지는 듯....
/*OUTER JOIN 테스트용. 임시로 월간 캘린더 테이블을 만들어서 실제 데이타와 조인. 그런 다음 갯수를 세면 데이터가 없는 월의 것도 카운트 가능해진다 임시 테이블을 만들어서 데이타를 뽑아내긴 하였으나, 검색기간이 동적으로 변하므로 그것에 대한 처리는 어떻게 하는가? 실제 물리적인 테이블에 모든 데이타를 넣어두어 그것을 가지고 해야하지 않나? */ SELECT COUNT(EVT_CODE), MONTHLY FROM ( SELECT R5E.EVT_CODE, /*CASE //이것은 필요없을 듯. MSSQL서 COUNT시 NULL은 자동으로 0으로 인식됨 WHEN R5E.EVT_CODE IS NULL THEN 0 WHEN R5E.EVT_CODE IS NOT NULL THEN 1 END AS CODE_COUNT,*/ CASE WHEN R5E.MON IS NULL THEN TM2.MON WHEN R5E.MON IS NOT NULL THEN R5E.MON END AS MONTHLY FROM ( ( SELECT EVT_CODE, CONVERT(CHAR(7), EVT_DATE, 121) AS MON FROM R5EVENTS WHERE CONVERT(CHAR(7), EVT_DATE, 121) BETWEEN '2008-12' AND '2009-01' ) R5E FULL OUTER JOIN ( SELECT MON, CNT FROM ( SELECT '2009-01' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-02' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-03' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-04' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-05' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-06' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-07' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-08' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-09' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-10' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-11' AS MON, 0 AS CNT FROM DUAL UNION ALL SELECT '2009-12' AS MON, 0 AS CNT FROM DUAL ) TM ) TM2 ON TM2.MON = R5E.MON ) ) A GROUP BY MONTHLY
역시나 jdk설치 디렉\jre\lib\ext에 넣었던 dom4j 관련 라이브러리 삭제 후 실행했더니 에러 발생.
그래서 다음과 같이 해봤더니,
E:\workspace\java_run_test>javac -verbose -d bin -sourcepath src -classpath E:\workspace\java_run_test\Lib src\test\xml\XMLMain.java
E:\workspace\java_run_test\Lib 여기에 dom4j관련 라이브러리가 있는데도 에러가 난다.
왜 그런가 봤더니
"완전하고, 개별적으로 컴파일 된 서드 파티 라이브러리를 사용하지 않는 경우를 가정했다. 만약 그렇다면, 이들을
classpath에도 추가해야 한다. 라이브러리는 junit.jar 또는 icu4j.jar 같은 JAR 파일로 배포된다. 이
경우, classpath에 추가하는 것은, JAR 파일 그 자체이다. 이것을 포함하고 있는 디렉토리가 아니다." - from IBM(위의 링크 참조)
랜다.
서드 파티 라이브러리 사용시엔 jar파일 자체를 추가해야 된단 말인가라고 생각하여
E:\workspace\java_run_test>javac -verbose -d bin -sourcepath src -classpath E:\workspace\java_run_test\Lib\dom4j-1.6.1.jar src\test\xml\XMLMain.java
로 했더니 깔끔하게 컴파일되었다.
음. 나름 이 업계서 먹고 살아왔는데도 기본을 잘 모르는군... 반성 반성...
javac -verbose -d bin(타겟 디렉토리) -sourcepath src(소스 디렉토리) -classpath E:\workspace\java_run_test\Lib\dom4j-1.6.1.jar(컴파일에 필요한 서드 파티 라이브러리의 경우 디렉토리path가 아닌 fie path) src\test\xml\XMLMain.java(실제 컴파일할 자바 소스-main()이 있는 클래스만 해도 연관된 것은 자동으로)
java -classpath
bin;E:\workspace\java_run_test\Lib\dom4j-1.6.1.jar;E:\workspace\java_run_test\Lib\jaxen-1.1-beta-6.jar(실행 시 필요한 서드 파티 라이브러리&컴파일된 class파일이 있는 디렉토리)
test.xml.XMLMain(실행시킬 풀 클래스명)