Posts Tagged ‘AJAX’

Server And Client Side: What’s the Difference?

Monday, November 7th, 2011

It’s a pretty simple question if you know how the web works, but if you don’t, it is very complicated. To succeed working in the web world, you’ve got to have a firm grasp on the difference between server-side and client-side interactions. If you want the quick answer, here you go:

Server-Side: Server-side interactions require sending data to a server and the server sending data back to you, the client.

Client-Side: Client-side interactions don’t need a server, and data is exchanged or altered on your own computer browser without sending any information to a server.

Now if you need the longer explanation, you’ll first need a little background on how the internet works. The internet is just a mapping of connections between millions of computers around the world. When you type in a web address–such as http://www.google.com/–your computer knows that means go find the computer somewhere in the world that has the website for Google on it (I’m really simplifying things here if you can’t tell). The computer that has Google on it is called a "server". Servers aren’t typical computers. They don’t necessarily have any screens to view anything on, and for sites like Google, thousands of servers are collectively used to house the website.

So now that you understand the web (at least in a basic sense), we can start to learn about what server-side and client-side means with a more indepth explanation. So say you are on Google’s homepage. As a user (consumer) of Google, you can interact with their homepage in a multitude of ways. To understand each type of interaction, I’ll give an example using the Google homepage.

Client-Side: When you rollover a link in the navigation bar at the top and its display changes, you’ve just triggered the most basic client-side interaction, the pseudo class :hover in CSS. For a slightly more complex client-side interaction, by clicking on the "more" link in the navigation bar, a menu expands with more options. This is a very typical client-side interaction using simple javascript to hide and show something on your screen. In addition to CSS and Javascript being client-side languages, you should also include HTML, the basis of all displays in the web. Without HTML, the internet would be completely different from what we know it as today, and all three of those languages are interpreted on your own computer within your own browser, needing no interaction or data transfer from a server.

Server-Side: Now, after you’ve typed a search phrase into the search bar, when you click the "Search Google" button or click enter, you’ve now triggered a server-side interaction. Your computer doesn’t have the information it needs to conduct the search you are requesting, so it must send your search across a series of connections to a Google server somewhere in the world, that then sends back the results that it found for you. This is the basic concept behind server-side interactions. Typical server-side scripting languages include Perl, PHP, Java, and ASP.NET (I could keep going, but who is it really helping?). The key to identifying a server-side interaction is noting when your browser page reloads. Server-side interactions require reloading the browser window to show the results that were found. There is one exception to this rule.

A Combination Of Both: It is possible to conduct a server-side interaction without reloading the browser window. This requires a combination of both server-side and client-side interactions. Using a subset of Javascript called AJAX, we can send requests to a server, and then load those results into the client browser without a page reload. An example of this on the Google homepage is the suggested search phrases that change as you start typing. You type in a few characters, Google sends those characters to their server which then looks at frequent searches conducted by other people to make suggestions, and then sends them back and fills in the drop down menu for you to make a selection.

Now hopefully you’ve got a firm understanding of the difference between server and client side interactions and languages. If you’ve got any questions, don’t hesitate to ask.

Tags: , , ,
Posted in User Experience, Web and Graphic Design | No Comments »

AJAX: Loading External Content

Wednesday, September 29th, 2010

Asynchronous Javascript and XML, is a method used to communicate with the server and load new content in a website without having to reload the page. You’ve probably seen it all over the web, and now you are going to learn how to implement it yourself!

Step 1: Install JQuery: Not sure what jquery is? It is basically a bunch a prebuilt javascript to make your life a whole lot easier. Go to http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js to download the most stable version of JQuery as of this post publishing date (1.3.2) or http://jquery.com/ for the most recent version (1.4.2).

Step 2: Install JQuery UI For Better Animations (optional): I highly advise using some animations to spice up the interaction of your AJAX. When a user clicks something that fires your AJAX, they want to know something is happening. If it happens too quickly, they won’t know, so we’ll actually have to slow it down a bit for them. Visit http://jqueryui.com/download to download the UI components if you’d like these better animations. I advise the “core”, the “effects core”, and the “effects blind”. You can try other effects as well such as “fold” if you want a different visual.

Step 3: Make Two Different Pages: The concept of AJAX relies on the existence of two files. The first file is a normal webpage that will contain whatever you want to reload. The second file should use HTML, but not be contained within any html or body tags. The reason for this is your the javascript you are about to create will be loading the entire second document literally within the first document. You can’t have two html or body tags, so don’t use them! Having trouble understanding, well how about an example.  Say you are creating a search feature on your site. The first document is the actual search page that contains the search bar and submit button (say http://samplesite.com/search.html). The second document will hold the results of the search that was submitted on the first page and usually takes some sort of arguments, variables, query strings, or whatever else you’d like to call them (in the case of this example, probably the search terms entered in the search bar).

The HTML for the first document (front-facing):

<img id="loadImg" src="animatedGifLocation" alt="Loading..." />
<div id="opacityWrap"><div id="fillBox"></div></div>
<input id="queryField" type="text" value="" />
<input id="submitQueryButton" type="button" value="Submit Query" />

The PHP for the second document (hidden from users):

<?php
  $textBoxContent = $_GET['data'];
  echo ("<p>".$textBoxContent."</p>");
?>

Step 4: Write Some Javascript: Using some preexisting jquery functions, all we have to do is throw together a simple function that is called on the button click (or whatever else works for your particular situation). This particular javascript below uses an animated gif to indicate loading and a div two grey out the loading content box.

$("#submitQueryButton").click(function() {
  $("#opacityWrap").animate({ opacity: .15 }, 100);
  $("#loadImg").show();
  $("#fillBox").load("secondPageURLhere?query=" + $("#queryField").val(),function() {
    $("#loadImg").hide();
    $("#opacityWrap").animate({ opacity: 1.0 }, 100);
  });
});

Step 5: See It In Action:

Loading...

Dependent on whether you enter a number or a word into the text box, different content will load here. The button calls an AJAX function that loads another page. This page, dependent on the request sent by the AJAX, outputs the page’s determination of what you entered.

The most useful time for this implementation of AJAX is when you want to communicate with your database to load content that your already rendered page doesn’t have. This particular example does not actually use any information from a database, but it should get the point across. So now that you know how to implement this, go and do it! Ask questions if you got ‘em.

Tags: , ,
Posted in AJAX Tutorials | No Comments »

AJAX: Wait Here Just A Minute

Sunday, September 12th, 2010

The best thing about Ajax is you can get brand new content on a page without having to reload it. The worst thing about ajax is people aren’t entirely used to waiting for content if they don’t see a page reload. Well, there is a quick and easy solution for that problem: animated gifs! In the beginnings of the web, animated gifs were used to make flashing titles that somehow everyone thought were the bee’s knees. Now that those are thankfully out of fashion, we can use animated gifs as an indicator that the website is “thinking”. The average web user won’t understand what all this AJAX stuff is doing in the background, all they need is something to tell them to wait just a little bit. Here are a few examples that I created using an awesome AJAX loading gif generator:

Oooh, that’s pretty. But maybe something more simple?

I like the simplicity, but it is too circly. Fix it designer!

And here’s a bar that could be used to indicate more of a “progress” concept instead of a “loading” concept:

I can guarantee that you’ve seen these types of images all over the web, and now you know why. It is possible people will implement these animated gifs for other purposes, but mostly, you’ll just experience them because of AJAX. Now go have fun making your own!

Tags: , ,
Posted in AJAX Tutorials, User Experience | No Comments »

AJAX: What The Heck Is It?

Monday, August 16th, 2010

Ajax is the new web 2.0 fad, and it is probably here to stay for quite some time. AJAX, or Asynchronous Javascript and XML, is a method used to communicate with the server and load new content in a website without having to reload the page. You’ve probably seen it all over the web, but possibly without necessarily thinking about what it is. The minor difference makes a huge positive impact on users, and a pretty negative impact on page impressions.

So what type of things would AJAX come in handy for? Well a very common implementation is for search tools. Say you are on a site looking for houses and there are tons of criteria you can enter in to narrow down your search. It is really helpful to see how each change in your criteria affects your results. To offer constant feedback, web developers need to use AJAX to bring back search results each time you change criteria. If they didn’t use AJAX, you’d be staring at a page reload every time, and that’d be mindbogglingly annoying…

A great example is a search tool I worked on at my company, College Prowler. The tool is meant for high school students trying to find colleges that fit their criteria of where they want to attend a college. Test it out and see for yourself here. The telltale sign of AJAX by the way is one of those circling gifs to indicate something is loading, so keep an eye out for that as you browse the web.

So now maybe you understand the benefits of AJAX. It makes for a much more fun and usable experience for users as they traverse your website. The serious downside is a decrease in your pageviews. Every time you make an AJAX call, you lose what would have been a new page load and thus a new pageview. With each pageview (if you know what’s good for you AND have a highly trafficked website), you gain ad income. Now you could argue that with the improved user experience, you’ll make up for the lost pageviews in your AJAX tool with more devoted users (an argument I agree with), but that doesn’t cut it for everyone.

So make the choice to go with AJAX. In an upcoming post, I’ll write about the basics of AJAX and how to implement it.
Cheerio!

Tags: , ,
Posted in AJAX Tutorials, User Experience | No Comments »