extjs和servlet的超级简单的数据交互-CSDN博客

MyServlet的代码如下：


package com.test;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class MyServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		String _str = "[{name:'唐伯虎',age:25,sex:'男'},{name:'楚留香',age:24,sex:'女'}]";
		response.getWriter().print(_str);
	}

}

并且在web.xml中进行如下配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<servlet>
		<servlet-name>myservlet</servlet-name>
		<servlet-class>com.test.MyServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>myservlet</servlet-name>
		<url-pattern>/myservlet</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

myserlvet.js的代码如下：

Ext.onReady(function() {
			var _store = new Ext.data.JsonStore({
						url : "http://localhost:8080/zz/myservlet",
						fields : ["name", "age", "sex"]
					});
			_store.load();
			_store.on("load", function() {
						alert(_store.getCount());
						alert(Ext.util.JSON.encode(_store.getAt(1).data));
						alert(_store.getAt(0).get("name"));
					});
});

最后敲入index.html

<html>
	<head>
		<title>index.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="../extjs/resources/css/ext-all.css">
		<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../extjs/ext-core.js"></script>
		<script type="text/javascript" src="../extjs/ext-all.js"></script>
		<script type="text/javascript" src="../js/myservlet.js"></script>
	</head>
	<body>
	</body>
</html>