ajax代理Proxy初步理解

这次只是初步了解Proxy，分析一个实例

我们先看一下一个js文件：proxy.js

 (function(){
<span style="white-space:pre">	</span> Ext.onReady(function(){
 <span style="white-space:pre">	</span>Ext.define("person",{
    extend: 'Ext.data.Model',
     fields: [
        {name: 'name', type: 'auto'},
        {name: 'age',  type: 'int'},
        {name: 'email',type: 'auto'}
    ],
    proxy:{
 <span style="white-space:pre">		</span>type:'ajax',
 <span style="white-space:pre">		</span>url:'proxy.jsp'
    }
 <span style="white-space:pre">	</span>});
 <span style="white-space:pre">	</span> var p = Ext.ModelManager.getModel('person');
    p.load(1, {
    scope: this,
    failure: function(record, operation) {
        //do something if the load failed
    },
    success: function(record, operation) {
        //do something if the load succeeded
    <span style="white-space:pre">	</span>alert(record.data.name);
    },
     callback: function(record, operation) {
        //do something whether the load succeeded or failed
   }
});
<span style="white-space:pre">	</span> })
 })();

然后再看看一个jsp文件：Proxy.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
response.getWriter().write("{name:'uppcat.com'，age:16,email:"wfc@163.com"}");
%>

 

这个JSP实际上是为前台提供数据的，这些数据可能是直接写的JSON字符串，也可能是从数据库中取出来的值。一定要注意他的书写格式。

在前台页面的时候加载proxy.js

<script type="text/javascript" src="proxy.js">
    </script>

分析，proxy.js分为了三个部分：1）创建一个person类

Ext.define("person",{

2）类的实例：  var p = Ext.ModelManager.getModel('person');

3）创建实例后调用load()方法

  var p = Ext.ModelManager.getModel('person');

我们看看这个函数load()：

 p.load(1, {
    scope: this,
    failure: function(record, operation) {
        //do something if the load failed
    },
    success: function(record, operation) {
        //do something if the load succeeded
    alert(record.data.age);
    },
     callback: function(record, operation) {
        //do something whether the load succeeded or failed
   }

我们根据

Model创建类，然后我们用Ext.ModelManager.getModel('person');创建对应的实例，，查看Model类，用其中的load()方法来显示数据

这个load有点意思：我们可能不理解recod是什么东西，或者其它函数什么内容，这个时候就要学会在浏览器中debug

以后我们就可以在js中负责获取数据OK了，