[04]EXTJS4.0的数据代理-Proxy
数据代理proxy是进行数据读写的主要途径，通过代理操作数据进行CRUD
每一步操作都会得到唯一的Ext.data.Operation实例，它包含了所有的请求参数
1.数据代理proxy目录结构
Ext.data.proxy.Proxy 代理类的根类(它分为客户端(Client)代理和服务器代理(Server))
Ext.data.proxy.Client 客户端代理
Ext.data.proxy.Memory 普通的内存代理
Ext.data.proxy.WebStorage 浏览器客户端存储代理
Ext.data.proxy.SessionStorage 浏览器级别代理(session)
Ext.data.proxy.LocalStorage 本地化级别代理(等同于cookies)
Ext.data.proxy.Server 服务器端代理
Ext.data.proxy.Ajax 异步加载的方式
Ext.data.proxy.Rest 一种特殊的Ajax
Ext.data.proxy.JsonP 跨域交互的代理 跨域是有严重的安全隐患的,extjs的跨域也是需要服务器端做相应的配合
Ext.data.proxy.Direct 命令
3+方式的代理
资料
REST指Representational State Transfer(有时写作"ReST"),表示状态转移，其要求无状态、客户端-服务器、具有缓存机制的通信协议——实际上是使用HTTP协议。
RESTful应用使用HTTP请求来POST数据(创建和/或更新)、读取数据(例如，进行查询)、删除数据。
这样，REST使用HTTP来进行CRUD(Create/Read/Update/Delete)操作
lesson4.html
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>proxy</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="jsonp.js"></script>
- </head>
- <body>
- </body>
- </html>
---------------------------------------------------------------------------------------
memory.js
- (function(){
- Ext.onReady(function(){
- Ext.define("user",{
- extend:'Ext.data.Model',
- fields:[
- {name:'name',type:'string'},
- {name:'age',type:'int'}
- ]
- });
- //不用create方法，我们直接用proxy来创建对象数据
- var userData = [
- {name:'uspcat.com',age:1},
- {name:'yunfengcheng',age:26}
- ];
- var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
- data:userData,
- model:'user'
- });
- userData.push({name:'new upcast.com',age:1});
- //update
- /*在这个版本上根本就不能用
- *下面的代码虽然没有错误，但是没有实际用处
- */
- var operation = new Ext.data.Operation({action:'update'});
- operation.resultSet={ records:[Ext.create('user',{name:'name',age:2})]};
- memoryProxy.update(operation,function(result){},this);
- //就可以做CRUD了
- memoryProxy.read(new Ext.data.Operation(),function(result){
- console.log(result);
- //得到user这个模型的两个对象
- var datas = result.resultSet.records;
- Ext.Array.each(datas,function(model){
- console.log(model.get('name'));
- });
- });
- });
- })();
--------------------------------------------------------------------------------
localstorage相当于cookies，关闭浏览器之后还是可以读到的
localstorage.js
- (function(){
- Ext.onReady(function(){
- Ext.regModel("user",{
- fields:[
- {name:'name',type:'string'}
- ],
- proxy:{
- type:'localstorage',
- id:'twitter-Searches'
- }
- });
- //我们用store来初始化数据
- var store = new Ext.data.Store({
- model:user
- });
- store.add({name:'uspcat.com'});
- store.sync();
- store.load();
- var msg = [];
- store.each(function(rec){
- msg.push(rec.get('name'));
- });
- console.log(msg.join("\n"));
- });
- })();
------------------------------------------------------------------------------------
sessionstorage相当于session，关闭浏览器之后一切都要从头开始
sessionstorage.js
- (function(){
- Ext.onReady(function(){
- Ext.regModel("user",{
- fields:[
- {name:'name',type:'string'}
- ],
- proxy:{
- type:'sessionstorage',
- id:'twitter-Searches'
- }
- });
- //我们用store来初始化数据
- var store = new Ext.data.Store({
- model:user
- });
- store.add({name:'new uspcat.com'});
- store.sync();
- store.load();
- var msg = [];
- store.each(function(rec){
- msg.push(rec.get('name'));
- });
- console.log(msg.join("\n"));
- });
- })();
-------------------------------------------------------------------------------------
ajax.js
- (function(){
- Ext.onReady(function(){
- Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: [
- {name: 'name', type: 'string'}
- ]
- });
- var ajaxProxy = new Ext.data.proxy.Ajax({
- url:'person.jsp',
- model:User,
- reader:'json',
- limitParam:'indexLimit'
- });
- ajaxProxy.doRequest(new Ext.data.Operation({
- action:'read',
- limit:10,
- start:1,
- sorters:[
- new Ext.util.Sorter({
- property:'name',
- direction:'ASC'
- })
- ]
- }),function(o){
- console.log(o);
- var text = o.response.responseText;
- console.log(Ext.JSON.decode(text)['name']);
- });
- });
- })();
person.js
- <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
- <%
- System.out.println(request.getParameter("id"));
- response.getWriter().write("{name:'upcat.com'}");
- %>
---------------------------------------------------------------------------------
jsonp.js
- (function(){
- Ext.define('person', {
- extend: 'Ext.data.Model',
- fields: [
- {name: 'name', type: 'string'}
- ],
- proxy:{
- type:'jsonp',
- url:'http://www.uspcat.com/extjs/person.php'
- }
- });
- var person = Ext.ModelManager.getModel('person');
- person.load(1,{
- scope:this,
- success:function(model){
- console.log(model.get('name'));
- }
- });
- })();
控制台的输出结果是：
uspcat
===============================================
跨域访问机制：
在服务器上，同一个域中的文件,数据或者swf可以任意访问。若要跨域访问需被授权。注意不同域名即使映射到相同IP地址也会被看成两个域。IP地址名和通过解析的地址也被看作两个域。