您的位置:首页 > 其它

ajax代理Proxy初步理解

2014-09-05 09:06 253 查看
这次只是初步了解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了,

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: