자바 스크립트 내에서 XML 노드 Value값를 가져오는 방법이다.
처음에는 아래와 같이 jQuery를 이용하여 처리하고자 진행하였다.
var xml = '';
$(xml).find("id").each(function () {
   var id = $(this).find("id").text();
});
그러나 XML 노드에 CDATA 타입으로 지정되어 있으면 항상 ''로 리턴되어 사용할 수 없었다.
좀 더 테스트 해보니, Dom Parser 처리 후 조회해보니 값을 제대로 가져온다.ㅎ
var xml = '';

var xmlDoc;
if (window.ActiveXObject) {
    // IE일 경우
    xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
    xmlDoc.async = false;
    xmlDoc.loadXML(xml);
}
else if (window.XMLHttpRequest) {
    //Firefox, Netscape일 경우
    var xmlParser = new DOMParser();
    xmlDoc = xmlParser.parseFromString(xml, 'text/xml');
}
else {
    xmlDoc = null;
}

if (xmlDoc != null) {
    // #1. jQuery 방식 
    $(xmlDoc).find("To").each(function () {
        var id = $(this).find("dn").text();
    });

    // #2. Script 방식
    var nodes = xmlDoc.selectNodes("person/to");
    for (i = 0; i < nodes.length; i++) {
        var id = nodes[i].selectSingleNode("id").text;
    }
}

Example 1: innerHTML

DOM table methods using innerHTML to fill in cells

function addRowInnerHTML(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  newCell0.innerHTML = '';
  var newCell1 = newRow.insertCell(1);
  newCell1.innerHTML = 'cell 1 - just plain text';
}

Example 2: DOM

DOM table methods using DOM to fill in cells

function addRowDOM(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.value = 'cell 0 - text box';
  newInput.style.color = 'blue';
  newCell0.appendChild(newInput);
  var newCell1 = newRow.insertCell(1);
  newCell1.appendChild(document.createTextNode('cell 1 - just plain text'));
}

Example 3: DOM Clone

cloneNode to clone an existing row

function addRowClone(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newNode = tblBody.rows[0].cloneNode(true);
  tblBody.appendChild(newNode);
}

// ----------------------------------
// Map 정의
// ----------------------------------
var Map = function () {
    this._array = new Array(); // Map배열
    this.pointer = 0;

    this._getIndexByKey = function (key) {
        for (var i = 0; i < this._array.length; i++) {
            if (key == this._array[i][0]) {
                return i;
            }
        }
        return -1;
    }

    this.put = function (key, value) {
        var index = this._getIndexByKey(key)

        if (index == -1) {
            var newArray = new Array(); // key와value를 담는 배열
            newArray[0] = key;
            newArray[1] = value;
            this._array[this._array.length] = newArray;
        } else {
            this._array[index][1] = value;
        }
    }

    this.get = function (key) {

        for (var i = 0; i < this._array.length; i++) {
            if (this._array[i][0] == key)
                return this._array[i][1];
        }

    }

    this.isNext = function () {
        var result;
        if (this._array.length > this.pointer) {
            result = true;
        } else {
            result = false;
        }
        this.pointer++;
        return result;
    }

    this.size = function () {
        return this._array.length;
    }

    this.nowKey = function () {
        return this._array[this.pointer - 1][0];
    }
    this.nowValue = function () {
        return this._array[this.pointer - 1][1];
    }
}


 /*==============================================================================
Function : javaScript Map
Return   :
examples :
: get(key), getKey(value), put(key, value), size(), remove(key),
clear(), keys(), values(), containsKey(key), containsValue(value),
isEmpty(), putAll(map), toString(separator)
==============================================================================*/
function Map(Delimitor) {
    this.Delimitor = (Delimitor == null ? "||" : Delimitor);
    this._MapClass = new ActiveXObject("Scripting.Dictionary");

    this.get = function (key) { return this._MapClass.exists(key) ? this._MapClass.item(key) : null; }
    this.getKey = function (value) {
        var keys = this.keys();
        var values = this.values();
        for (var i in values) {
            if (value == values[i]) return keys[i];
        }
        return "";
    }
    this.put = function (key, value) {
        var oldValue = this._MapClass.item(key);
        this._MapClass.item(key) = value;
        return value;
    }
    this.size = function () { return this._MapClass.count; }
    this.remove = function (key) {
        var value = this._MapClass.item(key);
        this._MapClass.remove(key);
        return value;
    }
    this.clear = function () {
        this._MapClass.removeAll();
    }
    this.keys = function () {
        return this._MapClass.keys().toArray();
    }
    this.values = function () {
        return this._MapClass.items().toArray();
    }
    this.containsKey = function (key) {
        return this._MapClass.exists(key);
    }
    this.containsValue = function (value) {
        var values = this.values();
        for (var i in values) {
            if (value == values[i]) {
                return true;
            }
        }
        return false;
    }
    this.isEmpty = function () { return this.size() <= 0; }
    this.putAll = function (map) {
        if (!(map instanceof Map)) {
            throw new Error(0, "Map.putAll(Map) method are required Map type parameter.");
        }
        var keys = map.keys();
        for (var i in keys) {
            this.put(keys[i], map.get(keys[i]));
        }
        return this;
    }

    this.toString = function (separator) {
        var keys = this.keys();
        var result = "";
        separator = separator == null ? "&" : separator;
        for (var i in keys) {
            result += (keys[i] + this.Delimitor + this._MapClass.item(keys[i]));
            if (i < this.size() - 1) {
                result += separator;
            }
        }
        return result;
    }
}


샘플 코드1.
function Set_Comma(n) {
     if (n.indexOf('.') >=0) {
        return Number(  String(  n.split('.')[0]    ).replace(/\..*|[^\d]/g,"")).toLocaleString().slice(0,-3)  + '.' + String(n.split('.')[1]);
     }
     else {
         return Number(String(n).replace(/\..*|[^\d]/g,"")).toLocaleString().slice(0,-3);
     }
}

샘플 코드2.
function addComma(n) {
        var reg = /(^[+-]?\d+)(\d{3})/;
        n += '';

        while (reg.test(n)) {
            n = n.replace(reg, '$1' + ',' + '$2');
        }
    return n;
}


'Web Platform' 카테고리의 다른 글

HTML Table Add Row - innerHTML vs. DOM vs. cloneNode  (1) 2010.08.02
javascript Map 구현  (0) 2010.06.28
jQuery Calendar  (0) 2010.06.28
jQuery ajaxSubmit 간단 예제  (0) 2010.06.28
jQuery에서 체크 박스 전체 선택 or 전제 해제  (0) 2010.06.28


iframe이 로딩될 때 현재 프레임의 스크롤바값을 가져와서 창크기 자동 조절 스크립트입니다.


[샘플 코드]
<script language="javascript">
    function ResizeIframe(frm)
    {
        frm.setExpression('width', ifrmTest.document.body.scrollWidth);
        frm.setExpression('height', ifrmTest.document.body.scrollHeight);
    }
</script>


<body>
    <iframe id="ifrmTest" src="Test.aspx" name="test" marginwidth="0"marginheight="0" topmargin="0" scrolling="no"
             frameborder="0" ALLOWTRANSPARENCY="true" onload="javscript:ResizeIframe(this);">
    </iframe>
</body>

 

기본적으로는 서버와 클라이언트 코드는 서로를 직접적으로 호출 할 수 없다. 서로 실행되는 시간과 위치가 다르기 때문이다.

서버코드 : Requeset를 받았을때 서버에서 실행

클라이언트코드 : Response를 받은 클라이언트 브라우저에서 실행

 

하지만, 이를 가능하게 하는 몇가지 방법이 있고, 매번 기억하기 어려워서 여기에 정리해본다.

뭐 고급유저라면 관련 Tip을 상당히 여러가지 알고 있겠지만, 그래도 모든걸 항상 기억하긴 여러우니까...

<작성: http://blog.naver.com/myfancy>

 

1. ASP.NET AJAX - Web Service 호출

스크립트에서 Web Service 컨테이너에서 노출하고 있는 함수를 AJAX로 호출하는 방법이다. 포스트백이나 페이지 리프레시가 발생하지 않는다. 하지만, 비교적 많은 이해가 필요하고, .asmx로 웹서비스를 별도로 만들어야만 된다.

참고) Client-Side Web Service Call with AJAX Extentions

         http://msdn.microsoft.com/en-us/magazine/cc163499.aspx

        Calling Web Servivce from Client Script

         http://msdn.microsoft.com/en-us/library/bb398995.aspx

         http://msdn.microsoft.com/ko-kr/library/bb398998.aspx

 

2. ASP.NET Ajax Extentions - PageMethod 호출

PageMethod는 기본적으로 Page의 Behind코드에 public static으로 노출하고, JavaScript에서 호출하는 방식이다. PageMethod는 [WebMethod]라고 함수에 꾸며주기만 하면되고, Response에 Inline JavaScript Proxy 코드가 생성된다.

 

[System.Web.Services.WebMethod]
public static string GetContactName(string custid){}
함수는 반드시 public static이여야 한다.
 

<asp:ScriptManager ... EnablePageMethods=”true”/>

이 기법을 사용하기 위해서는 ScriptManager에 EnablePageMethods속성을 true로 설정하면 된다.

 

function CallGetContactName(custid,cbParam)
{    
 // call server side method
 PageMethods.GetContactName(custid,OnSuccess,OnFailed,cbParam);
}
// set the destination textbox value with the ContactName
function OnSuccess(res, cbParam)
{    
 //결과값 : res, 콜백파라미터:cbParam
}
// alert message on some failure
function OnFailed(res, cbParam)
{
 //결과값 : res, 콜백파라미터:cbParam
 alert(res.get_message());
}
스크립트를 별도의 파일로 추가할 경우 <head/>섹션이 아닌 <body>태그 아래 추가해야 한다.

3. jQuery를 이용한 WebService 호출

http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/

 

4. Get, Post를 이용한 방법 (Non Ajax)

ASP.NET의 Page, HttpHandler, HttpModule등을 이용하여 Request를 받아 Response를 주는 인스턴스를 만들어 놓고, 순수 Ajax나, Post등의 기법을 이용하여 처리 할 수 있다.


body 부분에 아래와 같이 선언해주면 된다.

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

 oncontextmenu="return false"   오른쪽마우스버튼막기
 onselectstart="return false"   텍스트 선택막기
 ondragstart="return false"  드래그막기

ASP.NET 에서 우리가 사용한 서버 컨트롤 영역을 클릭 후 ENTER KEY를 누르면

해당 페이지가 다시 로드되는 현상을 많이 봤을 것이다.

 

이 부분은 개발하는 나도 사용하는 사용자도 상당히 신경쓰이고 짜증 나는 일이 아닐 수 없다.

ENTER키를 안먹게 하는 방법이 없을까?

 

그 해결 방법으로 아래와 같은 Javascript 함수로 ENTER 키를 모두 막아 버렸다.

 

function CheckEnter() {

try {

if (!e) var e = window.event;

if (document.all) var key = e.keyCode;

else var key = e.which;

 

if( key == 13 ) {

var tag = e.srcElement ? e.srcElement.tagName : e.target.nodeName ;

var tagId = e.srcElement ? e.srcElement.id : "" ;

 

/*** 1. 원하는 컨트롤 아이디만 등록 ***/

if( tagId == "InputLogin" ) {

CheckLogin();

return false;

}

/*** 2. 원하는 컨트롤만 엔터키 반응 (여기서는 TEXTAREA만) ***/

if( tag == "TEXTAREA") {

return true;

}

return false;

}

}

catch(e) { return true; }

}

document.onkeydown = CheckEnter;

 

여기서 중요한 것은 document.onkeydown = CheckEnter;

함수 내부에 있어서는 안되며 함수 밖에 등록되어 전체 HTML 문서에서의 KEYDOWN 이벤트를 체크 해야 한다.

 

주석 부분의

1. 원하는 컨트롤 아이디만 등록 

웹사이트에서 로그인 부분에서만 ENTER KEY를 사용할 수 있게 하여 로그인체크 함수를 실행 할 수 있게 했다.

 

2. 원하는 컨트롤만 엔터키 반응

이건 사이트 전체의 TEXTAREA에서만 ENTER KEY를 사용할 수 있게 했다.

 

만약 검색 INPUT 에서 ENTER KEY를 사용하려면 검색 INPUT ID를 위의 함수에 추가로 등록하여 사용할 수 있다.

예)

검색 INPUT 박스 <input type="text" id="InputSearch" name="InputSearch" size="20" /> 라면

 

if( tagId == "InputSearch" ) {

CheckSearch();

return false;

}

 

다르게 체크 할 수 있는 방법이 더 있겠지만 일단 -0-;;

/**
 * Copyright (c) 2000 by LG-EDS Systems Inc
 * All rights reserved.
 *
 * 날짜관련 자바스크립트 공통함수
 *
 * 분단위 이하(= 초)는 고려하지 않았습니다.
 * YYYYMMDDHHMI 형식의 String => 'Time'으로 칭함
 *
 * 주로 YYYYMMDD 까지만 쓰인다면 아래 함수들을
 * YYYYMMDD 형식의 String => 'Date'로 하여 적당히
 * 수정하시거나 아니면 함수를, 예를들어 isValidDate()처럼,
 * 추가하시기 바랍니다.
 *
 * @version 2.0, 2001/01/28
 * @author 박종진(JongJin Park), jongjpark@lgeds.lg.co.kr
 */


/**
 * 유효한(존재하는) 월(月)인지 체크
 */
function isValidMonth(mm) {
    var m = parseInt(mm,10);
    return (m >= 1 && m <= 12);
}

/**
 * 유효한(존재하는) 일(日)인지 체크
 */
function isValidDay(yyyy, mm, dd) {
    var m = parseInt(mm,10) - 1;
    var d = parseInt(dd,10);

    var end = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    if ((yyyy % 4 == 0 && yyyy % 100 != 0) || yyyy % 400 == 0) {
        end[1] = 29;
    }

    return (d >= 1 && d <= end[m]);
}

/**
 * 유효한(존재하는) 시(時)인지 체크
 */
function isValidHour(hh) {
    var h = parseInt(hh,10);
    return (h >= 1 && h <= 24);
}

/**
 * 유효한(존재하는) 분(分)인지 체크
 */
function isValidMin(mi) {
    var m = parseInt(mi,10);
    return (m >= 1 && m <= 60);
}

/**
 * Time 형식인지 체크(느슨한 체크)
 */
function isValidTimeFormat(time) {
    return (!isNaN(time) && time.length == 12);
}

/**
 * 유효하는(존재하는) Time 인지 체크

 * ex) var time = form.time.value; //'200102310000'
 *     if (!isValidTime(time)) {
 *         alert("올바른 날짜가 아닙니다.");
 *     }
 */
function isValidTime(time) {
    var year  = time.substring(0,4);
    var month = time.substring(4,6);
    var day   = time.substring(6,8);
    var hour  = time.substring(8,10);
    var min   = time.substring(10,12);

    if (parseInt(year,10) >= 1900  && isValidMonth(month) &&
        isValidDay(year,month,day) && isValidHour(hour)   &&
        isValidMin(min)) {
        return true;
    }
    return false;
}

/**
 * Time 스트링을 자바스크립트 Date 객체로 변환
 * parameter time: Time 형식의 String
 */
function toTimeObject(time) { //parseTime(time)
    var year  = time.substr(0,4);
    var month = time.substr(4,2) - 1; // 1월=0,12월=11
    var day   = time.substr(6,2);
    var hour  = time.substr(8,2);
    var min   = time.substr(10,2);

    return new Date(year,month,day,hour,min);
}

/**
 * 자바스크립트 Date 객체를 Time 스트링으로 변환
 * parameter date: JavaScript Date Object
 */
function toTimeString(date) { //formatTime(date)
    var year  = date.getFullYear();
    var month = date.getMonth() + 1; // 1월=0,12월=11이므로 1 더함
    var day   = date.getDate();
    var hour  = date.getHours();
    var min   = date.getMinutes();

    if (("" + month).length == 1) { month = "0" + month; }
    if (("" + day).length   == 1) { day   = "0" + day;   }
    if (("" + hour).length  == 1) { hour  = "0" + hour;  }
    if (("" + min).length   == 1) { min   = "0" + min;   }

    return ("" + year + month + day + hour + min)
}

/**
 * Time이 현재시각 이후(미래)인지 체크
 */
function isFutureTime(time) {
    return (toTimeObject(time) > new Date());
}

/**
 * Time이 현재시각 이전(과거)인지 체크
 */
function isPastTime(time) {
    return (toTimeObject(time) < new Date());
}

/**
 * 주어진 Time 과 y년 m월 d일 h시 차이나는 Time을 리턴

 * ex) var time = form.time.value; //'20000101000'
 *     alert(shiftTime(time,0,0,-100,0));
 *     => 2000/01/01 00:00 으로부터 100일 전 Time
 */
function shiftTime(time,y,m,d,h) { //moveTime(time,y,m,d,h)
    var date = toTimeObject(time);

    date.setFullYear(date.getFullYear() + y); //y년을 더함
    date.setMonth(date.getMonth() + m);       //m월을 더함
    date.setDate(date.getDate() + d);         //d일을 더함
    date.setHours(date.getHours() + h);       //h시를 더함

    return toTimeString(date);
}

/**
 * 두 Time이 몇 개월 차이나는지 구함

 * time1이 time2보다 크면(미래면) minus(-)
 */
function getMonthInterval(time1,time2) { //measureMonthInterval(time1,time2)
    var date1 = toTimeObject(time1);
    var date2 = toTimeObject(time2);

    var years  = date2.getFullYear() - date1.getFullYear();
    var months = date2.getMonth() - date1.getMonth();
    var days   = date2.getDate() - date1.getDate();

    return (years * 12 + months + (days >= 0 ? 0 : -1) );
}

/**
 * 두 Time이 며칠 차이나는지 구함
 * time1이 time2보다 크면(미래면) minus(-)
 */
function getDayInterval(time1,time2) {
    var date1 = toTimeObject(time1);
    var date2 = toTimeObject(time2);
    var day   = 1000 * 3600 * 24; //24시간

    return parseInt((date2 - date1) / day, 10);
}

/**
 * 두 Time이 몇 시간 차이나는지 구함

 * time1이 time2보다 크면(미래면) minus(-)
 */
function getHourInterval(time1,time2) {
    var date1 = toTimeObject(time1);
    var date2 = toTimeObject(time2);
    var hour  = 1000 * 3600; //1시간

    return parseInt((date2 - date1) / hour, 10);
}

/**
 * 현재 시각을 Time 형식으로 리턴

 */
function getCurrentTime() {
    return toTimeString(new Date());
}

/**
 * 현재 시각과 y년 m월 d일 h시 차이나는 Time을 리턴
 */
function getRelativeTime(y,m,d,h) {
/*
    var date = new Date();

    date.setFullYear(date.getFullYear() + y); //y년을 더함
    date.setMonth(date.getMonth() + m);       //m월을 더함
    date.setDate(date.getDate() + d);         //d일을 더함
    date.setHours(date.getHours() + h);       //h시를 더함

    return toTimeString(date);
*/
    return shiftTime(getCurrentTime(),y,m,d,h);
}

/**
 * 현재 年을 YYYY형식으로 리턴
 */
function getYear() {
/*
    var now = new Date();
    return now.getFullYear();
*/
    return getCurrentTime().substr(0,4);
}

/**
 * 현재 月을 MM형식으로 리턴
 */
function getMonth() {
/*
    var now = new Date();

    var month = now.getMonth() + 1; // 1월=0,12월=11이므로 1 더함
    if (("" + month).length == 1) { month = "0" + month; }

    return month;
*/
    return getCurrentTime().substr(4,2);
}

/**
 * 현재 日을 DD형식으로 리턴

 */
function getDay() {
/*
    var now = new Date();

    var day = now.getDate();
    if (("" + day).length == 1) { day = "0" + day; }

    return day;
*/
    return getCurrentTime().substr(6,2);
}

/**
 * 현재 時를 HH형식으로 리턴
 */
function getHour() {
/*
    var now = new Date();

    var hour = now.getHours();
    if (("" + hour).length == 1) { hour = "0" + hour; }

    return hour;
*/
    return getCurrentTime().substr(8,2);
}

/**
 * 오늘이 무슨 요일이야?

 * ex) alert('오늘은 ' + getDayOfWeek() + '요일입니다.');
 * 특정 날짜의 요일을 구하려면? => 여러분이 직접 만들어 보세요.
 */
function getDayOfWeek() {
    var now = new Date();

    var day = now.getDay(); //일요일=0,월요일=1,...,토요일=6
    var week = new Array('일','월','화','수','목','금','토');

    return week[day];
}

[C# 코드]

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

[WebService(Namespace =
"http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
public Service () {

//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
public string HelloWorld(string strName) {
return "Hello" +strName;
}

}


[Html 코드]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Untitled Page</title>

 <script type="text/javascript">

function sendDataAsXML_SOAP() {

var req_params = "", url = "", number = 0, type = "";

/* Configure Parameters */

url = "http://localhost/TestWebservice/Service.asmx";

user = document.getElementById("Text1").value;

 req_params = "<?xml version=\"1.0\" encoding=\"utf-8\"?><soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"><soap:Body><HelloWorld >";

req_params = req_params + "<strName>" + user + "</strName>";

req_params = req_params + "</HelloWorld></soap:Body></soap:Envelope>";

alert(req_params);

/* Send XML/SOAP Request To Web Service Using Browser's Javascript DOM */

try {

ajax_request = new XMLHttpRequest();

}

catch (trymicrosoft) {

try {

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

}

catch (othermicrosoft) {

try {

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

}

catch (failed) {

ajax_request = false;

}

}

}

ajax_request.open("POST", url, true);

ajax_request.setRequestHeader("Content-Type", "text/xml;charset=utf-8");

ajax_request.onreadystatechange = receiveXML_SOAPData;

ajax_request.send(req_params);

}

function receiveXML_SOAPData() {

if (ajax_request.readyState == 4) {

if (ajax_request.status == 200) {

/* Parse The Response Data */

//result.innerText = ajax_request.responseText;

alert(ajax_request.responseText);

}

}

}

</script>

</head>

<body>

<form action="#">

<input type="text" id="Text1" />

<input type="button" onclick="sendDataAsXML_SOAP();" value="Call WebService" />

</form>

</body>

</html>

+ Recent posts