JSP and Javascript

Can anyone psuedo a solution to my problem, or just give discussion to help me find a solution? I've always found that using JSP to populate HTML is a very awkward solution to creating pages, and if you want to convert to AJAX almost always results in needing to rewrite the whole "component" or whatever it is your displaying. I need a story viewer, and I'd like to have the actual work of populating the story viewer to be written in javascript, with one entry point, so that I can either bring in the information when the page loads, or refresh it using ajax, or use the component standalone on another page if I wish.

SERVER:

A server can configure the kinds of new stories available to a page, and the controller sends back a model populated with stories to display:

@RequestMapping(value="/news/{category}")
public String news(@PathVariable("category") String category, Model m) {

    m.addAttribute("featuredStory", newsService.getFeaturedStoryForCategory(category));
    m.addAttribute("otherRelatedStories", newsService.getStoriesByCategory(category, 3/*num of stories*/));
    return newsService.getViewNameForCategory(category);
}

VIEW:

<div>
<h1>Story Title Would Go Here</h1>
<div>maybe some text description here</div>
<img src="my image source would go here"/>
</div>

so that's my basic setup, but now I need to get information from my servers model into components that look roughly like that, I've had several different thoughts, but I can't seem to get any momentum going with them, one example is that I'm thinking at the of the page in the I could have something like this:

<javascript>
var populateFeaturedStoryWithJson( json ) {
   ...
   $(#featuredStoryId).insert(json.getStoryTitle);
   ...
}
</javascript>

but who would be responsible for making that call? how do I get the JSON from the server model? I don't want to be bound to using ajax requests, I'd just like to have the optio开发者_开发技巧n to have the content come from different sources, so that the only code that changes is that of fetching the story content, not displaying the content in my component

I know this question is a little broad, but I think that it would really pay off if I could avoid the common solution of something like:

<h1>${featureStory.title}</h1>

Since I've always found that to be the most awkward and un-object-oriented portion of the Spring-MVC way of doing things

edit: i'm open to other ideas than just javascript, but what I really want is a view component that can get it's data from different places where literally the only things that changes is the code that takes data from that source and converts it to the views data model

Using JSP here is standard, you could use JSP to intialize Javascript variables on page load if that's what you're looking for

I would assume that the page itself would be responsible for populating the data. I don't know why you don't like using EL; it fits in to the MVC pattern pretty well. To minimize the number of requests you make, you can use EL to populate the page initially. After that, if you want to change the content dynamically, you can use JSON.

What you need is a view that specifically spits out JSON so that you can access it like /something.json.

This forum post here talks about implementing what I talked about. Also this blog post seems to have good information (applies to Spring 3).

UPDATE

Well, at some point you're going to have to get the data from the server into your view layer. EL is mainly used to create custom tags and to inject values from the model into your view. So the rendering is still up to you. If you really want to make Javascript "components", you could create custom tags that contain the EL and the Javascript necessary to render them. That way, your pages won't contain any EL.

Also, if you're looking for a component-based approach have you looked at JSF? Of course, it uses some EL as well, but provides direct binding between the component and the bean. This page has a bunch of good tutorials (for 1.x and 2.x).