Category Archives: ajax-basics

Ajax Basics

meteor one javascript api for client and server

You’ve probably already heard about Meteor, it’s been around for a few years now and has a stable release (1.2) available. But if not…

In a nutshell – Meteor is a JavaScript framework which exposes an API for both client and server. So you can write your front-end and back-end all in JS. It’s built on Node.js and released under the MIT License.

Apart from allowing developers to write apps entirely in JS (well, through in some HTML and CSS for good measure), it also promotes a publish-subscribe pattern which means code changes can automatically be synchronized between server and all clients in real-time.

Check out the official Meteor website – it has great getting started guides. You could be running your first full app in about ten minutes!

The coolest JavaScript websites of 2013

Since our website was started, there’s been many great JavaScript related websites come and go.

We thought it would be nice to compile a list of the some of the best and coolest JavaScript website around today (I admit, most of these have been around for a while, but they are truly awesome).

JSFiddle
Probably one of the easiest ways to test out code with minimum effort.
1. Pick a JS Framework or extension.
2. Pick the load event.
3. Give it a name and description (if you want)
4. Use JavaScript or CoffeeScript.
5. Enter your HTML
6. Enter your JavaScript/CoffeeScript
7. Enter your CSS
8. Run it, save it, test it, play with it.
9. Enjoy.

Visit JSFiddle and try it out.

JS Beautifier
Got some unformatted JavaScript code (or HTML)? use this free on-line service to make your code beautiful.
You can also get the source-code under MIT, or get an extension for your browser or IDE.

Simply paste your ugly code into the website, pick your preferred settings (indentation for example) and hit the button. Lovely code will soon appear.

Visit JSBeautifier and try it out.

JS Lint

Not sure if your JavaScript code is written well? need a second opinion? use JSLint. It’s a free on-line service where you paste in your code, pick from a bunch of settings and submit.
JSLint will go through your code, line by line, giving you an in-depth analysis of any potential problems.

It’s known as the “JavaScript code quality tool” for a good reason. It really can be very useful.

Visit JSLint and try it out.

Look out for the second instalment…

AjaxTutorial.net gets a facelift

How to create a PHP web template – Part 1

Leave a reply

In this post I’m going to explain how I usually set-up a simple PHP website, from scratch.

This is part one of two.

Brief summary of the main steps involved.

1. First we will create the HEADER – this will be the area occupying the top of the page, and will include the logo and top level navigation. It’ll also contain the HTML meta data (page title, description and keywords) which will dynamically change depending on the page.

2. Next up will be the FOOTER – you guessed it, this will occupy the bottom of each page. It’ll include the website name, copyright notice and some general links (like privacy policy for example).

3. We will create some content pages and hook into the HEADER and FOOTER.

Preparation required.

My very first step before I start any coding, is to create a graphical mock up design and logo. I usually use a graphics package like Fireworks, Photoshop or Inkscape (free and extremely good). Below is a quick mock up design I created earlier for a fictional website called ‘MyWebsiteTemplateExample’.

my website template example

After I have my idea ready, it’s time to create a template HTML file. Here is what I do…

1. Crop the logo (and any other images) from the mock-up design and save them to a folder called ‘images’.

2. Take note of the colors used in the design (most graphics tools can give you the HTML color code).

3. Create the HTML of the mock-up (I’m not going to teach you HTML, that’s too much for this post. Use a WYSIWYG if you have to).

4. Create a CSS file to hold all the styles used on the basic page. Save it in a folder called ‘styles’.

Now, that will keep you busy for a couple of hours, at least.

In part two, I will show you how to create the HEADER, FOOTER and CONTENT pages from your basic template. Once you’ve created one page, the rest will take no time.

Fear not, part two will be available very soon.

Basic Ajax usage with jQuery

Leave a reply

In this article we will be talking about the basic usage of Ajax with jQuery 1.4.2 production (24KB, Minified and Gzipped).

In order to use the JavaScript examples in this article, you should first download jQuery and include it on your page using:

<script type="text/javascript" src="jquery-1.4.2.js"></script>

Throughout this article our Ajax scripts will communicate with ‘serverscript.php‘ our Server script.

<?php 
if(isset($_POST['firstname']) && 
   isset($_POST['lastname'])) {
 echo "Hey {$_POST['firstname']} {$_POST['lastname']}, 
   you rock!\n(repsonse to your POST request)";
}
if(isset($_GET['firstname']) && 
   isset($_GET['lastname'])) {
 echo "Hey {$_GET['firstname']} {$_GET['lastname']}, 
   you rock!\(response to your GET request)";
}
?>

Method One – POST (Asynchronous with data):

Transfer data to the server (using POST method), and retrieve a response:

function doAjaxPost() {
 $.ajax({
   type: "POST",
   url: "serverscript.php",
   data: "firstname=clint&lastname=eastwood",
   success: function(resp){
     // we have the response
     alert("Server said:\n '" + resp + "'");
   },
   error: function(e){
     alert('Error: ' + e);
   }
 });
}

doAjaxPost();

Method Two – GET (Asynchronous with data):

Transfer data to the server (using GET method), and retreive a response:

function doAjaxGet() {
 $.ajax({
   type: "GET",
   url: "serverscript.php",
   data: "firstname=clint&lastname=eastwood",
   success: function(resp){
     // we have the response
     alert("Server said:\n '" + resp + "'");
   },
   error: function(e){
     alert('Error: ' + e);
   }
 });
}

doAjaxGet();

Note that GET is the default type for Ajax calls using jQuery, so we really do not need to explicitly state it, but I’ve placed it there just for clarity.

Practical jQuery Example using POST:

<html>
<head>
<title>jQuery Example</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
  <script>
function doAjaxPost() {
 // get the form values
 var field_a = $('#field_a').val();
 var field_b = $('#field_b').val();

 $.ajax({
   type: "POST",
   url: "serverscript.php",
   data: "firstname="+field_a+"&lastname="+field_b,
   success: function(resp){
     // we have the response
     alert("Server said:\n '" + resp + "'");
   },
   error: function(e){
     alert('Error: ' + e);
   }
 });
}
</script>

First Name: <input type="text" id="field_a" value="Sergio"> <br />
Last Name: <input type="text" id="field_b" value="Leone"> <br />
<input type="button" value="Ajax Request" onClick="doAjaxPost()">

</body>
</html>

jQuery Example in Browser

Well there you have it, not too tricky and with a weight of only 24Kb for the base library you can’t go wrong. Of course, jQuery can be used for a whole heap of other tasks.

Until next time (when we cover MooTools), Happy A’jaxing!

AjaxTutorial.Net

JavaScript News and Tips