Merge branch 'ajax-non-jquery'

marnen · May 16, 2012 · 07f559d · 07f559d
2 parents 438cb4d + c943705
commit 07f559d
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 6 deletions.
diff --git a/authors.md b/authors.md
@@ -19,6 +19,7 @@ The following people are totally rad and awesome because they have contributed r
 * João Moreno *coffeecb @joaomoreno .com*
 * Jeff Pickhardt *pickhardt (at) gmail (dot) com*
 * Frederic Hemberger
+* Mike Hatfield *oakraven13@gmail.com*
 * ...You! What are you waiting for? Check out the [contributing](/contributing) section and get cracking!
 
 # Developers

diff --git a/chapters/ajax/ajax_request_without_jquery.md b/chapters/ajax/ajax_request_without_jquery.md
@@ -0,0 +1,102 @@
+---
+layout: recipe
+title: Ajax Request Without jQuery
+chapter: Ajax
+---
+## Problem
+
+You want to load data from your server via AJAX without using the jQuery library.
+
+## Solution
+
+You will use the native <a href="http://en.wikipedia.org/wiki/XMLHttpRequest" target="_blank">XMLHttpRequest</a> object.
+
+Let's set up a simple test HTML page with a button.
+
+{% highlight html %}
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+	<meta charset="UTF-8">
+	<title>XMLHttpRequest Tester</title>
+</head>
+<body>
+	<h1>XMLHttpRequest Tester</h1>
+	<button id="loadDataButton">Load Data</button>
+
+	<script type="text/javascript" src="XMLHttpRequest.js"></script>
+</body>
+</html>
+{% endhighlight %}
+
+When the button is clicked, we want to send an Ajax request to the server to retrieve some data.  For this sample, we have a small JSON file.
+
+{% highlight javascript %}
+// data.json
+{
+  message: "Hello World"
+}
+{% endhighlight %}
+
+Next, create the CoffeeScript file to hold the page logic.  The code in this file creates a function to be called when the Load Data button is clicked.
+
+{% highlight coffeescript linenos %}
+# XMLHttpRequest.coffee
+loadDataFromServer = ->
+  req = new XMLHttpRequest()
+
+  req.addEventListener 'readystatechange', ->
+    if req.readyState is 4                        # ReadyState Compelte
+      if req.status is 200 or req.status is 304   # Success result codes
+        data = eval '(' + req.responseText + ')'
+        console.log 'data message: ', data.message
+      else
+        console.log 'Error loading data...'
+
+  req.open 'GET', 'data.json', false
+  req.send()
+
+loadDataButton = document.getElementById 'loadDataButton'
+loadDataButton.addEventListener 'click', loadDataFromServer, false
+{% endhighlight %}
+
+## Discussion
+
+In the above code we essentially grab a handle to the button in our HTML (line 16) and add a *click* event listener (line 17).  In our event listener, we define our callback function as loadDataFromServer.
+
+We define our loadDataFromServer callback beginning on line 2.
+
+We create a XMLHttpRequest request object (line 3) and add a *readystatechange* event handler.  This fires whenever the request's readyState changes.
+
+In the event handler we check to see if the readyState = 4, indicating the request has completed.  Then, we check the request status value.  Both 200 or 304 represent a succsessful request.  Anything else represents an error condition.
+
+If the request was indeed successful, we eval the JSON returned from the server and assign it to a data variable.  At this point, we can use the returned data in any way we need to.
+
+The last thing we need to do is actually make our request.
+
+Line 13 opens a 'GET' request to retreive the data.json file.
+
+Line 14 sends our request to the server. 
+
+## Older Browser Support
+
+If your application needs to target older versions of Internet Explorer, you will need to ensure the XMLHttpRequest object exists.  You can do this by including this code before creating the XMLHttpRequest instance.
+
+{% highlight coffeescript %}
+if (typeof @XMLHttpRequest == "undefined")
+  console.log 'XMLHttpRequest is undefined'
+  @XMLHttpRequest = ->
+    try
+      return new ActiveXObject("Msxml2.XMLHTTP.6.0")
+    catch error
+    try
+      return new ActiveXObject("Msxml2.XMLHTTP.3.0")
+    catch error
+    try
+      return new ActiveXObject("Microsoft.XMLHTTP")
+    catch error
+    throw new Error("This browser does not support XMLHttpRequest.")
+{% endhighlight %}
+
+This code ensures the XMLHttpRequest object is available in the global namespace.
+
diff --git a/chapters/index.html b/chapters/index.html
@@ -11,6 +11,7 @@
 - Functions
 - Metaprogramming
 - jQuery
+- Ajax
 - Regular Expressions
 - Networking
 - Design Patterns
@@ -38,4 +39,4 @@ <h2><a href="{{ url }}">{{ chapter }}</a></h2>
     </li>
 
   {% endfor %}
-</ul>
+</ol>
diff --git a/chapters/math/random-integer.md b/chapters/math/random-integer.md
@@ -25,6 +25,7 @@ randomInt = (lower, upper=0) ->
 
 (randomInt(1, 10) for i in [0...10])
 # => [7,3,9,1,8,5,4,10,10,8]
+{% endhighlight %}
 
 ## Discussion
 

diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
 - Functions
 - Metaprogramming
 - jQuery
+- Ajax
 - Regular Expressions
 - Networking
 - Design Patterns
@@ -42,4 +43,4 @@ <h2><a href="{{ url }}">{{ chapter }}</a></h2>
     </li>
 
   {% endfor %}
-</ul>
+</ol>
diff --git a/wanted-recipes.md b/wanted-recipes.md
@@ -47,8 +47,7 @@ evens.every even
 
 ## Dates and Times
 
-* Calculating the phase of the moon
-* Number of days between two dates
+* Empty
 
 ## Math
 
@@ -107,8 +106,7 @@ foo 1, 2, 3
 
 * Creational Patterns
   * Abstract Factory
-  * Prototype
-  * Singleton
+  * Prototype 
 
 * Structural Patterns
   * Adapter