Manual:Core:Working with JSON (EXT 与json的交互)

JSON处理方法

有一段JavaScript如下：

view plain
copy to clipboard
print
?

var
obj = {

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

prop2: ['x'
,
'y'
],

prop3: {

nestedProp1: 'abc'
,

nestedProp2: 456

}

}

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

本文将会讨论如何把一个对象转换为JSON并将其发送到服务器。

使用Ext.urlEncode进行URL编码

首先我们看看Ext.urlEncode 这个方法（相对应的是Ext.urlDecode解码方法）。
Ext.urlEncode()不能用来处理JSON，Ext.urlEncode()只是负责在HTTP进行GET、POST请求时，将某个“普通的”
对象转换成
名称/值（name/value）的状态。我这里说“普通”的意思是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"

注意属性3被忽略了

注意特殊字符都被编码了（使用JS自身的encodeURIComponent()）

如果你只是想纯粹地发送一些的请求，可把参数写成JavaScript原生对象的形式，然后用这个方法编码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.comPOST
内容：

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参数。

要将JSON转换成为可GET/POST适合发送的名称/值（name/value）状态，你可以额外地将其编码：

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

在EXT 1.1,你可以轻松地使用Ext.Ajax.request()方法来创建一个典型AJAX的请求。该方法允许传入一个配置项的对象，即是可包含其它类型的内容，作为请求的参数的用途，下面引用API的介绍：

（原文）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.

（中文）params {Object/String/Function} (可选项) 包含请求参数的对象，以对象的属性形式出现，一段可url编码的字符串，或者是可返回以上两者的函数。

对于传入的是object类型， Ext.Ajax.request会调用Ext.urlEncode()将其转换为名称/值（name/value）的状态（通常情况忽略内嵌的对象）。

view plain
copy to clipboard
print
?

var
req = Ext.Ajax.request({

url: "/ws/search.pl"
,

params: obj,

method: 'GET'
,

disableCaching: false

})

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参数以消除缓冲。

每次送出的数据都是经过Ext.urlEncode()，很明显是没有发送完整的JSON,只是一连串的名称/值（name/value）的状态。

如果使用POST的方法，过程也是相同，区别是名称/值（name/value）的状态是放在POST BOBY内发送。

要把JSON发送到服务器，我们需要使用Ext.encode()方法转换数据对象到文本格式的JSON。Ext.Ajax.request()允
许传入一段可URL编码的字符串，所以你既可以用
encodeURIComponent()编码参数，亦可直接是一个简单的对象，让Ext.Ajax.request()为你编码：

view plain
copy to clipboard
print
?

var
req = Ext.Ajax.request({

url: "/ws/search.pl"
,

params: {json: Ext.encode(obj)},

disableCaching: false

})

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已解码的数据了。

译者姓名：Frank

译者博客：http://www.ajaxjs.com/blog/