Insanityville

Make an AJAX link validation script in 3 easy steps

By in-sanity on May 15th, 2008

Being a web developer, and having a bit of experience in this field, I noticed that some tasks are need almost in any application that I developed. So, instead of waisting time writing the same code over and over again, started making little snippets of code to reuse.

This is my very first tutorial ever so please bear with me. In this little tutorial, I will show you a very rudimentary way to check a broken link with php and jQuery.

Now, this is not based upon the server’s response to our request, but rather check to see if we can open that file with fopen() in read-only mode.

The algorithm for doing this is as follows:

fill in the address in the form;
submit the form;
check to see if we can open that file in read-only mode;
if yes, say ‘It’s all good’;
if not, say ‘This link sucks’.

STEP 1: The first thing that we need is a form with an text input and a button to submit the information contained in that text input. So, lets make a basic form with two inputs. You can call this page whatever you like.

<html>

<head>

h1 {

margin: 0;

padding: 25px 0 0 0;

}

.formContainer {

display: inline;

width: 50%;

align: left;

}

.form {

text-align: left;

padding-top:10px;

font-size: 15px;

}

span {

text-align: left;

padding-top:3px;

font-size: 15px;

}

.textInput {

border: 1px dotted #ccc;

font: bold 16px Verdana;

}

.messagebox{

position:absolute;

width:100px;

margin-left:30px;

border:1px solid #c93;

background:#ffc;

padding:3px;

}

.messageboxok{

position:absolute;

width:auto;

margin-left:30px;

border:1px solid #349534;

background:#C9FFCA;

padding:3px;

font-weight:bold;

color:#008000;

}

.messageboxerror{

position:absolute;

width:auto;

margin-left:30px;

border:1px solid #CC0000;

background:#F7CBCA;

padding:3px;

font-weight:bold;

color:#CC0000;

}

</style>

</head>

<body>

<h2>Please fill out the form:</h2>

URL : <input name="url" type="text" id="url" maxlength="100" class="textInput" /> <input type="button" id="checkURL" value="Check Link Status" />

</div>

</body>

Note that I didn’t use the <form> tag because I don’t need to refresh my page in order to get my result. In stead of that, I will attach an click event to this button with jQuery.

STEP 2: Now that we have our nice form, we need to create our PHP file to do the link checking part. Save it in the same directory as the HTML file. You can call this page whatever you like, as long as you remember it’s name.

<?php

if(isset($_REQUEST['url'])) { // if we get an URL via POST or GET

$url = trim($_REQUEST['url']); // eliminate any spaces at the beginning or the end

$fp = @fopen($url, "r"); // try to open the file in read-only mode

if (!$fp) { // if it failed to open

echo ‘no’;

}

else { // if we succeeded

echo ‘yes’;

}

Basically, when this file is called, all the stuff commented happens. It’s pretty basic stuff.

All that being done, you can download the latest jQuery from here. Save it in the same folder as the other files.

STEP 3: Now, create a new file and call it code.js. In this file paste the following code:

$(document).ready(function() {

var checkLink = function (url) {

//remove all the existent classes, add the messagebox classes and start fading

$("#msgbox").removeClass().addClass(‘messagebox’).text(‘Checking…’).fadeIn("slow");

var link = $(‘#url’).val();

$.post(

"php/linkChecker.php",

{url: link},

function(data) {

if(data==’no’) { //if username not avaiable

$("#msgbox").fadeTo(200,0.1,function() { //start fading the messagebox

//add message and change the class of the box and start fading

$(this).html(‘Link Broken!’).addClass(‘messageboxerror’).fadeTo(900,1);

});

}

else {

$("#msgbox").fadeTo(200,0.1,function() { //start fading the messagebox

//add message and change the class of the box and start fading

$(this).html(‘Link Valid!’).addClass(‘messageboxok’).fadeTo(900,1);

});

}

)}

$("#checkURL").click(checkLink);

});

And there you have it! A simple link validation tool that does the job well and fast.

The code is documented as you can see. Let’s talk a bit more about this javascript code.

It starts with $(document).ready(function() {, which means that as soon as the document is loaded it will execute the code found in the scope.

Next, we see var checkLink = function (url) {, which is a function declaration with the name checkLink.

And next, after the closing bracket of the checkLink function scope, we find another line of code, $("#checkURL").click(checkLink);, which sets everything in motion. What this means is that when the DOM element with the ID=”checkURL” is clicked, it will call the function checkLink.

In the checkLink function, there are some interesting calls and chained instructions. Let’s see what all of that means.

$("#msgbox").removeClass().addClass(‘messagebox’).text(‘Checking…’).fadeIn("slow");

This means that, to the DOM element with the ID=”msgbox”, in this case a span element, we remove any CSS class assigned to it, then we add the messagebox CSS class, we want to write ‘Checking…’ in that span so we add that and finally we add a little eye candy fadeIn effect.

var link = $(‘#url’).val();

This is pretty straight forward. Assign the value contained in the field with the ID=”url” to variable named link.

"php/linkChecker.php", // this the name you picked for your PHP file

{url: link},

The lines above are the ones that tell to load the PHP file and to send via POST the following query string: linkChecker.php?url=link. You can see this if you have the Firebug extension installed in your Firefox browser.Then the PHP script kicks in and does that little check.

After that we get the response that we set to be ‘yes’ or ‘no’. According to that response we get the appropriated message displayed.

Hopefully I was explicit enough with this little script. You can also download this script from my scripts page found here. Also, a demo of this little script can be found here.

Thanks for reading!

Show me love

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks