사용자 삽입 이미지

크로스 도메인 Ajax 가 파이어 폭스(firefox 3) 에서 지원을 하게 되었습니다.
W3C 표준에 Access Control working draft 에 대한 기사가 있는데요.

파이어폭스 3에서는 이부분을 벌써 적용중이네요.










php code

javascript
신고
Posted by Rhio.kim
W3C에서 "Enabling Read Access for Web Resources" 로 크로스 도메인 처리가 가능한 XMLHTTP Request(XHR) 을 추가하였습니다.

정말 크로스 도메인에 대한 처리는 너무 기대됩니다.
그간 많은 사용자들이 크로스 도메인을 해결하기 위한 시도가 있었는데요..

HTTP header 에 설정을 통하여 가능하게 됩니다.
Access-Control: allow <*.example.org> exclude <*.public.example.org>

XML 방식의 처리
<?access-control allow="allow.example.org" deny="deny.example.org"?>

그래서 이제는 cross_dmain.xml 이 필요없게 되었습니다.


이번 크로스 도메인 정책에 의미는 엄청난 잠재력을 지닌, 보안 문제에 있어서도 안전한
 Mash Up 메커니즘을 제공할 것입니다.

아래 표는 위의 제안과 JSONRequest 의 차이점에 대한 표입니다.
사용자 삽입 이미지



신고
Posted by Rhio.kim
사용자 삽입 이미지

ECMAScript edition 4가 발표 되었습니다.

ECMA-262 에 비하면 새로운 랭귀지에 더 가깝다고 보고 싶고 java like 라고 할 수도 있겠습니다.

ECMA Script : http://www.ecmascript.org/index.php
ECMA Script edition 4 download : http://www.ecmascript.org/download.php


core ES4 에서 Javascript 2.0 에 대한 새로운 자료를 기재해볼 계획입니다.
현재 오픈된 es 클래스에 대한 소스 분석과 사실 이부분이 가장 흥미롭습니다.
기존에 javascript native 소스와도 다를 바 없을 것 같습니다.

보면서 큰 도움이 될 것 같구요.

기대해주시고 저도 기대됩니다...
신고
Posted by Rhio.kim

Prototype takes issue with only one aspect of functions: binding.
Prototype은 기능의 관점에서 유일하게 갖고 있는게 'binding' 이다.

“Binding” basically determines the meaning, when a function runs, of the this keyword. 
While there usually is a proper default binding 
(this refers to whichever object the method is called on), 
this can be “lost” sometimes, for instance when passing a function reference as an argument.

Binding 이란 함수가 실행될때 this 객체를 결정하는 방법입니다. 
예를 들어 아규먼트로 함수 레퍼런스(참조변수)를 넘길때 때때로 "lost" 될 수 있어 이런일이 
발생하는 동안에 고유의 기본 바인딩 기능이 있다.
(this는 Method가 요청된 어떤 오브젝트든지 참조할 수 있다)


If you don’t know much about the this keyword in JavaScript, hop to the docs for the bind() 
method. 
The examples there will clear it up.

만약에 여러분이 javascript에서 this객체에 관해서 잘 모른다면 bind()에 대한건 넘어가세요.


--prototype.js--------------------------------------------------------------

Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
}

Function.prototype.bindAsEventListener = function(object) {
  var __method = this, args = $A(arguments), object = args.shift();
  return function(event) {
    return __method.apply(object, [event || window.event].concat(args));
  }
}



--for example--------------------------------------------------------------

window.name = "www.pandora.tv";

Function Test() {
  return this.name;
}
Test(); //-> 'www.pandora.tv'

var foo = {
  name : 'www.google.com',
  otherTest : function() { return this.name }
}

foo.otherTest(); //-> 'www.google.com'

Function runFx(f) { f(); }

var fx = foo.otherTest.bind(foo);

runFx(foo.otherTest); //->
runFx(fx); //->
		
신고
Posted by Rhio.kim

***** XMLHttpRequest의 메서드

Ajax
	var Ajax = {
	  getTransport: function() {
	    return Try.these(
	      function() {return new XMLHttpRequest()},
	      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
	      function() {return new ActiveXObject('Microsoft.XMLHTTP')}
	    ) || false;
	  },
	
	  activeRequestCount: 0
	}
	
	● Ajax.Base
		Ajax.Base = function() {};
		Ajax.Base.prototype = {
		  setOptions: function(options) {
		    this.options = {
		      method:       'post',
		      asynchronous: true,
		      contentType:  'application/x-www-form-urlencoded',
		      encoding:     'UTF-8',
		      parameters:   ''
		    }
		    Object.extend(this.options, options || {});
		
		    this.options.method = this.options.method.toLowerCase();
		    if (typeof this.options.parameters == 'string')
		      this.options.parameters = this.options.parameters.toQueryParams();
		  }
		}
		
	● Ajax.Options
	   이 클래스는 모든 AJAX 요청에 의해 공개된 모든 중요 옵션과 콜백을 세부적으로 갖는다.
		
	● Ajax.PeriodicalUpdater : new Ajax.PeriodicalUpdater(container, url[, options])
	   주기적으로 AJAX 요청과 response text 바탕으로된 컨텐츠 갱신을 수행한다. 
		
	● Ajax.Request : new Ajax.Request(url[, options])
	   AJAX 요청 시작과 수행
		
	● Ajax.Responders : 
            Ajax.Responders.register(responder), Ajax.Responders.unregister(responder)
	   전역 리스너의 저장소는 Prototype-based AJAX요청의 모든 단계에 대해 통보(변화)한다.
		
	● Ajax.Updater
		

	
var UI = Class.create();
UI.prototype = {
  AX : null,
  initialize : null,
  getHTML : function() {
  },
  recv : function() {
  },
}

var oUI = new UI();

간단한 UI 객체의 구조입니다. 

UI class를 만들었습니다. 그러면 getHTML(ajax를 통해 HTML 소스 즉 서버측에 요구하는 값을 
받아오는 Method)와 recv (ajax를 통해 결과를 받아 파싱하는 Method)를 보겠습니다.

getHTML : function() {
  var url = '/ajax.php';

  this.AX = new Ajax.Request(url, {
    method : 'get',  // basic set is POST
	parameters : { 'file' : 'index.htm' },
    onSuccess : function(result) {
       this.recv(result);
    }.bind(this),
    onFailure : function() {
       alert('HTML을 받아오지 못했습니다.');
    }
  })
}

위의 getHTML Method를 보면 new Ajax가 생성되고 url과 JSON이 파라메터로 넘어갑니다.
url, { method : 'get' , parameters : { 'file' : 'index.htm' }, onSuccess : '' , onFailure : '' } 
이렇게 두가지의 파라미터가 넘어갑니다.

ajax는 이 JSON을 받아서 내부적으로 처리합니다. 그 결과에 따라 성공하면 onSuccess에 
처리문을 수행합니다.

여기엔 다양한 Method가 있습니다. 기본적으로 onComplete, onSuccess, onFailure 등이 있습니다.

위에서 
onSuccess : function(result) {
  this.recv(result);
}.bind(this),

이 부분은 성공시에 처리되는 것이며 function() {}.bind(this) 에서 bind(this)는 
anonymous function 을 호출시에 발생하는 this 객체 즉 anonymous function를 호출한 객체를 
익명함수 내부에서도 사용할 수 있도록 bind(Oject instance name) 를 사용함으로 
Object instance name 을 익명함 수 내에서도 사용할 수 있게 됩니다.

onSuccess는 Ajax객체의 내무 Method이므로 Ajax 객체 내에서 사용하는 this.recv(result)는 
.bind() 가 없을 경우 this.recv(result)의 this는 Ajax를 가리키게 되지만 .bind함수는 
이를 해결하기 위한 Prototype의 기능입니다.


만약 Ajax객체가 성공적으로 수행하여 결과가 정상적으로 리턴되었다면 this.recv(result)는 
실행될 것이며 UI 객체에 있는 recv Method가 수행될것입니다.

  recv : function(XHR) {
     alert(XHR.responseText);
  },

는 실제 XMLHTTPRequest에 의해 return된 오브젝트이며 프로퍼티중 responseText 에 결과가 
담겨져 있습니다.
XHR.responseText를 alert으로 출력해보면 결과에 맞는 내용이 string으로 뿌려지게 됩니다.

아주 간단한 prototype을 이용한 ajax통신을 보았구요. 예제를 통한 설명이 이쯤에서 끝냅니다.

Prototype내의 Ajax Object를 살펴 보시면 다양한 Method와 하위 Object들 볼 수 있습니다.
Ajax부분에 고급화된 Object와 Method를 제공하고 있고 위에서 보여드린 부분은 아주 간단한 
Ajax를 이용한 호출과 결과값을 보여주는 부분입니다.

강좌는 계속 이어지구요. 질문 사항은 이곳 게시판이나 메일로 보내주시면..
서로 공부해서 ^^
설명중 Class, 오브젝트, 객체는 모두 같은 의미를 갖으며 설명중 중복이 싫어서 자꾸 바뀌는 
경향이 있으니 이점 생각하시고 보세요. 
		
신고
Posted by Rhio.kim
우선 모든 강좌는 간단하고 Core만 다루도록 하겠습니다.
Prototype 이라는 Open Framework 이기 때문에 찾아서 혹은 직접 해보면서 다양한 기능을 다룰 수 있을것 입니다.

또한 객체 지향적인 개발 방법으로만 다루겠습니다.
Framework을 이용하는 이유 역시 간단한 함수 호출을 위해서 만든 오픈 라이브러리가 아니기 때문입니다.

var UI = Class.create();
UI.prototype = {
  AX : null,
  initialize : null,
  getHTML : function() {
  },
  recv : function() {
  },
}

var oUI = new UI();

간단한 UI 객체의 구조입니다.

UI class를 만들었습니다. 그러면 getHTML(ajax를 통해 HTML 소스 즉 서버측에 요구하는 값을 받아오는 Method)와 recv (ajax를 통해 결과를 받아 파싱하는 Method)를 보겠습니다.

getHTML : function() {
  var url = '/ajax.php';

  this.AX = new Ajax(url, {
    method : 'get',  // basic set is POST
    parameters : { 'file' : 'index.htm' },
    onSuccess : function(result) {
       this.recv(result);
    }.bind(this),
    onFailure : function() {
       alert('HTML을 받아오지 못했습니다.');
    }
  })
}

위의 getHTML Method를 보면 new Ajax가 생성되고 url과 JSON이 파라메터로 넘어갑니다.
url, { method : 'get' , parameters : { 'file' : 'index.htm' }, onSuccess : '' , onFailure : '' }
이렇게 두가지의 파라미터가 넘어갑니다.

ajax는 이 JSON을 받아서 내부적으로 처리합니다. 그 결과에 따라 성공하면 onSuccess에 처리문을 수행합니다.

여기엔 다양한 Method가 있습니다. 기본적으로 onComplete, onSuccess, onFailure 등이 있습니다.

위에서
onSuccess : function(result) {
  this.recv(result);
}.
bind(this),

이 부분은 성공시에 처리되는 것이며 function() {}.bind(this) 에서 bind(this)
anonymous function 을 호출시에 발생하는 this 객체 즉 anonymous function를 호출한 객체 를 익명함수 내부에서도 사용할 수 있도록 bind(Oject instance name) 를 사용함으로 Object instance name 을 익명함 수 내에서도 사용할 수 있게 됩니다.

onSuccess는 Ajax객체의 내무 Method이므로 Ajax 객체 내에서 사용하는 this.recv(result)는 .bind() 가 없을 경우 this.recv(result)의 this는 Ajax를 가리키게 되지만 .bind함수는 이를 해결하기 위한 Prototype의 기능입니다.


만약 Ajax객체가 성공적으로 수행하여 결과가 정상적으로 리턴되었다면 this.recv(result)는 실행될 것이며 UI 객체에 있는 recv Method가 수행될것입니다.

  recv : function(XHR) {
     alert(XHR.responseText);
  },

는 실제 XMLHTTPRequest에 의해 return된 오브젝트이며 프로퍼티중 responseText 에 결과가 담겨져 있습니다.
XHR.responseText를 alert으로 출력해보면 결과에 맞는 내용이 string으로 뿌려지게 됩니다.

아주 간단한 prototype을 이용한 ajax통신을 보았구요. 예제를 통한 설명이 이쯤에서 끝냅니다.

Prototype내의 Ajax Object를 살펴 보시면 다양한 Method와 하위 Object들 볼 수 있습니다.
Ajax부분에 고급화된 Object와 Method를 제공하고 있고 위에서 보여드린 부분은 아주 간단한 Ajax를 이용한
호출과 결과값을 보여주는 부분입니다.

강좌는 계속 이어지구요. 질문 사항은 이곳 게시판이나 메일로 보내주시면..
서로 공부해서 ^^
설명중 Class, 오브젝트, 객체는 모두 같은 의미를 갖으며 설명중 중복이 싫어서 자꾸 바뀌는 경향이 있으니
이점 생각하시고 보세요.
신고
Posted by Rhio.kim