Using the XHConn Framework
The JavaScript-based XHConn framework is similar to the Sack framework. This framework is an easy one to use: just create an XHConn object and call its connect method. It’ll call your callback function with the downloaded data.
| On the Web | You can pick up the XHConn framework for free at http://xkr.us/code/javascript/XHConn/. |
To use this framework, you must include the JavaScript file XHConn.js in your Web page and put it to work.
Here’s an example. In this case, the code downloads the file xhconn.txt, which contains this text on the server:
This text was downloaded with XHConn.
The code for this example starts with a button as before, this time connected to a function named useXHConn:
<h1>Testing the XHConn framework</h1> <form> <input type = "button" value = "Display the text" onclick = "useXHConn()"> </form>
You’ll need a <div> element to display the downloaded text in:
<h1>Testing the XHConn framework</h1> <form> <input type = "button" value = "Display the text" onclick = "useXHConn()"> </form> <div > <p>The fetched data will go here.</p> </div>
To work with XHConn, you need to include the file XHConn.js in your page like this:
<html> <head> <title>Testing the XHConn framework</title> <script src = "XHConn.js"></script> . . .
The button in this Web page is connected to a function named useXHConn. Start with XHConn by creating an XHConn object:
<head> <title>Testing the XHConn framework</title> <script src = "XHConn.js"></script> <script language = "javascript"> function useXHConn() { var xhconnObject = new XHConn(); . . . } </script> </head> And if that object wasn’t created, XHConn recommends that you alert the user like this:
<head> <title>Testing the XHConn framework</title> <script src = "XHConn.js"></script> <script language = "javascript"> function useXHConn() { var xhconnObject = new XHConn(); if (!xhconnObject) { alert("XHConn object creation failed."); } . . . } </script> </head> If everything’s okay, you can use the XHConn object’s connect method to connect to the server and download your data:
xhconnObject.connect(url, method, data, callback);
The arguments to this method include:
-
url: The URL to connect to.
-
method: The HTTP method, which is either GET or POST.
-
data: A string of parameter/value pairs, encoded in the form parameter1=data1& parameter2=data2& . . . . This is the data that is submitted to the server.
-
callback: The function that is called when the data is downloaded. One argument, the XMLHttpRequest object, is passed to the function.
Here’s what the call to the connect method looks like in this example in order to download the text in xhconn.txt:
<head> <title>Testing the XHConn framework</title> <script src = "XHConn.js"></script> <script language = "javascript"> function useXHConn() { var xhconnObject = new XHConn(); if (!xhconnObject) { alert("XHConn object creation failed."); } xhconnObject.connect("xhconn.txt", "GET", "", callback); } </script> </head> You’re also going to need a callback function, which is called with the XMLHttpRequest object like this:
<head> <title>Testing the XHConn framework</title> <script src = "XHConn.js"></script> <script language = "javascript"> function useXHConn() { var xhconnObject = new XHConn(); if (!xhconnObject) { alert("XHConn object creation failed."); } xhconnObject.connect("xhconn.txt", "GET", "", callback); } function callback(XMLHttpRequestObject) { . . . } </script> </head> Finally, you can use the XMLHttpRequest object passed to the callback function to recover the response text and display it like this:
<head> <title>Testing the XHConn framework</title> <script src = "XHConn.js"></script> <script language = "javascript"> function useXHConn() { var xhconnObject = new XHConn(); if (!xhconnObject) { alert("XHConn object creation failed."); } xhconnObject.connect("xhconn.txt", "GET", "", callback); } function callback(XMLHttpRequestObject) { document.getElementById("targetDiv").innerHTML = XMLHttpRequestObject.responseText; } </script> </head> You’re done! Figure 6.4 shows this page, testXHConn.html, at work.
Figure 6.4: Downloading text with the XHConn Ajax framework
As you can see from the previous example, XHConn is an easy-to-use Ajax framework. Just create an XHConn object and use its connect method. Another, similar framework-the uniAjax framework-is up next.
