AJAX with JQuery, Using Web Services

Single Page Applications

Web Services

JSON

JSON stands for JavaScript Object Notation. It has become a standard way to provide machine readable data to and from web services. Despite the fact that JavaScript is part of it's title, it is generally useful in all programming languages.

As stated on the json.org site: An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).

{
	"first_name": "Shawn",
	"last_name": "Van Every"
}		
		

[
{
	"first_name": "Shawn",
	"last_name": "Van Every"
},
{
	"first_name": "Joe",
	"last_name": "Frank"
}		
]		

Sample Web Service with JSON

One JSON data feed that might be interesting is from OpenWeatherMap. Their API is documented here.

This is the feed for New York City's data: http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial which yields the following:

{"coord":{"lon":-74.005966,"lat":40.714272},"sys":{"country":"US","sunrise":1380106043,"sunset":1380149242},"weather":[{"id":800,"main":"Clear","description":"Sky is Clear","icon":"01n"}],"base":"gdps stations","main":{"temp":60.44,"pressure":1013,"temp_min":54,"temp_max":66.2,"humidity":88},"wind":{"speed":2.22,"gust":3.08,"deg":285},"rain":{"3h":0},"clouds":{"all":0},"dt":1380076310,"id":5128581,"name":"New York","cod":200}
		

We can make this JSON easier to read by doing some formatting: http://jsonformatter.curiousconcept.com/

After formatting we get the following:

{
   "coord":{
      "lon":-74.005966,
      "lat":40.714272
   },
   "sys":{
      "country":"US",
      "sunrise":1380106043,
      "sunset":1380149242
   },
   "weather":[
      {
         "id":800,
         "main":"Clear",
         "description":"Sky is Clear",
         "icon":"01n"
      }
   ],
   "base":"gdps stations",
   "main":{
      "temp":60.44,
      "pressure":1013,
      "temp_min":54,
      "temp_max":66.2,
      "humidity":88
   },
   "wind":{
      "speed":2.22,
      "gust":3.08,
      "deg":285
   },
   "rain":{
      "3h":0
   },
   "clouds":{
      "all":0
   },
   "dt":1380076310,
   "id":5128581,
   "name":"New York",
   "cod":200
}
		

We see a lot of what we might expect, temp, pressure, humidity and so on. Also of interest is the sunrise and sunset time. These are particularly interesting because they are represented in standard "unix timestamp" which is the number of seconds from January 1, 1970. http://www.epochconverter.com/ - Command line: date "+%s"

To pull a value out of this JSON structure, we simply treat it like it is a javascript object and use dot syntax to traverse through the structure. To get the current temperature, we use the top level object and keep going down, theObject.main.temp should contain the current temperature.

		
			var theObject = {
			   "coord":{
				  "lon":-74.005966,
				  "lat":40.714272
			   },
			   "sys":{
				  "country":"US",
				  "sunrise":1380106043,
				  "sunset":1380149242
			   },
			   "weather":[
				  {
					 "id":800,
					 "main":"Clear",
					 "description":"Sky is Clear",
					 "icon":"01n"
				  }
			   ],
			   "base":"gdps stations",
			   "main":{
				  "temp":60.44,
				  "pressure":1013,
				  "temp_min":54,
				  "temp_max":66.2,
				  "humidity":88
			   },
			   "wind":{
				  "speed":2.22,
				  "gust":3.08,
				  "deg":285
			   },
			   "rain":{
				  "3h":0
			   },
			   "clouds":{
				  "all":0
			   },
			   "dt":1380076310,
			   "id":5128581,
			   "name":"New York",
			   "cod":200
			};
			
			console.log("Temperature is: " + theObject.main.temp);
		
		

AJAX

Unfortunately, there are quite a few security restrictions on making AJAX requests across domains. If you are interested in investigating those and how to overcome them, checkout this: http://www.html5rocks.com/en/tutorials/cors/.

Fortunately, there are a few libraries such as jQuery that take much of the pain away.

Using jQuery's AJAX functions to load JSON

You can load and parse JSON easily using jQuery.

		
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
		  url: "http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial",
		  dataType: 'json',
		  success: function(data) {
			alert("Temperature is: " + data.main.temp );
		  },
		  error: function() {
			alert("error");
		  }
		});        
	});
</script>
		

Building simple Webservices using Node and Express

As you may have seen in previous notes, we can easily send back JSON formatted data rather than HTML from our Node/Express servers. Here is an example which takes data from a database query which simply sends the JSON from the database back:

app.get('/display', function(req, res) {
  db.thesubmissions.find({}, function(err, saved) {
    if (err || !saved) {
    	console.log("No results");
    }
    else {
      console.log(saved);
      res.send(saved);
  	}
  });
});