AJAX & Web 2.0 Tutorial (Section 5) - Debug & Performance

1. AJAX applications don’t exist in a vacuum, while much of the code can reside on the client, the essence of AJAX applications is the interaction with the server, which necessarily involves load.

2. Debugging AJAX applications can be challenging for a couple reasons, including:
- Browsers suck
- Multiple languages involved
- Development environment probably doesn’t support debuging PHP & JavaScript
- Communication between client and server may notbe visible

3. Debugging Tools

- Firebug - Firefox Extension
(Supports step by step debugging, breakpoints and watches; Handles multiple JavaScript documents concurrently; Gives you somewhat nicer error messages)

- Ethereal/Wireshark (Industry standard tool for packet sniffing)
-Live HTTP Headers and HTTP Inspector
(built into Komondo, acts as a proxy for requests)
-Yahoo! Logger library (YAHOO.log)

AJAX & Web 2.0 Tutorial (Section 5) - Applications

1. If you ask someone what Ajax stands for, they might answer it doesn’t stand for anything, or they might say “Asynchronous JavaScript And XML”
2. Asynchronous means that you’re welcome to send requests one after another, but they’re not guaranteed to return in that order (really, they’re not guaranteed to return at all, but that’s rare)
3. Server load affects your scripts in two similarbut different ways, including:
   
   1. Everything gets slower
   2. Different parts of things get slower (So some scripts that originally took similar amounts of time can now take drastically different amounts of time)
4. While Ajax encourages more communication between client and server, it’s generally the same information you would provide anyways, developers simply need to maintain their normal level of vigilance.
   
5. There are many situations within Ajax applications where this is sub-optimal

1. A user could enter invalid login credentials, then hit the login button. Realize their mistake correct it then hit it again
2. Select something from a list to have further information populated by Ajax, then select another item
3. A user could click a button to login, then activate another page element that requires them to have logged in before access

AJAX & Web 2.0 Tutorial (Section 4) - Yahoo User Interface (YUI )

1. The Yahoo! User Interface Library is a set of utilities and controls that make your life easier;
2. They’re released under a BSD style license;
3. Apart from solving cross browser problems, the library also includes code to do a lot of nifty things;
4. The library is available at http://developer.yahoo.com/yui/
5. Please go download the library and set it up in your development environment; :-)
   
6. Auto Complete is one of those nice finishing touches that can make most websites just seem better. It’s also a perfect case of supplementing the user experience, rather than providing it, worst case scenario the user doesn’t receivethe drop down.

Sample Code:

<script type="text/javascript">
YAHOO.example.ACFlatData = function(){
var mylogger;
var oACDS;
var oAutoComp0,oAutoComp1,oAutoComp2;
return {
init: function() {
mylogger = new YAHOO.widget.LogReader("logger");
oACDS = new YAHOO.widget.DS_XHR("./sampleAutoComplete.php", ["\n", "\t"]);
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
oACDS.maxCacheEntries = 60;
oACDS.queryMatchSubset = true;
oAutoComp2 = new YAHOO.widget.AutoComplete
('ysearchinput2','ysearchcontainer2', oACDS);
oAutoComp2.delimChar = ";";
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
},

validateForm: function() {
return false;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlatData.init);
</script>

AJAX & Web 2.0 Tutorial (Section 3) - JSON

1. JSON (JavaScript Object Notation) is a subset of how objects are represented in JavaScript
2. It’s presented as a lightweight information transfer protocol, similar in many respects to XML
3. What makes JSON useful in JavaScript is that it can be parsed very easily (eval())JSON can contain any number of elements, nested key value pairs, objects, arrays, etc.
4. Until a library is introduced the easiest way to transfer data between your script and PHP is to use simple GET & POST based requests for transmission, and JSON for receipt.
5. Different browsers interpret JavaScript differently, IE in particular goes off in its own direction (xmlHTTP request works differently, it’s difficult to re-use ajax objects, data is stored in linked lists rather than a hash table so it’s notably slower)
6. You could do some serious research, understand all the little differences, and write your code appropriately, or...

JSON Example:

<script type="text/javascript">
var name = "alex";
httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'http://localtest.luxplus.net/alfa/
ucase.php?text=' + name);
httpRequest.onreadystatechange = function()
{
if (httpRequest.readyState == 4)
{
responseJSON = eval("(" + httpRequest.responseText + ")");
alert(responseJSON.ucase);
}
}
httpRequest.send(null);
</script>

/* ucase.php */

<?php
$string = isset($_GET['text']) ? strtoupper($_GET['text']) :
strtoupper("default");
$data['ucase'] = $string;
$returnValue = json_encode($data);
echo $returnValue;
?>

AJAX & Web 2.0 Tutorial (Section 2) - Web Services

1. Web Services are a way for disparate applications to work with each other over the web;
2. In order for different applications to communicate with each other they need to agree on a protocol, webservices have three common protocols, JavaScript throws a fourth into the mix;
3. REST - Simple request protocol, looks identical to a form being filled out, response is a basic XML document;
4. XML-RPC - XML request-response protocol, format chosen is sub-optimal for parsing with DOM tools;
5. SOAP - Heavy but well defined XML based request-response protocol;
6. JSON - JavaScript Object Notation - information is passed back and forth in the JavaScript notation;
7. Ditch SOAP & XML-RPC, (SOAP is too heavy for frequent small requests, XML-RPC is just ugly);
8. REST - Light weight requests, some basic frameworks are available. Define your own response XML format;
9. JSON - The JSON format is relatively lightweight but still ‘new’ enough that it’s not too widely supported (JSON support was added in PHP 5.2.0);
10. It’s critical to remember that HTTP is a stateless protocol, every request must stand alone, independent of each other request. While technologies like sessions help can help when dealing with end users, they are inappropriate when using web services;
11. When developing web services leverage and re-factor existing code, rather than duplicating;
12. Objects are rather... different compared to other languages. Rather than defining a specific
    class, than instantiating instances of it, objects are created from functions that pull in their own required methods. This can be done on the fly, or by defining functions inside other functions.

AJAX & Web 2.0 Tutorial (Section 1) - Javascript Basics

1. Javascript has nothing to do with Java.
2. Javascript is a client side language, it is executed by the browser, not the server.
3. Javascript can be used to manipulate HTML documents, this allows the programmer to do all sort of nifty things. (Like AJAX)
4. Creating Valid HTML documents is the first step to giving yourself an easier JavaScript existence, things will start working sooner, and generally break in more predictable and understandable ways.
5. Many developers new to JavaScript look at the source code of their application to look for output, which seems like it should hold the answer, it doesn’t. When you modify the document using JavaScript you’re modifying the document in memory, the source doesn’t
   actually change.
6. Proper code needs a finished document with which to work, store your initialization code inside a function called in the body tag’s onload event. It’s good practice to encapsulate
   your code within a function anyways.
7. JavaScript variables are very similar to PHP
   
   1. Loosely Typed
   2. Number - Floating point number, stored internally using 64bit representation
   3. Boolean - true or false
   4. Strings - Encapsulated within quotes (no heredoc)
   5. Objects
8. Best way to convert text into a number is by using the Number() function, if it runs into a problem it will return produce.
9. To convert a value into an Integer use the parseInt(value, base) function. It accepts both
   the object containing the value you wish to convert, and the base at which the conversion should take place (avoiding those silly issues with leading zeros)

Ajax Indicators - Confused

Interesting conversation about ajax indicator:

Jodie (my friend): what this means?
Alex (me): AJAX indicator.
Jodie what is an AJAX indicator?
Alex: Telling you your browser is busy... (Actually, I should say some AJAX event is happening).

After a while, Jodie showed me this page (http://www.napyfab.com/ajax-indicators/), said her computer is murdered...
================================================
However, what an AJAX indicator means to you? Telling you some AJAX events happening behind the screen? Or... telling you some AJAX stuff is about to happen? Or just for developer's sake?

Like Prototype, AJAX, CSS? This Post is For You!

Easy to Use is a feature!

• script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

• moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.

• TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

• SmartMenus.org is home of one of the most advanced, highly cross-browser, simple-to-use and accessible website menu scripts available worldwide.

• overLIB is a JavaScript library created to enhance websites with small popup information boxes (like tooltips) to help visitors around your website. It can be used to provide the user with information about what will happen when they click on a link as well as navigational help (see the examples below). Not to mention that it looks cool, is stable, and has an active developer community to boot!