EXT中的代理Proxy初步

来源：互联网发布：开源软件是什么编辑：程序博客网时间：2024/06/06 13:13

我们这里先初步理解代理：Proxy

1）先看lesson03.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page">   <!-- 导入Ext JS必需的CSS样式单 --><link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><!-- 导入Ext JS必需的JavaScript库 --><script type="text/javascript" src="extjs/ext-all.js"></script><!-- 导入Ext JS国际化所需的JavaScript库 --><script type="text/javascript" src="extjs/ext-lang-zh_CN.js">    </script><script type="text/javascript" src="proxy.js">    </script>  </head>  <body>    This is my JSP page. <br>  </body></html>

</pre><pre name="code" class="java">这里需要注意的是：<pre name="code" class="java"><script type="text/javascript" src="proxy.js">

接下来我们看proxy.js内容：

 (function(){        Ext.onReady(function(){ Ext.define("person",{    extend: 'Ext.data.Model',     fields: [        {name: 'name', type: 'auto'},        {name: 'age',  type: 'int'},        {name: 'email',type: 'auto'}    ],    proxy:{ type:'ajax', url:'proxy.jsp'    } });  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    alert(record.data.name);    },     callback: function(record, operation) {        //do something whether the load succeeded or failed   }}); }) })();

这里梳理一下这个js文件

我们在JS中创建了一个模型类person

如果说没有创建对象p及之后的类容，仅仅在代码

    proxy:{ type:'ajax', url:'proxy.jsp'    }

处就结束的话，客户端访问lesson03.jsp页面的时候，是不会请求访问proxy.jsp的

代理需要三方面内容：代理类（给谁代理）代理对象代理方法

如果用了代理，必然对象

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

</pre><pre name="code" class="javascript">就必须使用一个.load（）加载。

</pre><pre name="code" class="javascript">下面我们看看代理的内容：（也就是从后台取得内容）proxy.jsp

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

我们需要注意这些代码：

  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   }});

其中：1其实是一个id，代表是一个键，一条记录号

然后：返回的是record对象，是一个Object，那么通过它可以返回很多东西：

</pre><pre name="code" class="javascript">这里又有一个小技巧了：有人问怎么有一个data去取值，实际上学习EXT就是不断地调试和猜的过程，注意学会打断点就行了。

这里还有个问题需要注意一下：response.getWriter().write("{name:'uppcat.com',age:25,email:'wfc@163.com'}");

这行代码中，书写的时候一定要知道这是通过JSON写的JSON串，也必须是JSON串，我们可以再前台查看返回响应的结果就是JSON串。

0 0