Proxy代理的使用（客户端代理和服务端代理）

client---------------

<!DOCTYPE html>
<html>
<head>
    <title>test client proxy</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function(){
        Ext.define('User', {
          extend: 'Ext.data.Model',
          fields: ['name', 'age']
        });
        var store = new Ext.data.Store({
          model: 'User'
        });

        var proxy = new Ext.data.proxy.Memory({
          model: 'User',
          data: {
            name: 'kyrie',
            age: 111
          }
        });

        store.setProxy(proxy);

        store.load(function(records, operation, success){
          if (success) {
            var msg = [];
            store.each(function(user){
              msg.push('name = ' + user.get('name') + ', age = ' + user.get('age') );
            });
            Ext.Msg.alert('msg', msg);
          }
        });
      });
    </script>
</head>
<body>
<div id="form"></div>
<div id="server">
    <a href="json.html">click here</a>
</div>
</body>
</html>

server---------------

<!DOCTYPE html>
<html>
<head>
    <title>test client proxy</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function(){
        Ext.define('User', {
          extend: 'Ext.data.Model',
          fields: ['name', 'age']
        });
        var store = Ext.create('Ext.data.Store', {
          model: 'User',
          proxy: {
            type: 'ajax',
            url: '/ext/json',
            reader: {
              type: 'json',
            }
          }
        });

        store.load(function(records, operation, success){
          if (success) {
            var msg = [];
            store.each(function(user){
              msg.push('name = ' + user.get('name') + ', age = ' + user.get('age') );
            });
            Ext.Msg.alert('msg', msg);
          }
        });
      });
    </script>
</head>
<body>
<div id="form"></div>
</body>
</html>

package com.zg.kyrie;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class ExtServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String result = "{'name': 'kingjames', 'age': 33}";
        resp.setContentType("application/json;charset=utf-8");
        resp.setStatus(200);
        resp.getWriter().write(result);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doPost(req, resp);
    }
}

reference: https://blog.csdn.net/yubo_725/article/details/45641553

Proxy代理的使用（客户端代理和服务端代理）

猜你喜欢