Apr 27, 2011

File upload and Progress events with HTML5 XmlHttpRequest Level 2

The XmlHttpRequest Level 2 specification adds several enhancements to the XmlHttpRequest object. Last week I had blogged about cross-origin-requests and how it is different from Flash\Silverlight's approach.  With Level 2 specification one can upload the file to the server by passing the file object to the send method. In this post I'll try to explore uploading file using XmlHttpRequest 2 in conjunction with the progress events. I'll also provide a description on the new HTML5 tag - progress which can be updated while the file is being uploaded to the server. And of course, some ColdFusion code that will show how the file is accepted and stored on the server directory.

Apr 21, 2011

HTML5 XmlHttpRequest 2 v/s Flash\Silverlight approach to cross-origin requests

A few days back I had posted on XmlHttpRequest Level 2, describing how cross-origin requests can be achieved. A few folks on my team asked me how different it is from Flash\Silverlight's approach to achieve cross domain request\response with crossdomain.xml. The approach that these plugins take to send a request and receive a response is completely different from that of XmlHttpRequest's approach.

Apr 18, 2011

HTML5 XmlHttpRequest 2 - Cross origin request

HTML5 specification has introduced a few enhancements for XmlHttpRequest object and one of them is the ability to make cross-origin request. That is, a host can send a XmlHttpRequest request to another host and receive a response in return. On the server-side, a check can be made to see whether the request can be accepted from the given origin. In this post I'll try to explain how this can be done using ColdFusion.

Client side:

On the client side, a XmlHttpRequest object is created and then a GET request is made to the remote server.

 var client = new XMLHttpRequest();  
client.onreadystatechange = readyStateChangeHandler;  
client.open("GET","http://{remote-address}/{path-to-file}.cfm",true);  
client.send();       

For example, say example.com wants to get a response from another domain say abc.com, then as observed from the above code the request would look like:


client.open("GET","http://abc.com/dir1/foo.cfm",true);  

Server side:

When a request is sent to the server, the request header would contain a key ORIGIN whose value will be the domain name from which the request was made. In this case the value would be example.com. The server side code can then perform a check to see whether the request origin belongs to the list of origins from which the request can be accepted.

 <cfif structKeyExists(getHTTPRequestData().headers,"origin") >   
    <cfset origin = getHTTPRequestData().headers.origin />   
    <cfif origin eq "http://example.com">   
      <cfheader name="Access-Control-Allow-Origin"   
         value="http://example.com">   
      <cfoutput>#timeFormat(now(),"medium")#</cfoutput>   
    </cfif>   
 </cfif>   
As seen from the above code, the response header ACCESS-CONTROL-ALLOW-ORIGIN is set to allow cross-origin requests from example.com. This now enables requests from example.com to be served from abc.com. 



Apr 7, 2011

Navigation enhancements in ColdFusion Builder 2.0

Do you spend a lot of  time scrolling large files, just to find out the next function definition in place or to figure out the end\start of a tag? If your answer is YES, then why don’t you try the Navigation enhancements in ColdFusion Builder 2.0?
ColdFusion Builder comes to you with three types of Navigation enhancements:
-         Code Navigation
-         Smart Tab Navigation
-         Jumping to matching tag.

Code Navigation

Code Navigation is all about navigating to the next function definition in place. Imagine a CFC containing various cffunction tags. It is a time-consuming task to keep scrolling and keep an eye on the file to get to the next cffunction tag. ColdFusion Builder 2.0 provides a shortcut key CTRL + SHIFT + DOWN to navigate to the next function definition. And to navigate to the previous function definition, you can use the shortcut CTRL + SHIFT + UP.

Code Navigation works in conditional statements as well. Consider an example of a cfif-cfelseif-cfelse conditional statement. If the cursor is placed, say at the start tag and if this particular conditional statement has several conditions in it, then on pressing the shortcut key, the next condition in place is highlighted. That is, on placing the cursor at the start of the cfif tag and pressing the shortcut CTRL + SHIFT + DOWN, the next cfelseif condition is highlighted.

Smart Tab Navigation

Smart Tab navigation is about navigating to the next attribute value. The shortcut key for this is CTRL + ]. On pressing the shortcut key, the next attribute value is highlighted. This works in script style code as well, wherein the function arguments are also highlighted.

Jump to matching tag

If you have several nested cfif tags, it becomes very difficult to find out the end of a particular cfif tag. ColdFusion Builder 2.0 provides the shortcut CTRL + ALT + M, which shifts the cursor position to end of the tag. If the cursor is placed at the end tag, then on pressing the same shortcut key the cursor position shifts to the start tag.

Summary:
  • Code Navigation - Navigate to the next function definition or the next condition. Shortcut- CTRL + SHIFT + DOWN \ UP.
  • Smart Tab Navigation - Navigate to the next attribute value or arguments (cfscript). Shortcut- CTRL + ] \ [.
  • Jump to matching tag - Jump to the start or end tag. Shortcut- CTRL + ALT + M.