ExtJS 常用proxy

    这篇博文主要介绍一些常用的proxy，这些proxy的作用是通过内存，HTTP等不同的媒介获取原始的数据，然后将获取的数据交给对应的读取器进行处理。

1、MemoryProxy

    MemoryProxy只能从JavaScript对象获得数据，可以直接把数组，或JSON和XML格式的数据交给它处理，如下面的代码所示： 

var proxy = new Ext.data.MemoryProxy([
	['id1', 'name1', 'descn1'],
	['id2', 'name2', 'descn2'],
]);

2、HttpProxy

    HttpProxy通过HTTP协议，通过Ajax去后台取数据，构造它时需要设置url: 'xxx.php'参数。这里的url可以替换成任何一个合法的网址，这样HttpProxy才知道去哪里获取数据，如下面的代码所示：

var proxy = new Ext.data.HttpProxy({url: 'xxx.php'});

    后台需要返回Ext所需要的JSON格式的数据。下面的内容就是后台使用PHP的一个范例，如下面的代码所示：

<?php
$testJson = "{\"Name\" : \"奥巴马\",\"ByName\" : [\"小奥\",\"小巴\",\"小马\"],\"Education\":{\"GradeSchool\" : \"华盛顿第一小学\",\"MiddleSchool\" : [\"华盛顿第一初中\" , \"华盛顿第一高中\"], \"University\" :{ \"Name\" : \"哈佛大学\", \"Specialty\" : [\"软件工程\",\"会计\"]}}}";
echo $testJson;
?>

    请注意，这里的HttpProxy不支持跨域，它只能从同一域中获得数据。如果想跨域，参考下面的ScriptTagProxy。

3、ScriptTagProxy

    ScriptTagProxy的用法和HttpProxy几乎一样，如下面的代码所示：

var proxy = new Ext.data.ScriptTagProxy({url: 'xxx.php'});

    从这里也看不出来它是如何支持跨域的，我们还需要在后台进行相应的处理。其中的关键就在于从请求中获得的callback参数，这个参数叫做回调函数。ScriptTagProxy会在当前的HTML页面里添加一个<script type="text/javascript" src="xxx.php"></script>标签，然后把后台返回的内容添加到这个标签中。这样就可以解决跨域访问数据的问题。为了让后台返回的内容可以在动态生成的标签中运行，EXT会生成一个名为callback的回调函数，并把回调函数的名称传递给后台，由后台生成callback(data)形式的响应内容，然后返回给前台自动运行。

    虽然上述处理过程比较难理解，但是我们只需要了解ScriptTagProxy的用法就足够了。如果还想进一步了解ScriptTagProxy的运行过程，可以使用Firebug查看动态生成的HTML以及响应的JSON内容。