Home > Articles > Open Source > Ajax & JavaScript

jQuery, jQuery UI, and jQuery Mobile: Communicating with the Server

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book
This chapter discusses how to communicate with the server. To demonstrate this, a simple test server is written in Node.js, which is a server-side JavaScript execution environment. After that, various recipes show how to get JSON, HTML, XML, and JSONP from the server by using AJAX methods and functions. This chapter pays a lot of attention to error handling to assure the quality of the end result.

Recipe: Setting Up an Example Server in Node.js

To test the AJAX examples, you need a server. For the examples, it does not matter whether the server is written in PHP, Python, Ruby, Erlang, Dart, Go, .Net, or Java. Keep in mind, of course, that all servers take some setup time.

Because jQuery is JavaScript, this book assumes that you are already familiar with it. That is why the test server is provided in JavaScript code. To run the code, you need to download and install Node.js at http://nodejs.org.

There are no plugins or further modules needed for this example. For reference, the code in this chapter was developed and tested by using versions 0.4.11 and 0.6.19 of Node.js. After installing Node.js and putting the example in a file called 01-app.js, you can run the code from the following command line:

node 01-app.js

If this command does not start your node server, ensure that you have correctly added the node to your system path. When running the code, you can access subsequent examples at http://localhost:1337/02-ajax-get.html.

Listing 5.1 contains the implementation for the Node.js test server.

Listing 5.1. Listening for HTTP Requests Generated by Recipes in This Chapter and Responding Accordingly

00 var http = require('http'),
01   url = require('url'),
02   fs = require('fs');
03 http.createServer(function (req, res) {
04   var reqData = {
05     url: url.parse(req.url, true),
06     method: req.method,
07     headers: req.headers },
08   path = reqData.url.pathname;
09
10   if(path.match(/^\/[0-9a-z\-]+\.(html)|(json)|(xml)$/))
11     fs.readFile('.' + path, function (err, data) {
12       if (err) {
13         res.writeHead(404, {'Content-Type': 'text/plain'});
14         res.end('not found');
15       }
16       else {
17         if(path.split('.')[1] == 'html')
18           res.writeHead(200, {'Content-Type': 'text/html'});
19         else if(path.split('.')[1] == 'xml')
20           res.writeHead(200, {'Content-Type': 'application/xml'});
21         else
22           res.writeHead(200, {'Content-Type': 'application/json'});
23         res.end(data);
24       }
25     });
26   else if(path == '/return-http-headers') {
27     res.writeHead(200, {'Content-Type': 'application/json'});
28     res.end(JSON.stringify(reqData));
29   }
30   else if(path == '/sleep') {
31     var endTime = new Date().getTime() + 2000;
32     while (new Date().getTime() < endTime);
33     res.writeHead(500, {'Content-Type': 'text/plain'});
34     res.end('slow response');
35   }
36   else if(path == '/validate') {
37     var keys = [];
38     for(var key in reqData.url.query) {
39       if(reqData.url.query[key] == '')
40         keys.push(key);
41     }
42     res.writeHead(200, {'Content-Type': 'application/json'});
43     res.end(JSON.stringify(keys));
44   }
45   else if(path == '/redirect') {
46     res.writeHead(302, {
47       'Location': '/test-values.json' });
48     res.end();
49   }
50   else if(path == '/fail\-on\-purpose') {
51     res.writeHead(500, {'Content-Type': 'text/plain'});
52     res.end('unexpected" error');
53   }
54   else {
55     res.writeHead(404, {'Content-Type': 'text/plain'});
56     res.end('not found');
57   }
58 }).listen(1337, "localhost");
59 console.log('Server running at http://localhost:1337/');

HTML, JSON, and XML requests are passed to the file server. Some special cases you will encounter in the following recipes are handled each with their own specific response. Given the requested path, the responses should not be too surprising.

If the file cannot be found, or there is no handler and the request is not XML, JSON, or HTML, a 404 error is returned.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus