From Learn About the Ext JavaScript Library

Contents 1 JSON과 함께 작업하기 1.1 Ext.urlEncode로 URL 인코딩하기 1.2 Ext.encode으로 JSON 인코딩하기 1.3 Ext.Ajax.request으로 JSON 보내기 1.4 See also

JSON과 함께 작업하기

여러분은 다음과 같은 것을 자바스크립트 오브젝트라고 부릅니다:

var obj = {
	prop1: "a0~`!@#$%^&*()-_+={}[]|\\:;\"',.?/",
	prop2: ['x','y'],
	prop3: {
		nestedProp1: 'abc', 
		nestedProp2: 456
	}
}

이 글은 오브젝트를 JSON으로 변환하고 그것을 서버로 보내는 방법에 대한 내용을 다룹니다.

Ext.urlEncode로 URL 인코딩하기

우리가 처음 볼 메소드는 Ext.urlEncode 입니다. Ext.urlEncode()는 모든 JSON과 원활히 동작하지는 않고 HTTP 요청 시 GET과 POST방식에서 name/value의 한 쌍으로 이뤄진 간단한 오브젝트에서만 변환하도록 하기 위한 메소드입니다. (그리고 그것을 디코딩하는 Ext.urlDecode 메소드) 배열은 인정하지만 배열안에 포함하고 있는 오브젝트는 무시될 것입니다. 이걸 간단히 말하자면 urlEncode는 첫 번째 레벨의 속성만을 찾는 다는 것입니다.

예를 들어:

Ext.urlEncode(obj) == "prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y"

• pop3는 무시되었다
• 모든 특수 문자는 인코딩된다. (urlEncode()는 내부적으로 encodeURIComponent()를 사용한다)

요청을 서버로 보내기 직전에 urlEncode한다면 자바스크립트 내장 객체를 요청 파라미터로 만들 수 있기 때문에 요청 로직을 위해 매우 편리합니다.

예를 들어, GET 요청과 같은 url의 끝에 문자열을 추가시킬 수 있습니다:

• 요청이 진행:

http://myurl.com?prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y

• 그리고 서버에서는 여러분에게 전달하기 위해 URIComponent 인코딩된 것을 있는 그대로 디코딩 했을 것이다:

prop1	a0~`!@#$%^&*()-_+={}[]|\:;"',.?/
prop2	x
prop2	y

혹은 POST 요청과도 같게 문자를 보낼 수도 있다:

• 요청이 진행:

http://myurl.com

• POST의 내용:

prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y

• 그리고 서버는 GET 요청처럼 같은 데이터를 볼 것이다.

모든 것이 척척 잘되었습니다. 그러나 여러분은 JSON을 그대로 보내고 받기 위해서 이 글을 보고 있을 지도 모릅니다. :) 방법을 찾으려면 계속 읽으세요.

Ext.encode으로 JSON 인코딩하기

Ext.encode() (그리고 그것의 디코딩 장치는 Ext.decode)은 복잡한 오브젝트를 JSON 포맷의 스트링으로 변환한다.

예를 들어:

Ext.encode(obj) == '{"prop1":"a0~`!@#$%^&*()-_+={}[]|\\:;\"\',.?/","prop2":["x","y"],"prop3":{"nestedProp1":"abc","nestedProp2":456}}'

• 중첩(감싸여진) 속성은 포함된다.

단순한 오브젝트를 여러 개의 name/value 쌍이 변환되었을 때와는 다르게 하나의 파라미터로 변환되었습니다. name/value 쌍의 일부 인 것 같이 서버에 보내고 서버 JSON 을 디코딩을 하려는 생각입니다. 만약 단지 하나의 JSON 문자열만 보낸다면 아마도 파라미터 name이 json으로 될 것입니다.

GET/POST 요청을 위한 적절한 Name/value 쌍에서 JSON로 되돌리기 위해서 수동으로 인코딩 할 수 있습니다.:

encodeURIComponent(Ext.encode(obj)) == "%7B%22prop1%22%3A%22a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%5C%3A%3B%5C%22'%2C.%3F%2F%22%2C%22prop2%22%3A%5B%22x%22%2C%22y%22%5D%2C%22prop3%22%3A%7B%22nestedProp1%22%3A%22abc%22%2C%22nestedProp2%22%3A456%7D%7D"

다음과 같이 GET 요청 생성:

"http://url.com?json=" + encodeURIComponent(Ext.encode(obj))

POST 요청의 내용과 같이 사용하거나:

"json=" + encodeURIComponent(Ext.encode(obj))

더 좋은 방법인 urlEncode()를 사용한다:

Ext.urlEncode({ json: Ext.encode(obj)}) == "json=%7B%22prop1%22%3A%22a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%5C%3A%3B%5C%22'%2C.%3F%2F%22%2C%22prop2%22%3A%5B%22x%22%2C%22y%22%5D%2C%22prop3%22%3A%7B%22nestedProp1%22%3A%22abc%22%2C%22nestedProp2%22%3A456%7D%7D"

그리고 전처럼 GET/POST 요청에서 이것을 사용합니다. 또 다른 방법으로, 서버는 파라미터를 있는 그대로 URIComponent로 디코딩:

{"prop1":"a0~`!@#$%^&*()-_+={}[]|\\:;\"',.?/","prop2":["x","y"],"prop3":{"nestedProp1":"abc","nestedProp2":456}}

여러분은 JSON을 디코딩하면 데이터에 접근할 수 있게 됩니다.

Ext.Ajax.request으로 JSON 보내기

Ext1.1 에서 처럼 여러분은 Ext.Ajax.Request()를 사용하여 수동 Ajax 방식의 요청을 생성할 수 있습니다. 이 메소드는 다른 것들 중에서도 여러분이 요청에 사용하는 매개변수를 정의할 수 있도록 하는 구성개체(configuration object)를 수용합니다.:

params {Object/String/Function} (Optional) An object containing properties which are used as parameters to the request, a url encoded string or a function to call to get either.

만약 오브젝트를 넣었다면 Ext.Ajax.request는 name/value 쌍의 문자열로 일련화하여 Ext.urlEncode()를 호출합니다.

var req = Ext.Ajax.request({
    url: "/ws/search.pl",
    params: obj,
    method: 'GET',
    disableCaching: false
})

 요청이 진행:
/ws/search.pl?prop1=a0~%60!%40%23%24%25%5E%26*()-_%2B%3D%7B%7D%5B%5D%7C%5C%3A%3B%22'%2C.%3F%2F&prop2=x&prop2=y

그리고 서버에서는 이렇게:

prop1	a0~`!@#$%^&*()-_+={}[]|\:;"',.?/
prop2	x
prop2	y

• 만약 disableCaching 이용하지 않는다면 Ext는 유일한 _dc 캐시 부스터 매개변수를 추가할 것입니다.
• 여러분은 JSON 자체를 서버로 보내지 않고도 일련화한 name/value의 쌍을 Ext.urlEncode()으로 명확하게 해줍니다.

만약 (기본적으로 지정된 파라미터는 GET) POST 방식을 대신 사용하더라도 POST 요청으로 name/value가 전달됩니다

서버에 JSON을 보내기 위해서는 Ext.encode()를 이용해서 JSON형태의 데이터 객체를 문자열로 변환 할 필요가 있습니다. Ext.Ajax.request()는 url로 인코딩된 문자열을 부여해야 합니다. 그래서 encodeURIComponent()를 직접 사용하여 인코딩하거나 더 좋은 방법은 간단한 오브젝트 안에 json 문자열을 넣으면 Ext.Ajax.request() 알아서 인코딩 해서 전송할 것입니다:

var req = Ext.Ajax.request({
    url: "/ws/search.pl",
    params: {json: Ext.encode(obj)},
    disableCaching: false
})

전과 같이 서버는 다음과 같이 표시됩니다:

{"prop1":"a0~`!@#$%^&*()-_+={}[]|\\:;\"',.?/","prop2":["x","y"],"prop3":{"nestedProp1":"abc","nestedProp2":456}}

여러분은 JSON을 디코딩하면 데이터에 접근할 수 있습니다.

See also

• Manual:Core:Ext.Ajax