13 Aug
Posted by ProCOM
on August 13, 2007 – 11:24 pm - 451 views
If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!
11 Aug
Posted by ProCOM
on August 11, 2007 – 8:53 pm - 2,007 views
Ajax examples (XMLHttpRequest examples), code snippets and proof of concepts - the links below should help get you started on building your own functions with XMLHttpRequest and Ajax.
A cool little blog post and demo that Retrieves an xml atom feed and xsl stylesheet with XMLHttpRequest()
.
Paul James gives the basics of getting started with XMLHttpRequest and using REST for attaching the client-side to the server.
He builds an example where, upon entering a postal code and pushing a button, a form queries the server for the rest of the address information and fills in the appropriate fields when the data is returned.
Jim Ley provides his overview of the XML HTTP request object, getting into some browser details and detection before providing some examples and getting into using XMLHTTP with google’s SOAP API.
Drew McLellan provides an excellent overview of the basics of using XMLHttpRequest offering up a simple, well documented example used for checking if a username is available (similar to g-mail).
An example of using XMLHTTP to perform real time data validation, in this example for validating data entered into a user registration form. The example focusses on Microsoft and ASP.
Three examples of XMLHttpRequest in use: autocomplete, live search, and live action.
A free web based to-do list application provided by 37Signals, makers of Basecamp. Sign-up and try it out; XMLHttpRequest in action.
From the site: This library is meant to simplify and unify the code necessary to successfully send and receive simple data via XMLHTTP.
Two scripts that use XMLHttpRequest: 1 - a javaScript interface to the languid.cantbedone.org API and 2 - a javaScript interface to the del.icio.us API.
Apples page on the the XMLHttpRequest object, covering object creation, methods and properties in addition to security issues. They build an example for reading XML data, by retrieving iTunes RSS feeds that you select from a dropdown menu.
The wiki page for the livesearch function. From the page: On the client side, we use XMLHttpRequest for sending the request to the server. There we have a little PHP script, which returns a small HTML file (http://blog.bitflux.ch/livesearch.php?s=PHP ) . This is then inserted into the page with some DOM manipulation.
XMLHttpRequest is one of modern DHTML’s best kept secrets.
- Haha, not anymore! Simon Willison offers up a little code that takes an HTML fragment, fetched via xmlhttp.open, and inserts it into an element with a specified id. Some good links and comments follow the article.
This article provides an ASP.NET 2.0 angle of Google Suggest along with a short little look at the history of javascript, frames, remote scripting and XmlHttp + XMLHttpRequest.
A nice overview of the history and a good breakdown how the Suggest feature works.
From the site: Sajax makes it easy to call PHP functions from your webpages via JavaScript without performing a browser refresh
. Worth checking out and having a play with.
From the site: This is my take on Google Suggest only with Amazon so I’ve called it “Amazon Zuggest”.
Head on over and give this a try.
Francis writes “The Javascript runs in the browser and fires every so often, looks for something to search on, it shoots a request using XMLHttp to my webserver, which in turn creates a SOAP message that gets sent to Amazon. They send back the content and it’s formatted on the server, then streamed to the browser. All in the blink of an eye.
This is a cool little app. When you are done searching, have a hover over the “History” list in the left hand column… The site comes up a little messy in Firefox…
Manolo Guerrero sets up a little app that allows you to click on a form field and edit the text, which is automatically saved to the server via xmlHttpRequest. Worth a look, though the commented Javascript is in Spanish.
A neat little script to play with (not sure what it has to do with weblogs especially tho). From the site: It uses Javascript to get data from a remote source and then loads that into a specified target. Whatever content you like to wherever you like on the page.
A proof of concept, Ajax based login script that, in this case, uses a php/mysql backend. The author provides all of the scripts involved and lists some advantages and dis-advantages of his method.
Thomas Baekdal gets back into accessibility and Ajax. From the site: Let’s look at what we can do to turn an otherwise user-hostile XMLHttpRequest application - into a usable one…
. An excellent write-up.
An excellent proof of concept and something I was waiting for someone to code up ;-). This XHTML live Chat uses XMLHttpRequest to post chat messages and to periodically check the server for new messages and update your chat window.
This is simply a proof of concept, and would work really well in a blog commenting setting or for forums when those fast threads start happening.
Here’s an excellent application of the livesearch idea that has been seen around the web. Type in your search (a band name) and the results show up in a nice table below the search box.
Similar to other livesearch functions out there, only this one plugs into Google’s API and has a Java backend, returning a list of results and descriptions for your query.
From the site: Sproutliner is a free web service that helps you manage your projects and ideas.
This tool looks to be very promising, and to be honest you have to try it out to ‘get it’. It is a sort of Ta-da list on steroids, so to speak, in that it is very simple yet a user can add to it and tailor it to their needs.
Very cool…
While makaing some excellent points in the article, the little adventure game “The Search For Fonzie’s Treasure” built using Ajax technologies is pretty cool. The author discusses user profiling as an “evil use” of Ajax. I’m not so sure that I would say that it is evil…
A very impressive piece of Ajax work, with some context provided here. Have a click thru the site and try out that back-button. Also be sure to head in and check out the demo section.
There was a lot of buzz at JavaOne regarding the Google Web Toolkit (GWT). Basically, GWT allows a developer to write a AJAX powered web application in Java!! The Java code gets ‘compiled’ to a set of plain old text files containing your JavaScript code. For example, the GWT will translate your rollover actions written in Java to JavaScript functions. This confused me for a second so I’ll stress again that you compile your web application written in Java to plain old JavaScript and HTML that can run in any browser.
What this means is that if you are a Java developer you don’t have to learn JavaScript and all the idiosyncrasies of every browser to develop a stable and reliable AJAX web application.
To get started download the GWT from Google, configure it with Eclipse, and create a new web application.
04 Aug
Posted by ProCOM
on August 4, 2007 – 12:50 am - 1,121 views
Most know about Google’s I’m Feeling Lucky feature, you enter a search term, and it automatically takes you to the first result. Yahoo has no such feature, but were going to make one. Yahoo’s great set of API’s, and the JSON PHP class makes this simple. We’re going to use the Yahoo! API for search requests and then decode the response with JSON, and redirect from there.
To begin, make sure you have a copy of the JSON class (linked above). Now, making the API request is simple, we form a URL and then get the contents. The content will be sent to JSON to be decoded, then sent back to use as a large array (and sub-arrays) and we’ll get the URL from there.
The request URL will look like this:
$request = ‘http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=SC&query=’. $_POST[‘query’] .‘&results=1&output=json’;
This sends a request to the web search service API with our posted query. (we also say to output and JSON and limit to 1 response) Next, we have to get the contents of the request and then load up JSON and decode:
$response = file_get_contents($request);
require_once(‘./json.class.php’);
$json = new Services_JSON();
$data = $json->decode($response);
Still simple. We get the contents of the request (which is just a jumble right now
) then require, start, and use the JSON class to decode our response. The data variable now contains a huge array, it’s interesting to see what happens if your print_r() it. If you do that, you might want to try to find the URL variable yourself, but if not, keep reading and I’ll show you. ![]()
$redirect = $data->ResultSet->Result[0]->Url;
header(“Location: $redirect”);
Really, it’s that simple.
The URL has three parents, the actual result which contains the URL and other data about that particular result, the result set which is all the results, and the array itself.
The service last.fm offers is pretty cool, you register, and it automatically records data about your music, and puts that data on their website. From there, you can find others who have the same taste as you or find artists similar to the ones you like. Audioscrobbler, which powers last.fm, offers an API, which makes it easy to get the latest tracks, artists, albums, and more. This data is offered in a variety of formats, text, XML, and XSPF (rarely). We’re going to be using plain text, as it’s easiest to manipulate. For a listing of all the API services, see here. We’re going to be using the API to display our last listened to track.
We will be using the API for latest tracks in combination with the GD functions to create a dynamic image with our latest song. The API is simple, we have a url which will look like: http://ws.audioscrobbler.com/1.0/user/USERNAME/recenttracks.txt and that contains the latest tracks for that user. The first part of our script will handle the API part:
<?php
header(“Content-type: image/png”);
$user = “RJ”;
$url = “http://ws.audioscrobbler.com/1.0/user/$user/recenttracks.txt”;
$data = file($url);
$song = explode(“,”, $data[0]);
$song = explode(“-”, $song[1]);
The first part tells the browser that we will be sending out an image (png in our case), the next few lines make the request to the API, and then gets the latest song’s artist and title in an array ($song). The next part of the script will deal with creating, writing, and outputting our image. This is a little more confusing, just becuase the image functions often are.
$img = imagecreate(225, 30);
$bg = imagecolorallocate($img, 255, 255, 255);
$text = imagecolorallocate($img, 0, 0, 0);
imagestring($img, 2, 5, 5, trim($song[1]), $text);
imagepng($img);
imagedestroy($img);
?>
This creates a new image with the dimensions 225 by 30, makes white the background color, black the text color, writes our song and artist, then outputs it to the browser. The 2, 5, 5 are the font size, x position, and y position.
The final image is really simple, but it’s still cool. It’s easy to change the background color to fit the page it will be on, just get the RGB values and put them in for the $bg variable.
Enjoy!