Simple Ajax Library

By Krstevski on Feb 26th, 2010 3:05 pm

This simple library containing some methods of Ajax.

Example about addContent(url, target):
With this function you can change the content of the someone DIV tag.

E.g:
index.php

<html>
<head>
	<title>Untitled Document</title>
	<script type="text/javascript" src="ajax.js"></script>
</head>

<body>
	<div id="test">
        <a href="javascript: addContent('test.php', 'content')"> Change </a>
    </div>
    
	<div id="content">
    	<label> This is just test... </label>
    </div>
    
</body>
</html>

test.php

<?php
   echo "Simple Ajax Library Example!";
?>

When you click on "Change" then the content of the div tag named "content" will change to what you have written in the file (In this example, test.php -> Simple Ajax Library Example!).

The functions getResults(str, url, target) and suggest(str, url, target) are Ajax methods with more arguments.

str = input string
url = The url or resource file
target = id name of div tag where you want to display the results

----

This library is nothing special, but can be very useful and saves much time.
The library is tested only with PHP.
Every remark are welcome and if you have any idea of upgrading / changing this library you can do it.

Thanks, SkyDriver.

// JavaScript Document

/*
	@Author SkyDriver - Damjan Krstevski
	@Country/City: Macedonia, Skopje
	@Date 26/2/2010 - 10:31 AM
	@Description: Ajax library...
	@License: Freeware, you can use, change and redistributed this library.
*/

var xmlhttp;

/// <summary> Changing the contents of a tag </summary>
/// <param name="url"> URL/Resource File with content who want to change </param>
/// <param name="target">ID name of DIV tag where you want to make change </param>
/// <api> javascript: addContent('myfile.php', 'mydivid'); </api>
function addContent(url, target) {
	try {
		xmlhttp = GetXmlHttpObject();
		if (xmlhttp == null) {
			alert (error);
			return;
		}
		xmlhttp.open("GET", url, false);
		xmlhttp.send(null);
		document.getElementById(target).innerHTML = xmlhttp.responseText;
	} catch (e) {
		alert("An error occurred.\nDetails: " + e);
	}
}


/// <summary> Reading records from database/file and changing the contents of a tag </summary>
/// <param name="str"> Input string (search string) </param>
/// <param name="url"> URL/Resource File with the code for getting the information from the database/file </param>
/// <param name="target">ID name of DIV tag where you want to show results </param>
/// <api> onClick="getResults('my search string', 'getResults.php', 'mydivid')" </api>
function getResults(str, url, target) {
	xmlhttp = GetXmlHttpObject();
	if (xmlhttp == null) {
		alert ("Your browser does not support XMLHTTP!");
		return;
	}
	url = url + "?q=" + str;
	url = url + "&sid=" + Math.random();
	xmlhttp.open("GET", url, false);
	xmlhttp.send(null);
	document.getElementById(target).innerHTML = xmlhttp.responseText;
}


/// <summary> Help with search (suggest) </summary>
/// <param name="str"> Input string (search string) </param>
/// <param name="url"> URL/Resource File with the code for getting the information from the database/file </param>
/// <param name="target">ID name of DIV tag where you want to show results </param>
/// <api> onkeyup="suggest(this.value, 'getSuggest.php', 'mydivid')" </api>
function suggest(str, url, target) {
	if (str.length == 0) {
		document.getElementById(target).innerHTML = "";
		return;
	}
	xmlhttp = GetXmlHttpObject();
	if (xmlhttp == null) {
  		alert ("Your browser does not support XMLHTTP!");
  		return;
	} 
	url = url + "?q=" + str;
	url = url + "&sid=" + Math.random();
	xmlhttp.open("GET", url, false);
	xmlhttp.send(null);
	document.getElementById(target).innerHTML = xmlhttp.responseText;
}

function GetXmlHttpObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	}
	if (window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
	return null;
}

This article has been dead for over three months

You