Ruru's PlayGround :)

잠시 참고용으로 분석한 내용;


var POST="POST";
var GET="GET";
if(!g_fModuleLoaded)var g_fModuleLoaded={};
if(!g_fModuleLoaded[".\\dom/ajaxrequest.js".toLowerCase()])(function(){
 Type.createNamespace("Owa.Dom");
 var fChecked=false;
 var fUseNative=true;
 var rgRequests=[];
 Owa.Dom.AjaxRequest = function Owa$Dom$AjaxRequest(sUrl,sCmd,oCtx,cb,fSync,fNeverDispose){
  var oXHR;
  if(fChecked){
   oXHR=fUseNative ? new XMLHttpRequest() : new ActiveXObject("MSXML2.xmlhttp")
  }
  else
  {
   try
   {
    oXHR=new XMLHttpRequest();
    fUseNative=true
   }
   catch(e)
   {
    oXHR=new ActiveXObject("MSXML2.xmlhttp");
    fUseNative=false
   }
   fChecked=true
  }
  this.oXmlHttp=oXHR;
  this.oXmlHttp.open(sCmd,sUrl,!fSync);
  this.sUrl=sUrl;
  this.oCtx=oCtx;
  this.fSync=fSync;
  this.fLock=false;
  this._fNeverDispose=!!fNeverDispose;
  this.iIndex=rgRequests.length;
  rgRequests.push(this);
  if(cb){
   this.cb=cb;
   if(!fSync){
    this.oXmlHttp.onreadystatechange=new Function("Owa.Dom.AjaxRequest._cbOnReadyStateChange("+this.iIndex+");")
   }
  }
  Owa.Dom.AjaxRequest.get_OnRequestCreated().dispatch(this)
 };
 Owa.Dom.AjaxRequest.prototype.send=function Owa$Dom$AjaxRequest$send(sBody){
  if(isDf(typeof(sBody))){
   this.oXmlHttp.send(sBody)
  }
  else{
   this.oXmlHttp.send(null)
  }
  if(this.fSync){
   return this.onComplete()
  }
  else{
   return null
  }
 };
 Owa.Dom.AjaxRequest.prototype.setRequestHeader=function Owa$Dom$AjaxRequest$setRequestHeader(sHeaderName,sHeaderValue){
  this.oXmlHttp.setRequestHeader(sHeaderName,sHeaderValue)
 };
 Owa.Dom.AjaxRequest.prototype.cancelCallback=function Owa$Dom$AjaxRequest$cancelCallback(){
  if(this.fLock)throw"cannot cancel the callback when it is already finished or cancelled";
  this.fLock=true;
  rgRequests[this.iIndex].oXmlHttp.abort();
  delete rgRequests[this.iIndex]
 };
 Owa.Dom.AjaxRequest.prototype.onComplete=function Owa$Dom$AjaxRequest$onComplete(){
  if(!this.fLock)
  {
   this.fLock=true;
   Owa.Dom.AjaxRequest.get_OnResponseReceived().dispatch(this);
   var oCallbackResult=null;
   if(this.cb!=null)oCallbackResult=this.cb(this);
   delete rgRequests[this.iIndex];
   Owa.Dom.AjaxRequest.get_OnCallbackCompleted().dispatch(this);
   return oCallbackResult
  }
 };
 Owa.Dom.AjaxRequest._cbOnReadyStateChange=function Owa$Dom$AjaxRequest$_cbOnReadyStateChange(i){
  var oRequest=rgRequests[i];
  if(oRequest&&4==oRequest.oXmlHttp.readyState){
   if(0==oRequest.oXmlHttp.status&&(Owa.Utility.isFirefox()||Owa.Utility.isSafari())){
    oRequest.cancelCallback()
   }
   else{
    oRequest.onComplete()
   }
  }
 };
 Owa.Dom.AjaxRequest.disposeAjaxRequests=function Owa$Dom$AjaxRequest$disposeAjaxRequests(){
  for(var i=0;i<rgRequests.length;i++){
   if(rgRequests[i]){
    var oR=rgRequests[i];
    if(oR._fNeverDispose)continue;
    Owa.Dom.AjaxRequest.abortAnXMLHttpRequest(oR.oXmlHttp);
    rgRequests[i]=null
   }
  }
 };
 Owa.Dom.AjaxRequest.abortAjaxRequests=function Owa$Dom$AjaxRequest$abortAjaxRequests(sNs,oCmd){
  var oR=null;
  for(var i=0;i<rgRequests.length;i++){
   oR=rgRequests[i];
   if(oR&&oR.oCtx&&isDf(typeof(oR.oCtx.sNs))&&(oR.oCtx.sNs==sNs)&&isDf(typeof(oR.oCtx.sEv))&&isDf(typeof(oCmd[oR.oCtx.sEv]))){
    if(oR.fLock) continue;
    oR.fLock=true;
    Owa.Dom.AjaxRequest.abortAnXMLHttpRequest(oR.oXmlHttp);
    rgRequests[i]=null
   }
  }
 };
 Owa.Dom.AjaxRequest.abortAnXMLHttpRequest=function Owa$Dom$AjaxRequest$abortAnXMLHttpRequest(oX){
  if(isDf(typeof(oX))&&oX&&isDf(typeof(oX.abort))){
   try{
    oX.onreadystatechange=function(){};
    oX.abort()
   }
   catch(e){}
  }
 };
 var ON_REQUEST_CREATED="onRequestCreated";
 var ON_RESPONSE_RECEIVED="onResponseReceived";
 var ON_CALLBACK_COMPLETED="onCallbackCompleted";
 var _oStaticEvents={};
 _oStaticEvents[ON_REQUEST_CREATED]=new Owa.Utility.EventHandlerCollection();
 _oStaticEvents[ON_RESPONSE_RECEIVED]=new Owa.Utility.EventHandlerCollection();
 _oStaticEvents[ON_CALLBACK_COMPLETED]=new Owa.Utility.EventHandlerCollection();
 Owa.Dom.AjaxRequest.get_OnRequestCreated=function Owa$Dom$AjaxRequest$get_OnRequestCreated(){
  return _oStaticEvents[ON_REQUEST_CREATED]
 };
 Owa.Dom.AjaxRequest.get_OnResponseReceived=function Owa$Dom$AjaxRequest$get_OnResponseReceived(){
  return _oStaticEvents[ON_RESPONSE_RECEIVED]
 };
 Owa.Dom.AjaxRequest.get_OnCallbackCompleted=function Owa$Dom$AjaxRequest$get_OnCallbackCompleted(){
  return _oStaticEvents[ON_CALLBACK_COMPLETED]
 }
})();
g_fModuleLoaded[".\\dom/ajaxrequest.js".toLowerCase()]=1;

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

 

 &ndash; 이곳에 (http://www.mari.kr/tag/UpdateProgress) UpdatePanel과 같이 사용하는 UpdateProgress 컨트롤에 대한 설명이 정말 잘 되 있더군요.

 

아래 코드는 위 사이트에서 가져온 내용인데

정말 잘 분석해두셨네요 ㅎㅎ

 

나중에도 잘 쓸 코드 같습니다.

 

 

<asp:UpdateProgress ID="listViewUpdateProgress" AssociatedUpdatePanelID="listViewUpdatePanel" runat="server" DisplayAfter="50">
    <ProgressTemplate>
    <style type="text/css">

        #UpdateProgressTable {
            position:absolute;
            z-index:100;
            top:0px;
            margin:0px;
            left:0px;
            background-color:#FAFAFA;
            border-width:0px;
            border-style:None;
            font-family:"돋움";
            filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=0, Strength=0)alpha(Opacity=60);
        }

    </style>
    <script type="text/javascript">
        function UpdateProgressInit() {
            var progress = $get("UpdateProgressTable");
            if (typeof (progress) == "object") {
                progress.style.width = getClientBounds().width;
                progress.style.height = getClientBounds().height;
            }
        }

        function CancelAsyncPostBack() {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm.get_isInAsyncPostBack()) {
                prm.abortPostBack();
            }
        }

        function getClientBounds() {
            var clientWidth;
            var clientHeight;

            switch (Sys.Browser.agent) {
                case Sys.Browser.InternetExplorer:
                    clientWidth = document.documentElement.clientWidth;
                    clientHeight = document.documentElement.clientHeight;
                    break;
                case Sys.Browser.Safari:
                    clientWidth = window.innerWidth;
                    clientHeight = window.innerHeight;
                    break;
                case Sys.Browser.Opera:
                    clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
                    clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
                    break;
                default: // Sys.Browser.Firefox, etc.
                    clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
                    clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
                    break;
            }
            returnnewSys.UI.Bounds(0, 0, clientWidth, clientHeight);
        }
    </script>

    <table align="left" id="UpdateProgressTable">
        <tr>
            <td align="center">
                <br/>페이지 변경 중 입니다...
                <br/>
                <input id="Button2" type="button" value="취소" onclick="CancelAsyncPostBack()" />
            </td>
        </tr>
    </table>
    </ProgressTemplate>
</asp:UpdateProgress>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

http://www.beginningjavascript.com/book.php

얼마전에 댓글로 문의하신 분이 있는데..

정말 잘 정리된 내용이 있었군요.


아쉽지만 영문이라 문제지만,

그래도 참 좋은 내용의 사이트인 것은 확실합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

자바스크립트를 사용하면서 함수, 메소드, DOM관련 메소드, XHR관련메소드, 이벤트, 정규표현식 등

한번 사용해 봤지만 다음에 사용하다보면 잘 기억나지 않는 경우가 많이 있다.

아래와 같이 JavaScript에 관련된 잘 정리된 목록을 인쇄해 두면 Javascript를 이용할 때 유용하고 빠르게 찾을 수 있지 않을지 생각한다.

• PNG, 93KB
• PDF, 95KB

http://www.ilovejackdaniels.com/cheat-sheets/javascript-cheat-sheet/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

서핑 중 기본적인 Ajax 패턴을 상당히 간결하게 짜 놓았길래 담습니다.

XHR을 생성해서 반환하는 구문을 상당히 간결하게 잘 처리했네요 ㅎㅎ



XMLHttpRequest functions
Ref URI : http://www.quirksmode.org/js/xmlhttp.html

function sendRequest(url,callback,postData) {
	var req = createXMLHTTPObject();
	if (!req) return;
	var method = (postData) ? "POST" : "GET";
	req.open(method,url,true);
	req.setRequestHeader('User-Agent','XMLHTTP/1.0');
	if (postData)
		req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	req.onreadystatechange = function () {
		if (req.readyState != 4) return;
		if (req.status != 200 && req.status != 304) {
//			alert('HTTP error ' + req.status);
			return;
		}
		callback(req);
	}
	if (req.readyState == 4) return;
	req.send(postData);
}

var XMLHttpFactories = [
	function () {return new XMLHttpRequest()},
	function () {return new ActiveXObject("Msxml2.XMLHTTP")},
	function () {return new ActiveXObject("Msxml3.XMLHTTP")},
	function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
	var xmlhttp = false;
	for (var i=0;i<XMLHttpFactories.length;i++) {
		try {
			xmlhttp = XMLHttpFactories[i]();
		}
		catch (e) {
			continue;
		}
		break;
	}
	return xmlhttp;
}

It's used like this:

sendRequest('file.txt',handleRequest);

Now the file file.txt is fetched, and when that's done the function handleRequest() is called. This function receives the XMLHttpRequest object as an argument, which I traditionally call req (though, of course, you can use any variable name you like). Typically, this function reads out the responseXML or responseText and does something with it.

function handleRequest(req) {
	var writeroot = [some element];
	writeroot.innerHTML = req.responseText;
}

One object per request

This function creates a new XMLHttpRequest object for every request you make. In simple cases such as this site, where every page fetches only three to five files, I don't mind creating three to five objects. In more complex sites, however, where any page can make an arbitrary amount of requests, it's probably better to write a function that reuses existing XMLHttpRequest objects.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

http://ajax.schwarz-interactive.de/csharpsample/default.aspx


사용법만 조금 연습하면 정말 코드도 짧고 정말 편하게 Ajax 비동기 통신을 이용할 수 있습니다.

정말 특이한 점은 서버메소드형테에 어트리뷰트를 추가하면 자동으로 클라이언트 스크립트에 동일한 형태의 이름으로 호출할 수 있도록 설계되어 있어서

이용하기 쉽도록 되어있다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

http://www.ibm.com/developerworks/kr/library/x-ajaxxml2/

Ajax Xml 처리등의 기본인 Ajax 처리 패턴을 소개합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

http://www.onlamp.com/pub/a/onlamp/2005/06/09/rails_ajax.html

자주보는 Ajax 관련된 사설입니다.

Ajax on Rails 시간날 때 한번 해석해 보시길..

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

http://www.ibm.com/developerworks/kr/library/wa-ajaxintro5/

Ajax를 이용해 받아온 데이터를 DOM으로 제어하는 경우가 많습니다.

기본적인 사항을 위 페이지에서 보실 수 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.