Skip to content

Completed Ajax Without jQuery Recipe #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 16, 2012
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions authors.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
102 changes: 102 additions & 0 deletions chapters/ajax/ajax_request_without_jquery.md
Original file line number Diff line number Diff line change
@@ -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 %}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://coffeescript-cookbook.github.io/chapters/ajax/ajax_request_without_jquery

# XMLHttpRequest.coffeeloadDataFromServer=->req=newXMLHttpRequest()req.addEventListener'readystatechange',->ifreq.readyStateis4# ReadyState CompletesuccessResultCodes=[200,304]ifreq.statusinsuccessResultCodesdata=eval'('+req.responseText+')'console.log'data message: ',data.messageelseconsole.log'Error loading data...'req.open'GET','data.json',falsereq.send()loadDataButton=document.getElementById'loadDataButton'loadDataButton.addEventListener'click',loadDataFromServer,false

U should remove linenos , as I understand

# 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.

3 changes: 2 additions & 1 deletion chapters/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- Functions
- Metaprogramming
- jQuery
- Ajax
- Regular Expressions
- Networking
- Design Patterns
Expand Down Expand Up @@ -38,4 +39,4 @@ <h2><a href="{{ url }}">{{ chapter }}</a></h2>
</li>

{% endfor %}
</ul>
</ol>
1 change: 1 addition & 0 deletions chapters/math/random-integer.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
3 changes: 2 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- Functions
- Metaprogramming
- jQuery
- Ajax
- Regular Expressions
- Networking
- Design Patterns
Expand Down Expand Up @@ -42,4 +43,4 @@ <h2><a href="{{ url }}">{{ chapter }}</a></h2>
</li>

{% endfor %}
</ul>
</ol>
6 changes: 2 additions & 4 deletions wanted-recipes.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@ evens.every even

## Dates and Times

* Calculating the phase of the moon
* Number of days between two dates
* Empty

## Math

Expand Down Expand Up @@ -107,8 +106,7 @@ foo 1, 2, 3

* Creational Patterns
* Abstract Factory
* Prototype
* Singleton
* Prototype

* Structural Patterns
* Adapter
Expand Down