What is a Mashup?

A mashup is a web application hybrid. Mashups take information from more than one source and combine it into one application. The combination of these multiple applications makes the mashup more useful collectively than the individual applications are themselves.

A common example of a mashup is a website that uses Google Maps within its site to show visually where an address exists. So there is a web page with an address on it that becomes much more useful when another application, Google Maps, is combined with it to provide further information.

For example, see below an example from a real estate site that uses Google Maps to show the locations of local neighborhoods.

Jesse James Garrett: The inventor of the term Ajax

The first person to ever use the word Ajax to refer to the package of technologies that comprise the transferring of XML and other data to and from web servers via HTTP was Jesse James Garrett. Garrett first used the term in February 2005 in an article he wrote for his company, Adaptive Path, titled ‘Ajax: A New Approach to Web Applications.’

In this article, he references CSS, XHTML, DOM, XSLT, XML, XmlHttpRequest and JavaScript as the technologies that define Ajax. Needless to say, this is an incomparable piece in the history of the Internet. That, coupled with the fact that his name is ‘Jesse James’, makes Mr. Garrett the man.

JavaScript XHR: Acronym for XmlHttpRequest

The acronym XHR stands for XmlHttpRequest, which is an API used by JavaScript to transfer XML and other data via HTTP to and from a web server. The XmlHttpRequest API is core to Ajax applications and primarily utilized to build dynamic, responsive Internet applications.

Related articles:
Creating an XmlHttpRequest object for Ajax
XmlHttpRequest open Method
XmlHttpRequest send Method
XmlHttpRequest onreadystatechange
XmlHttpRequest readyState values
XmlHttpRequest status Property values
Getting Data from a Server for Ajax
Simple Ajax Example Tutorial with ColdFusion
XmlHttpRequest responseXML Property
XmlHttpRequest responseText Property
XmlHttpRequest: Difference Between Firefox and Internet Explorer

XmlHttpRequest Difference Between Firefox and Internet Explorer

The XMLHttpRequest object is initialized differently in earlier versions of Internet Explorer as compared to Firefox.

As of Internet Explorer 7, an XMLHttpRequest be can be initialized simply with:

new XMLHttpRequest();

The preceding always worked with Firefox. In earlier versions of Internet Explorer, however, the libraries differed on how to initialize XMLHttpRequest. For this reason, both of the following calls have to be attempted as well:

new ActiveXObject('Msxml2.XMLHTTP');
new ActiveXObject('Microsoft.XMLHTTP');

This should be done as a try/catch block, with the call that will work in Firefox and Internet Explorer 7 coming first as it is the most likely to succeed.

try {
  var objXHR = new XMLHttpRequest();
} catch (e) {
try {
  var objXHR = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
  var objXHR = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
  document.write('XMLHttpRequest not supported'); }
}
}

Related Articles:
Creating an XMLHttpRequest Object for Ajax
JavaScript Try Catch Finally

JavaScript – Beginning Interview Questions

In doing numerous technical interviews of Internet Application Developers, I’ve discovered that most of these candidates consider their JavaScript skills to be at an “expert” level or they feel their JavaScript skills are “very strong.” In the course of the interview, however, it is often discovered that the candidates only have a cursory understanding of the JavaScript programming language. Based on my experience, I have written 20 questions that someone claiming to know JavaScript should be able to answer:

What have you used JavaScript for?
Typical answers include form validations, user action confirmations, updating an Internet page dynamically and other such answers. I usually ask this question first just to get the candidate talking about JavaScript and see if they have in fact used JavaScript for something.

How do you access an element in an HTML document with JavaScript?
Give the element an ID attribute and then use JavaScript’s getElementById() function to access that element.

How do you determine how many characters are in a JavaScript string?
With the length property of the JavaScript string object.

What datatypes are supported by JavaScript?
Number, String, Undefined, null, Boolean. At a minimum, the candidate should identify Number and String.

How do you create a date in JavaScript?
With the Date object: new Date()

Where does JavaScript date object pull it’s date from?
From the client machine.

What does the isNaN function do?
Returns true is the value provided is not a numeric value and false if the number provided is a numeric value.

What is the difference between JavaScript and Java?
They are completely different languages.

How do you comment JavaScript code?
For single-line comments, begin the line with consecutive forward slashes (//). To comment a block of code, wrap it with /* code */.

What is the JavaScript concatenation operator?
The plus sign.

How do you call an external JavaScript file?
With the script tag, using the src attribute to reference the path of the JavaScript file.

How do you create a function in JavaScript?
Use the function statement.

How do you get the item selected in a dropdown select list?
With the selectedIndex property

How do you open a new window?
With window.open

How do you remove all options from a dropdown select list?
By setting the length property of the dropdown select list to 0.

Demonstrate the syntax for writing a FOR loop.
Need an answer similar to:
for (i=1;i<=LoopNumber;i++)
{
//do something
}

How do you determine the length of an array?
With the length property of the array object

How do you load a new URL in a browser?
With the location or href property of the window or document object.

What are the different usages of equal signs?
One (=) is for assignment. Two (==) is for equality. Three (===) is for strict comparison.

What is ++ used for
It is the increment operator. It adds one to a value.

JavaScript: Return a List of Elements for a Tag Name – getElementsByTagName

The document getElementsByTagName method returns a list of elements with a given tag name. getElementsByTagName is often used in Ajax applications and it’s usage was demonstrated in the series of articles I wrote on Ajax. One example included:

colors = objXHR.responseXML.getElementsByTagName('color');
for (i=0;i<colors.length;i++)
document.write(colors[i].firstChild.nodeValue);

This code retrieved all elements that were named color in the responseXML. The nodeValue of each of these elements was then accessed to get the color label.

getElementsByTagName is also often used as part of the Document Object Model to retrieve a list of nodes containing the information belonging to a tag. For instance:

var nodeList = document.getElementsByTagName('div');

The nodeList variable can then be traversed to examine or set properties on the div elements of a document as needed.

for(var i=0;i<nodeList.length;i++)
document.write(nodeList[i].style.fontWeight);

The preceding example simply outputs what the fontWeight CSS property is for each of the div elements in a document.

JavaScript XMLHttpRequest responseText Property

Once an XMLHttpRequest has been initiated, sent and a response received, the XMLHttpRequest will have a responseText property. This property contains the server response, excluding headers.

Note that responseText is not fully loaded until the XMLHttpRequest readyState is 4. The responseText property can also contain a partial portion of the final result text if readyState is 3, which means that data is in the process of being received from the server.

To access this property: If an XMLHttpRequest call is saved in a variable named objXHR, the responseText can be accessed as objXHR.responseText.

Related articles:
JavaScript XMLHttpRequest readyState values

JavaScript XMLHttpRequest responseXML Property

Once an XMLHttpRequest has been initiated, sent and a response received, the XMLHttpRequest will have a responseXML property, if an XML document is received from the server. This property contains the response received from the server that can be processed by JavaScript as XML. DOM methods can by applied through JavaScript on the XML. If the server does not send back XML or if the XML is not well-formed the responseXML property will contain null.

Please see my Simple Ajax Example Tutorial with ColdFusion to see a practical application of this property.

Simple Ajax Example Tutorial with ColdFusion

The following illustrates how to create a simple Ajax application with ColdFusion. This example sends a request to the server to get a list of product colors.

Use this JavaScript code:

//First, create the XMLHttpRequest object; the try/catch is to handle the various browsers implementation of XMLHttpRequest
try {
var objXHR = new XMLHttpRequest();
} catch (e) {
try {
var objXHR = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
var objXHR = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
document.write('XMLHttpRequest not supported'); }
}
}

//Open the URL where the database query resides; replace the URL here with the URL of the page on your server
objXHR.open('GET','http://myURL.com&#39;,true);

//Set up a listener to handle the response from the server
objXHR.onreadystatechange = function(evt){
if (objXHR.readyState == 4) {
if(objXHR.status == 200)
colors = objXHR.responseXML.getElementsByTagName('color');
for (i=0;i<colors.length;i++)
document.write(colors[i].firstChild.nodeValue);
else
document.write('Error processing request');
}
};

//Send the request to the server
objXHR.send(null);
//End JavaScript

This is the ColdFusion page URL that should be referenced in the “open” method in the JavaScript, above:

<cfsetting showdebugoutput = 'false'>
<cfheader name='Expires' value='#now()#'>
<cfheader name='Content-Type' value='text/xml'>

<cfquery datasource=”mydatasource” name=”qryColors”>
SELECT Colors
FROM Products
</cfquery>

<cfoutput>
<colors>
<cfloop query=”qryColors”>
<color>#qryColors.Color#</color>
</cfloop>
</colors>
</cfoutput>

Related articles:
JavaScript: Creating XMLHttpRequest Object for Ajax
JavaScript XMLHttpRequest open Method: Calling a URL in Ajax
JavaScript XMLHttpRequest send Method: send a URL in Ajax
JavaScript XMLHttpRequest onreadystatechange for Ajax Requests
JavaScript: Getting Data From a Server for Ajax

JavaScript: Getting Data From a Server for Ajax

In previous posts, I explained the process of requesting a URL for Ajax:
First, create the XMLHttpRequest object
Second, open a connection to a URL
Third, send the request
Finally, listen for a response from the server

Between the third and last step, however, there is a crucial piece: Creating data on the server that will be used by Ajax. This is actually quite simple. All that’s needed is an XML document, which can be creating in many different ways. The example I provide below is created with ColdFusion.

<cfsetting showdebugoutput = ‘false’>
<cfheader name=”Expires” value=”#now()#”>
<cfheader name=”Content-Type” value=”text/xml”>

<cfquery datasource=”mydatasource” name=”qryColors”>
SELECT Colors
FROM Products
</cfquery>

<cfoutput>
<colors>
<cfloop query=”qryColors”>
<color>#qryColors.Color#</color>
</cfloop>
</colors>
</cfoutput>

In the previous example, the first three lines simply specify that this is going to be an XML document. Then a query is run and looped over while creating XML nodes. This is the XML that will be sent back to the Ajax application. Once the response has been received in JavaScript, this XML can be used. Inside the listener response (when the readyState is 4), get the XML nodes of interest as follows (this is JavaScript code now):

colors = objXHR.responseXML.getElementsByTagName('color');
for (i=0;i<colors.length;i++)
document.write(colors[i].firstChild.nodeValue);