From 9c9df33b66f74ab9bd2393ac53bb7f5e0185f8b5 Mon Sep 17 00:00:00 2001 From: Mike Hatfield Date: Tue, 15 May 2012 20:57:04 -0300 Subject: [PATCH 1/6] Added Ajax Without jQuery recipe. --- chapters/ajax/ajax_request_without_jquery.md | 96 ++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 chapters/ajax/ajax_request_without_jquery.md diff --git a/chapters/ajax/ajax_request_without_jquery.md b/chapters/ajax/ajax_request_without_jquery.md new file mode 100644 index 0000000..8d04d2b --- /dev/null +++ b/chapters/ajax/ajax_request_without_jquery.md @@ -0,0 +1,96 @@ +--- +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 XMLHttpRequest object. + +Begin by making sure the XMLHttpRequest object exsits. + +{% highlight coffeescript %} +# XMLHttpRequest.coffee + +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 %} + +We can also set up some status codes. + +{% highlight coffeescript %} +READYSTATE_UNINITIALIZED = 0 +READYSTATE_LOADING = 1 +READYSTATE_LOADED = 2 +READYSTATE_INTERACTIVE = 3 +READYSTATE_COMPLETE = 4 +{% endhighlight %} + +Let's set up a simple test HTML page with a button. + +{% highlight html %} + + + + + XMLHttpRequest Tester + + +

XMLHttpRequest Tester

+ + + + + +{% endhighlight %} + +Let's finish our XMLHttpRequest.coffee by adding a 'click' event listener then create our XMLHttpRequest object. + +{% highlight coffeescript linenos %} +loadDataFromServer = -> + req = new XMLHttpRequest() + + req.addEventListener 'readystatechange', -> + if req.readyState is READYSTATE_COMPLETE + if req.status is 200 or req.status is 304 + 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 create a new XMLHttpRequest instance on line 2. Then, we add an event listener for the readystatechange event. This fires whenever the XMLHttpRequest readyState changes. + +In the event handler we check to see if the readyState = READYSTATE_COMPLETE (value of 4). Then, we check to see if the status is either 200 or 304, both values are success indicators. + +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 12 opens a 'GET' request to retreive the data.json file. + +Line 13 sends our request to the server. From 1d4c372e16454624ffe2c717c105301b4883b2d3 Mon Sep 17 00:00:00 2001 From: Mike Hatfield Date: Tue, 15 May 2012 20:57:53 -0300 Subject: [PATCH 2/6] Closed highlighting section with missing {% endhighlight %}. --- chapters/math/random-integer.md | 1 + 1 file changed, 1 insertion(+) diff --git a/chapters/math/random-integer.md b/chapters/math/random-integer.md index bcc645c..dfcb9f2 100644 --- 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 From c9c11fb10ae72c388063b2adcdbf588a6f7c1c9f Mon Sep 17 00:00:00 2001 From: Mike Hatfield Date: Tue, 15 May 2012 20:58:17 -0300 Subject: [PATCH 3/6] Added Ajax chapter. --- chapters/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/chapters/index.html b/chapters/index.html index 778f38e..59ec176 100644 --- 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 @@

{{ chapter }}

{% endfor %} - \ No newline at end of file + \ No newline at end of file From f783b8075ddbde69430e107ed8b7169ed05dbc86 Mon Sep 17 00:00:00 2001 From: Mike Hatfield Date: Tue, 15 May 2012 20:58:41 -0300 Subject: [PATCH 4/6] Updated authors and wanted-recipes removing completed recipes. --- authors.md | 1 + wanted-recipes.md | 6 ++---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/authors.md b/authors.md index c759d8b..b1eef97 100644 --- 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/wanted-recipes.md b/wanted-recipes.md index 155fea1..64eec51 100644 --- 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 From 457b3a44327db857b191efed8e1dcad1023f80f4 Mon Sep 17 00:00:00 2001 From: Mike Hatfield Date: Tue, 15 May 2012 22:50:19 -0300 Subject: [PATCH 5/6] Added Ajax chapter. --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 0b997af..3fb3c07 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ - Functions - Metaprogramming - jQuery +- Ajax - Regular Expressions - Networking - Design Patterns @@ -42,4 +43,4 @@

{{ chapter }}

{% endfor %} - \ No newline at end of file + \ No newline at end of file From c943705839c93ccd0f933a32edebce7cd57345da Mon Sep 17 00:00:00 2001 From: Mike Hatfield Date: Tue, 15 May 2012 22:51:07 -0300 Subject: [PATCH 6/6] Simplified code examples and reworked recipe text. --- chapters/ajax/ajax_request_without_jquery.md | 86 +++++++++++--------- 1 file changed, 46 insertions(+), 40 deletions(-) diff --git a/chapters/ajax/ajax_request_without_jquery.md b/chapters/ajax/ajax_request_without_jquery.md index 8d04d2b..5956548 100644 --- a/chapters/ajax/ajax_request_without_jquery.md +++ b/chapters/ajax/ajax_request_without_jquery.md @@ -1,7 +1,7 @@ --- layout: recipe -title: AJAX Request Without jQuery -chapter: AJAX +title: Ajax Request Without jQuery +chapter: Ajax --- ## Problem @@ -11,37 +11,6 @@ You want to load data from your server via AJAX without using the jQuery library You will use the native XMLHttpRequest object. -Begin by making sure the XMLHttpRequest object exsits. - -{% highlight coffeescript %} -# XMLHttpRequest.coffee - -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 %} - -We can also set up some status codes. - -{% highlight coffeescript %} -READYSTATE_UNINITIALIZED = 0 -READYSTATE_LOADING = 1 -READYSTATE_LOADED = 2 -READYSTATE_INTERACTIVE = 3 -READYSTATE_COMPLETE = 4 -{% endhighlight %} - Let's set up a simple test HTML page with a button. {% highlight html %} @@ -60,15 +29,25 @@ Let's set up a simple test HTML page with a button. {% endhighlight %} -Let's finish our XMLHttpRequest.coffee by adding a 'click' event listener then create our XMLHttpRequest object. +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 READYSTATE_COMPLETE - if req.status is 200 or req.status is 304 + 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 @@ -83,14 +62,41 @@ loadDataButton.addEventListener 'click', loadDataFromServer, false ## Discussion -In the above code, we create a new XMLHttpRequest instance on line 2. Then, we add an event listener for the readystatechange event. This fires whenever the XMLHttpRequest readyState changes. +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. -In the event handler we check to see if the readyState = READYSTATE_COMPLETE (value of 4). Then, we check to see if the status is either 200 or 304, both values are success indicators. +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 12 opens a 'GET' request to retreive the data.json file. +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. -Line 13 sends our request to the server.