Laith Zraikat

Recently released video lessons on the common questions about the new features in ASP.Net 2.0. They will provide clear, easy, and straight to the point examples on how to perform some advanced functions. They are great for all levels, newbie to expert.

The topics covered:

• Caching (2 parts)
• Create a full-featured customer login protal
• Data: create data driven web sites
• Form Building
• Localization
• Master Pages and Site Navigation
• Membership and Roles
• Profiles and Themes
• Web Parts and Personalization
• Tips and Tricks: covers a wide range of techniques for enhancing ASP.Net web pages.
  

For a more detailed description and download links, read:
ASP.NET 2.0 How Do I Video Series is here -- a must see

Last week I wanted to list some of the books that I've read and/or recommend. So I thought I'd also make some money while I'm at it. I created an Amazon reseller account and stared creating affiliate links.

Since Amazon does not have an automated way to generate code that will rotate several books, I decided to create one using JavaScript Asynchronous Callback and JSON.

This small solution consists of 2 files:
1. books.txt: contains the list if ISBN's for the books
2. books_json.js: JavaScript file that contains the code which will retrieve the list of ISBN's through xmlHTTPRequest, and then pick a random book and displays it.

This is how the code looks:

Book.txt:

{"Book":
[
{"Code": "0393058581"},
{"Code": "1590595009"},
{"Code": "1590593898"},
{"Code": "0385483821"},
{"Code": "0684855542"},
{"Code": "0375727205"}
]
}

Books_json.js:

// Settings you can modify
var affiliateID = "numbersixteen-20";// Your amazon associate ID
var Width = "120px"; // Box Width
var Height = "240px";// Box Height
var fcl = "000000";// Text Color
var lcl = "0000ff"; // Link Color
var bcl = "000000";// Frame (border) color
var bgl = "ffffff"; // Background color

//Ony modify if you know what youre doing
var dataURL = "/books.txt";

//Create the XMLHTTPRequest object
var requester;
try
{
requester = new XMLHttpRequest();
}
catch (error)
{
try
{
requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
requester = null;
}
}

// Open the XMLHTTPRequest, set the method to GET, give it the URL to fetch and set (Asynch = true) so the rest of the page can still download while the data is downloaded

requester.open("GET", dataURL, true);
requester.send(null);

// When the request is done, we call stateHandler which will perform the the needed actions IF we actualyl got a response.
requester.onreadystatechange = stateHandler;

function stateHandler()
{

// The XMLHttpRequest has finished requesting the data
if (requester.readyState == 4) {

// The data was receieved successfully
if (requester.status == 200)
{
// There no need ot do anything if no text was received.
if (requester.responseText != "")
{
// Get the JSON list of book ISBN's and compile it
var Books = eval( '(' + requester.responseText + ')' );
// Generate a random index from the Books Object
var whichBook=Math.floor(Math.random()*(Books.Book.length));
// Get the Book ISBN
var Book = Books.Book[whichBook].Code;
requester = null;
// Build the HTML code to place in the page
var amazonCode = "<iframe src='http://rcm.amazon.com/e/cm?t="+ affiliateID +"&o=1&p=8&l=as1&asins="+Book+"&fc1=" + fcl + "&IS2=1&lt1=_blank&lc1=" + lcl + "&bc1=" + bcl + "&bg1=" + bgl + "&f=ifr' style='width:"+Width+";height:"+Height+";' scrolling='no' marginwidth='0' marginheight='0' frameborder='0'></iframe>";
// Dump the HTML code on the page
document.getElementById('bookList').innerHTML = amazonCode;
}
}
else
{
requester = null;
}
}
return true;
}

Installation on your blog:
1. Upload the JavaScript and Data files into the root folder of your web site
2. Add the following in your HTML where you want the books to appear:

<div id="bookList" name="bookList"></div>
<script type="text/javascript" src="/books_json.js"></script>

Download the source code and example:
books_json.zip

In case you want a version that uses XML, here it is:
books_xml.zip

JSON (JavaScript Object Notation) is gaining wide appeal as an alternative to XML for transporting data objects between applications. In fact a JSON is closer than XML to transporting true data objects because it is more object oriented and can be mapped more easily to object oriented systems. Being a subset of JavaScript, JSON can be understood by any C-based programming language, and is almost language independent.

With XML you had to serialize the object on the server, send to the client, and then de-serialize on the client to get the object –that’s if you were using SOAP. Without using SOAP, you will have to write more code to parse the incoming XML. With JSON, all you have to do is send the text from the server, compile it on the client and you end up with an object.

Example:

Suppose we wanted to send a message from the server to the browser using asynchronous callback, we have the option of sending it as XML or JSON (and of course we can always use plain text)

XML:
<Messages><Msg><Type>1</Type><Text>Hello JSON!</Text></Msg></Messages>

JSON:
{"Msg": [{"Type": "1", "Text": "Hello JSON!"}]}

To parse the Data and display the message, you'll have to use a different approach for each:

XML: We have to parse the XML as text, and even then it remains text as we go through it.

Asynchronous callback code.....
.
.
var ResponseXML = myHTTPRequest.responseXML();
var Messages = ResponseXML.getElementsByTagName("MSG");
var MessageText;
var MsgType;
for(var i=0; i< Messages.length; i++) {
MsgType = Messages [i].getElementsByTagName("Type")[0].childNodes[0].nodeValue;
MessageText = Messages [i].getElementsByTagName("Text")[0].childNodes[0].nodeValue;
document.write(MsgType +','+ MessageText);
}

JSON: Simply run the text through the compiler. After that, you're dealing with an object not text.

Asynchronous callback code.....
.
.
var ResponseText = myHTTPRequest.responseText();
var Messages = eval( '(' + ResponseText + ')' );
var MessageText;
var MsgType;
for(var i=0; i< Messages.MSG.length; i++) {
MessageText = Messages.MSG[i].Text;
MsgType = Messages.MSG[i].Type;
document.write(MsgType +','+ MessageText);
}

Notice that the JSON form is shorter in terms of amount of text sent to the browser and simpler in terms of the code needed to extract the data. Using JSON in this manner also happens to be much faster because instead of parsing text –which we know is a very intensive process- in the case of XML, we are simply compiling it using the eval function which is extremely fast.

However, there are security issues associated with using JSON, namely, the risk of cross-site-scripting. If an attacker sends malicious code as JSON, this code will be activated once it is compiled on the client and can potentially be used to hijack a user's session for example.

What I like about JSON is its simplicity. You can transport an entire data table or even a dataset as text, and convert it into a true data object in one step. It is very promising and threatens to overthrow the X in AJAX.