EXT中的代理Proxy初步

最新推荐文章于 2022-07-11 10:26:32 发布

ItJavawfc

最新推荐文章于 2022-07-11 10:26:32 发布

阅读量957

点赞数

文章标签： EXT中的代理Proxy初步

本文链接：https://blog.csdn.net/ItJavawfc/article/details/39060261

版权

我们这里先初步理解代理：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串。

ItJavawfc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
EXT中的代理Proxy初步

我们这里先初步理解代理：Proxy
复制链接

扫一扫