Google Git
Sign in
apache / struts-site / 3934264825d58c20e3df42bc34fbd081a7c615b5 / . / content / core-developers / ajax.html
blob: e09bfcdd8db7e4bd7e36a5967fe123fbc8108d6b [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="Date-Revision-yyyymmdd" content="20140918"/>
<meta http-equiv="Content-Language" content="en"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AJAX</title>
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<link href="/highlighter/github-theme.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/community.js"></script>
</head>
<body>
<a href="http://github.com/apache/struts" class="github-ribbon">
<img style="position: absolute; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
</a>
<header>
<nav>
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#struts-menu" class="navbar-toggle">
Menu
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/index.html" class="navbar-brand logo"><img src="/img/struts-logo.svg"></a>
</div>
<div id="struts-menu" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
Home<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/index.html">Welcome</a></li>
<li><a href="/download.cgi">Download</a></li>
<li><a href="/releases.html">Releases</a></li>
<li><a href="/announce.html">Announcements</a></li>
<li><a href="http://www.apache.org/licenses/">License</a></li>
<li><a href="https://www.apache.org/foundation/thanks.html">Thanks!</a></li>
<li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
Support<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/mail.html">User Mailing List</a></li>
<li><a href="https://issues.apache.org/jira/browse/WW">Issue Tracker</a></li>
<li><a href="/security.html">Reporting Security Issues</a></li>
<li class="divider"></li>
<li><a href="https://cwiki.apache.org/confluence/display/WW/Migration+Guide">Version Notes</a></li>
<li><a href="https://cwiki.apache.org/confluence/display/WW/Security+Bulletins">Security Bulletins</a></li>
<li class="divider"></li>
<li><a href="/maven/project-info.html">Maven Project Info</a></li>
<li><a href="/maven/struts2-core/dependencies.html">Struts Core Dependencies</a></li>
<li><a href="/maven/struts2-plugins/modules.html">Plugin Dependencies</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
Documentation<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/birdseye.html">Birds Eye</a></li>
<li><a href="/primer.html">Key Technologies</a></li>
<li><a href="/kickstart.html">Kickstart FAQ</a></li>
<li><a href="https://cwiki.apache.org/confluence/display/WW/Home">Wiki</a></li>
<li class="divider"></li>
<li><a href="/getting-started/">Getting Started</a></li>
<li><a href="/security/">Security Guide</a></li>
<li><a href="/core-developers/">Core Developers Guide</a></li>
<li><a href="/tag-developers/">Tag Developers Guide</a></li>
<li><a href="/maven-archetypes/">Maven Archetypes</a></li>
<li><a href="/plugins/">Plugins</a></li>
<li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li>
<li><a href="/tag-developers/tag-reference.html">Tag reference</a></li>
<li><a href="https://cwiki.apache.org/confluence/display/WW/FAQs">FAQs</a></li>
<li><a href="http://cwiki.apache.org/S2PLUGINS/home.html">Plugin registry</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
Contributing<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/youatstruts.html">You at Struts</a></li>
<li><a href="/helping.html">How to Help FAQ</a></li>
<li><a href="/dev-mail.html">Development Lists</a></li>
<li><a href="/contributors/">Contributors Guide</a></li>
<li class="divider"></li>
<li><a href="/submitting-patches.html">Submitting patches</a></li>
<li><a href="/builds.html">Source Code and Builds</a></li>
<li><a href="/coding-standards.html">Coding standards</a></li>
<li><a href="https://cwiki.apache.org/confluence/display/WW/Contributors+Guide">Contributors Guide</a></li>
<li class="divider"></li>
<li><a href="/release-guidelines.html">Release Guidelines</a></li>
<li><a href="/bylaws.html">PMC Charter</a></li>
<li><a href="/volunteers.html">Volunteers</a></li>
<li><a href="https://gitbox.apache.org/repos/asf?p=struts.git">Source Repository</a></li>
<li><a href="/updating-website.html">Updating the website</a></li>
</ul>
</li>
<li class="apache"><a href="http://www.apache.org/"><img src="/img/apache.png"></a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<article class="container">
<section class="col-md-12">
<a href="index.html" title="back to Core Developers Guide"><< back to Core Developers Guide</a>
<a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/core-developers/ajax.md" title="Edit this page on GitHub">Edit on GitHub</a>
<h1 id="ajax">AJAX</h1>
<p>AJAX is an acronym for Asynchronous JavaScript and XML. Essentially, a JavaScript can make a HTTP request and update
portions of a page directly, without going through a conventional POST or GET and refreshing the entire page.
Better yet, a page can contain several JavaScripts making simultaneous (asynchronous) requests.</p>
<p>The key point is that when a script makes an “Ajax request” (XHR), the server doesn’t know it came from a script,
and handles it like any other request. One reason Ajax is so successful is that it works just fine with existing server
technologies, including Struts.</p>
<p>It’s not the Ajax request that is different, but the Ajax response. Instead of returning an entire page for the browser
to display (or redisplay), an Ajax response will just return a portion of a page. The response can take the form of XML,
or HTML, or plain text, another script, or whatever else the calling script may want.</p>
<p>Both Struts 1 and Struts 2 can return any type of response. We are not limited to forwarding to a server page.
In Struts 1, you can just do something like:</p>
<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">response</span><span class="o">.</span><span class="na">setContentType</span><span class="o">(</span><span class="s">"text/html"</span><span class="o">);</span>
<span class="n">PrintWriter</span> <span class="n">out</span> <span class="o">=</span> <span class="n">response</span><span class="o">.</span><span class="na">getWriter</span><span class="o">();</span>
<span class="n">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="s">"Hello World! This is an AJAX response from a Struts Action."</span><span class="o">);</span>
<span class="n">out</span><span class="o">.</span><span class="na">flush</span><span class="o">();</span>
<span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
</code></pre></div></div>
<p>In Struts 2, we can do the same thing with a Stream result.</p>
<blockquote>
<p>Using a Struts 2 plugin (e.g., <em>JSON plugin</em> , jQuery plugin, etc.) is, in general, preferred to writing the response
directly from within an action. See sections following this for further details.</p>
</blockquote>
<p><strong>Struts 2 Stream result Action</strong></p>
<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">package</span> <span class="n">actions</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">java.io.InputStream</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">java.io.StringBufferInputStream</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">com.opensymphony.xwork2.ActionSupport</span><span class="o">;</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">TextResult</span> <span class="kd">extends</span> <span class="n">ActionSupport</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">InputStream</span> <span class="n">inputStream</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">InputStream</span> <span class="nf">getInputStream</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">inputStream</span><span class="o">;</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="n">String</span> <span class="nf">execute</span><span class="o">()</span> <span class="kd">throws</span> <span class="n">Exception</span> <span class="o">{</span>
<span class="n">inputStream</span> <span class="o">=</span> <span class="k">new</span> <span class="n">ByteArrayInputStream</span><span class="o">(</span><span class="s">"Hello World! This is a text string response from a Struts 2 Action."</span><span class="o">.</span><span class="na">getBytes</span><span class="o">(</span><span class="s">"UTF-8"</span><span class="o">));</span>
<span class="k">return</span> <span class="n">SUCCESS</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre></div></div>
<p><strong>Struts 2 Configuring the TextResult Action</strong></p>
<div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;action</span> <span class="na">name=</span><span class="s">"text-result"</span> <span class="na">class=</span><span class="s">"actions.TextResult"</span><span class="nt">&gt;</span>
<span class="nt">&lt;result</span> <span class="na">type=</span><span class="s">"stream"</span><span class="nt">&gt;</span>
<span class="nt">&lt;param</span> <span class="na">name=</span><span class="s">"contentType"</span><span class="nt">&gt;</span>text/html<span class="nt">&lt;/param&gt;</span>
<span class="nt">&lt;param</span> <span class="na">name=</span><span class="s">"inputName"</span><span class="nt">&gt;</span>inputStream<span class="nt">&lt;/param&gt;</span>
<span class="nt">&lt;/result&gt;</span>
<span class="nt">&lt;/action&gt;</span>
</code></pre></div></div>
<blockquote>
<p>Struts 2 can also return a JSON (JavaScript Object Notation) response, using a <a href="http://cwiki.apache.org/S2PLUGINS/json-plugin.html">plugin</a>.</p>
</blockquote>
<p>On the client side, there are two basic strategies, which can be mixed and matched.</p>
<p>First, you can use some type of JSP tag. Here, you don’t have to know very much at all about Ajax or JavaScript.
The taglib does all the work, and you just have to figure out how to use the taglib. The standard Struts 2 taglib
includes several <em>Ajax JSP tags</em> , and many third-party libraries are available, including:</p>
<ul>
<li><a href="http://ajaxtags.sourceforge.net/">Ajax Tags</a></li>
<li><a href="http://javawebparts.sourceforge.net/">AjaxParts Taglib</a></li>
<li><a href="http://servletsuite.blogspot.com/2006/06/coldtags-suite-ajax-edition.html">ColdTags Suite</a></li>
<li><a href="http://www.jenkov.com/prizetags/introduction.tmpl">Prize Tags</a></li>
<li><a href="http://json-taglib.sourceforge.net/">JSON-taglib</a></li>
</ul>
<p>Alternatively, you can use a plain-old Ajax widget on a plain-old HTML page, using libraries like
<a href="http://dojotoolkit.org/">Dojo</a>, <a href="http://jquery.com/">JQuery</a>, or <a href="http://developer.yahoo.com/yui/">YUI</a>,
and the StreamResult or the <a href="http://cwiki.apache.org/S2PLUGINS/json-plugin.html">JSON Plugin</a>.
Here, the sky’s the limit, but you actually have to learn something about JavaScript as a language.</p>
<h2 id="ajax-plugins">Ajax Plugins</h2>
<p>While Struts works fine with Ajax out-of-the-box, for added value, several Ajax-centric plugins are available.</p>
<h3 id="ajax-tag-plugins">Ajax Tag Plugins</h3>
<ul>
<li><strong>jQuery</strong> - The <a href="https://github.com/struts-community-plugins/struts2-jquery">jQuery Plugin</a> provides ajax
functionality and UI Widgets an JavaScript Grid based on the jQuery javascript framework.</li>
<li><strong>Ajax Parts</strong> - The <a href="http://code.google.com/p/struts2ajaxpartstaglibplugin/">AjaxParts Taglib (APT)</a> is a component
of the Java Web Parts (JWP) project (<a href="http://javawebparts.sourceforge.net">http://javawebparts.sourceforge.net</a>) that
allows for 100% declarative (read: no Javascript coding required!) AJAX functionality within a Java-based webapp.</li>
<li><strong>Dojo</strong> - The <em>Ajax Tags Dojo Plugin</em> was represented as a theme for Struts 2.0. For Struts 2.1, the Dojo tags are
bundled as a plugin until version 2.3.x. Since version 2.5 this plugin is not part of th Struts2 distribution anymore. </li>
<li><strong>YUI</strong> - The <a href="https://code.google.com/p/struts2yuiplugin/">Yahoo User Interface (YUI) Plugin</a> has only a few tags
are available so far, but the YUI tags tend to be easier to use than the Dojo versions.</li>
</ul>
<h3 id="other-ajax-plugins">Other Ajax Plugins</h3>
<ul>
<li><strong>Ajax File Upload</strong> - With the <a href="http://www.davidjc.com/ajaxfileupload/demo!input.action">Ajax File Upload Plugin</a>
we can upload a file to the server and asynchronously monitor its progress.</li>
<li><strong>GWT</strong> - The <a href="https://code.google.com/p/struts2gwtplugin/">Google Web Toolkit Plugin</a> exposes Struts 2 actions to
the GWT RPC mechanism.</li>
<li><strong>JSON</strong> - The <em>JSON Plugin</em> serializes Actions properties into JSON, making it easy to respond to JavaScript requests.</li>
</ul>
<p>See the <a href="http://cwiki.apache.org/S2PLUGINS/home.html">Struts Plugin Repository</a> for a complete list of Struts 2 plugins.</p>
<h2 id="ajax-results-with-jsp">Ajax Results with JSP</h2>
<p>While server pages are most often used to generate HTML, we can use server pages to create other types of data streams.
Here’s an example:</p>
<p><strong>book.jsp</strong></p>
<pre><code class="language-jsp">&lt;%@ page import="java.util.Iterator,
java.util.List,
com.esolaria.dojoex.Book,
com.esolaria.dojoex.BookManager" %&gt;
&lt;%
String bookIdStr = request.getParameter("bookId");
int bookId = (bookIdStr == null || "".equals(bookIdStr.trim()))
? 0 : Integer.parseInt(bookIdStr);
Book book = BookManager.getBook(bookId);
if (book != null) {
out.println(book.toJSONString());
System.out.println("itis: " + book.toJSONString());
}
%&gt;
</code></pre>
<p>In the code example, we use <code class="highlighter-rouge">System.out.println</code> to return a JSON data stream as the response. For more about this
technique, see the article <a href="http://today.java.net/pub/a/today/2006/04/27/building-ajax-with-dojo-and-json.html">Using Dojo and JSON to Build Ajax Applications</a>.</p>
</section>
</article>
<footer class="container">
<div class="col-md-12">
Copyright &copy; 2000-2018 <a href="http://www.apache.org/">The Apache Software Foundation </a>.
All Rights Reserved.
</div>
<div class="col-md-12">
Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are
trademarks of The Apache Software Foundation.
</div>
<div class="col-md-12">Logo and website design donated by <a href="https://softwaremill.com/">SoftwareMill</a>.</div>
</footer>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");</script>
<script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>