Add rest of ajax chapters content

Author: danheberden

content/jquery-fundamentals/ajax/ajax-events.md

@@ -0,0 +1,19 @@
+---
+chapter : ajax
+section : 6
+title   : Ajax Events
+attribution:  jQuery Fundamentals
+---
+## Ajax Events
+
+Often, you’ll want to perform an operation whenever an Ajax requests starts or stops, such as showing or hiding a loading indicator. 
+Rather than defining this behavior inside every Ajax request, you can bind Ajax events to elements just like you'd bind other events. 
+For a complete list of Ajax events, visit [http://docs.jquery.com/Ajax_Events](http://docs.jquery.com/Ajax_Events "Ajax Events documentation on docs.jquery.com").
+
+<div class="example" markdown="1">
+Setting up a loading indicator using Ajax Events
+
+    $('#loading_indicator')
+        .ajaxStart(function() { $(this).show(); })
+        .ajaxStop(function() { $(this).hide(); });
+</div>

content/jquery-fundamentals/ajax/ajax-excercises.md

@@ -0,0 +1,45 @@
+---
+chapter : ajax
+section : 7
+title   : Exercises
+attribution:  jQuery Fundamentals
+---
+## Exercises
+
+### Load External Content
+
+Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/load.js`. 
+Your task is to load the content of a blog item when a user clicks on the title of the item.
+
+1.	Create a target div after the headline for each blog post and store a reference to it on the headline element using `$.fn.data`.
+
+2.	Bind a click event to the headline that will use the $.fn.load method to load the appropriate content from /exercises/data/blog.html into the target div. Don't forget to prevent the default action of the click event.
+
+Note that each blog headline in index.html includes a link to the post. 
+You'll need to leverage the href of that link to get the proper content from blog.html. 
+Once you have the href, here's one way to process it into an ID that you can use as a selector in `$.fn.load`:
+
+<div class="example" markdown="1">
+    var href = 'blog.html#post1';
+    var tempArray = href.split('#');
+    var id = '#' + tempArray[1];
+</div>
+
+Remember to make liberal use of `console.log` to make sure you're on the right path!
+
+### Load Content Using JSON
+
+Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/specials.js`. 
+Your task is to show the user details about the special for a given day when the user selects a day from the select dropdown.
+
+1.	Append a target div after the form that's inside the #specials element; this will be where you put information about the special once you receive it.
+
+2.	Bind to the change event of the select element; when the user changes the selection, send an Ajax request to `/exercises/data/specials.json`.
+
+3.	When the request returns a response, use the value the user selected in the select (hint: `$.fn.val`) to look up information about the special in the JSON response.
+
+4.	Add some HTML about the special to the target div you created.
+
+5.	Finally, because the form is now Ajax-enabled, remove the submit button from the form.
+
+Note that we're loading the JSON every time the user changes their selection. How could we change the code so we only make the request once, and then use a cached response when the user changes their choice in the select?

content/jquery-fundamentals/ajax/working-with-jsonp.md

@@ -0,0 +1,40 @@
+---
+chapter : ajax
+section : 5
+title   : Working with JSONP
+attribution:  jQuery Fundamentals
+---
+## Working with JSONP
+
+The advent of JSONP — essentially a consensual cross-site scripting hack — has opened the door to powerful mashups of content. 
+Many prominent sites provide JSONP services, allowing you access to their content via a predefined API. 
+A particularly great source of JSONP-formatted data is the [Yahoo! Query Language](http://developer.yahoo.com/yql/console/), which we'll use in the following example to fetch news about cats.
+
+<div class="example" markdown="1">
+Using YQL and JSONP
+
+    $.ajax({
+        url : 'http://query.yahooapis.com/v1/public/yql',
+    
+        // the name of the callback parameter,
+        // as specified by the YQL service
+        jsonp : 'callback',
+    
+        // tell jQuery we're expecting JSONP
+        dataType : 'jsonp',
+    
+        // tell YQL what we want and that we want JSON
+        data : {
+            q : 'select title,abstract,url from search.news where query="cat"',
+            format : 'json'
+        },
+    
+        // work with the response
+        success : function(response) {
+            console.log(response);
+        }
+    });
+</div>
+
+jQuery handles all the complex aspects of JSONP behind-the-scenes — all we have to do is tell jQuery the name of the JSONP callback parameter specified by YQL ("callback" in this case), and otherwise the whole process looks and feels like a normal Ajax request.
+