IONCANNON » javascript

Range Requests with Ajax

carson — Tue, 22 Nov 2011 16:03:58 +0000

I ran across something the other day that made wonder about doing range requests using ajax. For some reason it wasn't obvious at first if this would be easy but as it turns out it is.

If you aren't familiar with range requests head over to the HTTP RFC and check out the range header. Your web server needs to support range requests for this to be useful but most do so that shouldn't be a huge issue. As a bonus you will find that some CDNs support range request as well (Amazon S3 for example).

To show how this works I'll start off by getting the offsets of a text file, then use curl to show the actual request and then put it into an ajax request. Even though I'm using a text file the same thing could be done with a binary file as well. Here are the contents of the file I've called range-test.txt:

First part of the file.

More text here.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Some text after Lorem Ipsum.

End of the file.

Using egrep we can get the offset of each line pretty easy like so:

> egrep -b "\r|\n" range-test.txt
0:First part of the file.
25:More text here.
42:Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
618:Some text after Lorem Ipsum.
660:End of the file.

Quickly verify that the range looks right in isolation using hexdump:

> hexdump -c -s 618 -n 30 range-test.txt
000026a   S   o   m   e       t   e   x   t       a   f   t   e   r
000027a   L   o   r   e   m       I   p   s   u   m   .  \n  \n
0000288

Now we have a sample range so put the text file on your web server and use curl to send the range request headers (note that the hexdump takes an offset and count of bytes while the range header takes an start and end offset):

> curl -H 'Range:bytes=618-647' http://localhost/range-test.txt
Some text after Lorem Ipsum.

Now that it makes sense how this range is used to make a request for part of a file we can move on to doing it with an ajax request. I'm going to use jQuery's ajax function to make this really simple. It has a feature that lets you set headers really easily. The following is all you need:

And that is all there is to it. This could be useful for all kinds of things like displaying just a section of a large log file at a time. This might also be useful in a situation where you want to stream binary data back to the browser a chunk at a time.

Using the Google Closure Compiler in Java

carson — Tue, 08 Mar 2011 14:29:55 +0000

I recently had a chance to try out Google's closure compiler. The closure compiler is similar to the YUI compressor except that along with minimizing it may rewrite the JavaScript. If you want to understand more about what it does start at the overview documentation and then go from there.

What I needed was a way to use the closure compiler in an Ant task. The Ant task that comes with the library is good but there wasn't a way for me to integrate it into an existing system that wasn't going to change. After looking around for some example code and not finding any I went into the library's Ant task and figured out how to wire it all up myself.

It isn't that hard to use the compiler library in your own Java code but without a simple example it takes some work to figure out what is needed and what isn't. The following code is just about as bare bones as you can get. It takes a number of JavaScript files and compile them using the medium setting, more about the choice of settings after the code:

import com.google.javascript.jscomp.*;

import java.io.FileWriter;
import java.util.List;
import java.util.ArrayList;
import java.util.logging.Level;

public class Test
{
  public static void main(String[] args) throws Exception
  {
    // These are external JavaScript files you reference but don't want changed
    String externalJavascriptResources[] = {
        "jquery.js",
        "jqueryui.js"
    };
    // These are the files you want optimized
    String primaryJavascriptToCompile[] = {
        "somejavascript.js",
        "otherjavascript.js"
    };
    // This is where the optimized code will end up
    String outputFilename = "combined.min.js";

    com.google.javascript.jscomp.Compiler.setLoggingLevel(Level.INFO);
    com.google.javascript.jscomp.Compiler compiler = new com.google.javascript.jscomp.Compiler();

    CompilerOptions options = new CompilerOptions();
    CompilationLevel.SIMPLE_OPTIMIZATIONS.setOptionsForCompilationLevel(options);

    WarningLevel.VERBOSE.setOptionsForWarningLevel(options);

    List externalJavascriptFiles = new ArrayList();
    for (String filename : externalJavascriptResources)
    {
      externalJavascriptFiles.add(JSSourceFile.fromFile(filename));
    }

    List primaryJavascriptFiles = new ArrayList();
    for (String filename : primaryJavascriptToCompile)
    {
      primaryJavascriptFiles.add(JSSourceFile.fromFile(filename));
    }

    compiler.compile(externalJavascriptFiles, primaryJavascriptFiles, options);

    for (JSError message : compiler.getWarnings())
    {
      System.err.println("Warning message: " + message.toString());
    }

    for (JSError message : compiler.getErrors())
    {
      System.err.println("Error message: " + message.toString());
    }

    FileWriter outputFile = new FileWriter(outputFilename);
    outputFile.write(compiler.toSource());
    outputFile.close();
  }
}

The above code is doing a number of things:

It takes both external resources you don't want optimized as well as resources you do want optimized that refer to those external resources. You may not need to list external resources depending on what level of optimization you use.
It combines all the input files that are not external into one output file.
It compiles the javascript code given to it using the SIMPLE_OPTIMIZATIONS setting.
It lists any warnings or errors it found while compiling the code.

One of the nice side effects of using the closure compiler is that because it compiles the code it can alert you to errors or potential issues using warnings.

What is listed above is using the middle of the road optimizations. There is a level above SIMPLE_OPTIMIZATIONS that you can set by changing that line in the above code to:

  CompilationLevel.ADVANCED_OPTIMIZATIONS.setOptionsForCompilationLevel(options);

Be aware that the advanced optimizations will do things, renaming your variables and functions to name two, that can break your code. The compiler gives you a way of alerting it to things you don't want changed using externs and exports. Before using the advanced option you should read the advanced options tutorial.

If you do not like seeing all the steps the compiler takes you can set the logging level to QUIET by changing the WarningLevel line to the following:

  WarningLevel.QUIET.setOptionsForWarningLevel(options);

One last note about the compiler is that the closure inspector is a Firebug plugin that will let you see what the original line of code looked like before it was compiled. This can help a lot when something goes wrong.

Using Modernizr – Simple Guide and Examples

carson — Fri, 19 Nov 2010 02:18:07 +0000

Modernizr is a Javascript library that detects the presence of browser functionality. This makes life a lot easier when using more modern features on your website by encapsulating all the feature tests into a library you don't have to worry about. You can use Modernizr either in your own Javascript or you can use the CSS classes it sets on the HTML element.

To get a full list of the browser functionality that is tested check out the Modernizr docs. If the feature you need a test for isn't available it is fairly easy to add new tests as well.

I'll start with an example that shows how to use the feature tests in Javascript. After Modernizr runs it populates the "Modernizr" structure with boolean values for each functionality test. This example waits for the page to load and then simply populates a DIV with text depending on your browsers support for web sockets:

Modernizr - Javascript Example

See this code in action: Modernizr Javascript example.

You can try this example with an older version of Firefox and the text should indicate that there is no support for web sockets. Try again with a newer version of Google's Chrome browser and the page will indicate that there is support for web sockets.

The next example shows how to use the Modernizr CSS support. The key here is to know that the library will inject classes into the HTML tag. Those classes correspond to the functionality tests and are listed in the documentation. I am again testing for web sockets support and Modernizr will set the HTML class to either no-websockets or websockets and display one of two DIVs:



  
    Modernizr - CSS Example

    

    
  
  

    
      Your browser does not support WebSockets.
    

    
      Your browser supports WebSockets.

See this code in action: Modernizr CSS example.

For a much more detailed CSS example check out this A List Apart article.

If you need the information Modernizr assembles outside of the browser check out Modernizr on the server.

While I was putting together the two demo pages for this I discovered a new service much like the Google Javascript library CDN but with more Javascript libraries. It is called Cached Commons and it uses Github's CDN.

Good article on keeping javascript maintainable

carson — Mon, 17 Jul 2006 18:53:45 +0000

Vitamin has a good article today on the importance of maintainable javascript. 95% of what the article covers is applicable to any code. The important parts of the article cover javascript specific things like: object literals, namespaces and where to go when you want to compress your javascript to save bandwidth/make it download faster. They recommend packer and JSMIN as two javascript compressors but I think JSMIN is probably a better bet mainly because you can run it from the command line and make it part of a build script.

Easier scrolling images with Yahoo UI

carson — Mon, 03 Jul 2006 23:15:54 +0000

This is a great article about the yahoo ui tools. I mention it mainly because they have a nice scrolling widget a lot like what I put together as an example of the things you can do with script.aculo.us (see Smooth Scrolling Image List).

A link to the demo: Sliding demo

The entire article: 15 things you can do with yahoo ui

Tags: yahoo ui, script.aculo.us, javascript

Some interesting and useful AJAX/Javascript code

carson — Fri, 23 Jun 2006 15:10:57 +0000

I like seeing more and more uses of prototype. I'm not sure if the big guys will win out with their UI toolkits (Yahoo UI/GWT) or if it will always feel better to put things together by hand. Either way it is good to understand how this stuff works. This is an edit in place example that is similar to what you see on flickr.

I've seen something like this a number of times when I've visited sites. They want your feedback on something or other while you are browsing. It is a little floating plus feedback sign that hangs out in the lower right hand corner. Check it out.

Browsing digg I noticed an article on "unobtrusive sidenotes" and found that the idea is pretty cool: The announcement and code. They are done with javascript so you can turn them on and off on the fly.

Tags: javascript, ajax, sidenote, ajax feedback, prototype

AJAX file upload progress for Java using commons fileupload and prototype

carson — Mon, 03 Apr 2006 02:15:15 +0000

This has been done before with PHP (AJAX upload progress meter for PHP) etc but I needed something a little different because I wanted to upload a file and then have it loaded into a database. I looked around and found that someone had already made something that used the commons file upload package to do the upload part (AJAX Upload progress monitor for Commons-FileUpload Example). It wasn't exactly what I was looking for but it a good start.

To understand the way this works I think it is easiest to break it down into parts:

A file upload extention that counts bytes as they are uploaded
An interface that monitors the progress of something running on the server
AJAX to pull the monitoring into the current screen

Counting bytes when files are uploaded

This was taken from the example listed above. It extends and wraps parts of the commons File Upload classes so that you can count the bytes as they are uploaded to the server. You can download the source with build file or the binary. You will also need the commons file upload, commons io and commons logging. If you download the source put the commons jars in the lib directory before building.

The code is fairly simple to follow. MonitoredDiskFileItemFactory replaces DiskFileItemFactory and the construction of a MonitoredDiskFileItemFactory takes a OutputStreamListener that will be passed on down the chain. The new factory creates MonitoredDiskFileItems instead of DiskFileItems for each file uploaded. When the file needs to be written to disk a MonitoredOutputStream is given back instead of a normal OutputStream. The MonitoredOutputStream calls the OutputStreamListener methods as the bytes are written and with that you now have a way to monitor the byte count as the file is created on the server.

Now to test this all out we can just have an OutputStreamListener that writes its progress out to a logfile or something.

publicclass FileUploadListener implements OutputStreamListener
{
privatelong totalFileSize;
privatelong currentFileRead;
  public FileUploadListener(long totalFileSize)

  {

    this.totalFileSize = totalFileSize;

    this.currentFileRead = 0;

  }
  public void start()

  {

    log.debug("Upload started. Total file size: " + totalFileSize);

  }
  public void bytesRead(int byteCount)

  {

    log.debug("Read bytes. Currently " + byteCount + " out of " + totalFileSize + " bytes.");

    currentFileRead+=byteCount;

  }
  public void error(String error)

  {

    log.debug("Hit an error: " + error);

  }
  public void done()

  {

    log.debug("Upload done.");

  }
  public long getTotalRead()

  {

    return currentFileRead;

  }
  public long getTotalSize()

  {

    return totalFileSize;

  }

}

Now we try it out. You can put this in a servlet or jsp so I'm only going to list the parts that matter.

FileUploadListener listener = new FileUploadListener(request.getContentLength());

  session.setAttribute("LISTENER", listener);

  FileItemFactory factory = new MonitoredDiskFileItemFactory(listener);

  ServletFileUpload upload = new ServletFileUpload(factory);

  List items = upload.parseRequest(request);

  for (Iterator i = items.iterator(); i.hasNext();)

  {

    FileItem fileItem = (FileItem) i.next();

    if (!fileItem.isFormField())

    {

       // code here to process the file

     }

   }

I'm going to assume you can find the correct way to do the actual form upload part.

Note: One issue that you will face at some point is where the upload post goes to becuase when you get to the AJAXy part of things you want the post to stay on the same page. You can use a hidden iframe and the form's "target" parameter to do this (I have an example later). This is one thing the Java examples I found didn't have but the PHP examples did and I'm not sure exactly how the Java examples work without it.

Monitoring progress on the server

The next step is to monitor the progress of the upload on the server. What you are monitoring on the server doesn't even need to be the upload. For the work I was doing the upload goes fairly quickly but what happens to the file after the upload takes a little longer. I wanted to monitor both and that is one reason I think it helps to break this up into parts because you aren't limited to just monitoring file uploads.

The main thing to keep in mind here is that the application server is multithreaded and you can make more than one request to the server at the same time. You probably know that you can open a tab in firefox or another window in ie and use the same session from the current webapp you are using. Knowing that you can create a page that monitors the status of things as they are running on the server.

From the example above you could toss the listener into the users session. Then insead of logging you just add a couple variables to keep track of the number of bytes that have been uploaded. Then create a simple jsp that pulls the Listener out of the session and dumps its data to a page. Open two windows, one to the upload page and another one to the status page. Start the upload and then start refreshing the status. You should see that the values change as the file is uploaded.

<%@page%>

<%

  FileUploadListener listener = (FileUploadListener)session.getAttribute("LISTENER");

%>

Total size: <%=listener.getTotalSize()%><br/>

Read count: <%=listener.getTotalRead()%><br/>

Of course you will probably want more than just the total size and bytes read as well as more formating like a little progress bar or something but I'll leave that up to you.

AJAX integration with prototype

You have the major parts to the upload progress done and now all you need is the AJAX part. To do this I chose to use prototype because it cuts right to what you want to do. One call is all you need to use: Ajax.PeriodicalUpdater.

The Ajax.PeriodicalUpdater call will update a container (in my case a div) on a set interval. Here is an example of how to have it update a div with an id of "status" every second.

new Ajax.PeriodicalUpdater(

                                'status',

                                'status.jsp',

                                {asynchronous:true, frequency:1, method:'get'});

The first argument is the id of the div, the second is the jsp that contains the data to stick into the div every second and the 3rd arguement is a set of options. There are more options availabe if you need them.

You would want to kick the update off whenever the form is posted. When the post is complete the iframe used as a place to post to will load with the results of the servlet or jsp that you posted to. If you return some javascript as a result for the iframe you will be able to create a final "finished" message on the page to let the user know the upload has completed and stop the processing of the AJAX updater.

So there you have it. The basics of setting up an upload progress bar using java and AJAX. I have left out a good bit but you should have enough to at least get you started.

By request I have created a simple example that pulls everything together. The source contains everything you need to create a war file including all source and an ant build file.

Example Source

Tags: java, ajax, file upload, prototype, javascript

Smooth scrolling image list

carson — Thu, 16 Feb 2006 07:26:03 +0000

I had someone ask me about fitting more images in a small area and the way flickr does their image scrolling came to mind. I wanted to see how hard it was to do and as it turns out it isn't hard to do at all thanks to script.aculo.us.

I'm making this as simple as I can to illustrate just how nice the new tools like script.aculo.us are.

Step 1. You need a box and some images. You will also need to know the size of the images or at least the size of the largest one. In an attempt to keep this simple I'm going to assume all the images are the same size.

<div id="imageBox">

  <div id="imageBoxInside">

    <img src="http://www.ioncannon.net/examples/slide/images/turtle_sm_1.jpg" />

    <img src="http://www.ioncannon.net/examples/slide/images/elephants_sm_1.jpg" />

    <img src="http://www.ioncannon.net/examples/slide/images/turtle_sm_2.jpg" />

    <img src="http://www.ioncannon.net/examples/slide/images/elephants_sm_2.jpg" />

    <img src="http://www.ioncannon.net/examples/slide/mages/turtle_sm_3.jpg" />

    <img src="http://www.ioncannon.net/examples/slide/images/elephants_sm_3.jpg" />

    <img src="http://www.ioncannon.net/examples/slide/images/turtle_sm_4.jpg" />

    <img src="http://www.ioncannon.net/examples/slide/images/elephants_sm_4.jpg" />

    <br/>

  </div>

</div>

Notice from this code that we have an outer box and an inner box. We will next want to make the outer box smaller than the inner box so that only a few of the images can be seen at one time.

Step 2. To hide the extra images we give the outer box a set width, in this case I want to show only 2 images at a time and each image is 180px wide so I make the outer box 360px wide. Notice that the overflow is hidden. The hidden overflow is what keeps the images that are in the inner box but not within the outer box's width hidden.

I'm using floats to lay the images out one next to the other. Because of this we need to give the inside box a large width so that it will not wrap the floated images.