Compress Javascript and CSS Files Using PHP

Enhance your Javascript and CSS resources:

I have been doing some web applications lately, and wanted to compress my Javascript and CSS files so that page loads are quicker and also the files are cached at all times.

So i thought to myself, that we could truncate the JS and CSS files by removing the unwanted spaces and characters.

So i began writing a script that does the following:

1. Reads JS or CSS files(s) from a particular folder called either js or css.
2. Removes all the unwanted characters and blank spaces.
3. Creates a new file in a new directory called js_cache or css_cache.
4. Wallla!! we have done it, you have successfully reduced the file file size.

The script will allow you to manage easily your Javascript and CSS resources and to reduce the amount of data transferred between the server and the client.

Performances:

We can say that the performance is better but not the best, but it works.

You would see a slight reduce in time between the server and the client.

Restrictions:

In CSS files there are no problems, but in case of Javascript there may some problems where single line comments are used like ‘// comment ‘.

Therefore always use multi line comments like /* comment */ if you want to use this script

Requirements:

1. Create a folder for you project
2. Dump all the js files in js folder and css files in css folder
3. Then create two more folders js_cache and css_cache
4. Copy and paste this script in the project directory
5. Edit the script by changing the constant FILE_TYPE as js or css only
6. Run the script
7. New files will be created in js_cache and css_cache
8. Wow, its done now use these file instead of the original one

ALL THE BEST…

HAPPY SCRIPTING…..

Do keep sharing!!!

Download file:

Compress Javascript and CSS Files Using PHP

Basic AJAX (Asynchronous JavaScript and XML)

Ajax, sometimes written as AJAX (shorthand for asynchronous JavaScript and XML), is a group of interrelated web development techniques used on the client-side to create interactive web applications or rich Internet applications.

With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.


/**
* Declare global variable....
* @param string elementName this is to identify the elemnt in which the response should be dispalyed. like as div id (required)
*/
var elementName = "";

/**
* Open a connection to the specified URL, which is
* intended to provide an XML message. The specified data
* is sent to the server as parameters. This is the same as
* calling xmlOpen(“POST”, url, toSend, responseHandler).
*
* @param string url The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The Javascript function handling server response.
* @param function elementIdentify The elemnt in which the response should be dispalyed.
*/
function xmlPost(url, toSend, responseHandler, elementIdentify)
{
elementName = elementIdentify;
xmlOpen(“POST”, url, toSend, responseHandler);
}

/**
* Open a connection to the specified URL, which is
* intended to provide an XML message. No other data is
* sent to the server. This is the same as calling
* xmlOpen(“GET”, url, null, responseHandler).
*
* @param string url The URL to connect to.
* @param function responseHandler The Javascript function handling server response.
* @param function elementIdentify The elemnt in which the response should be dispalyed.
*/
function xmlGet(url, responseHandler, elementIdentify)
{
elementName = elementIdentify;
xmlOpen(“GET”, url, null, responseHandler);
/**
* This code can be used if you need to call the required function after every interval i.e seconds..
* setTimeout(“xmlGet(‘products.php’, notesResponseHandler)”,3000);
* setTimeout(“alert(‘products.php’)”,3000);
*/
}

/**
* Open a connection to the specified URL, which is
* intended to respond with an XML message.
*
* @param string method The connection method; either “GET” or “POST”.
* @param string url The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The Javascript function handling server response.
*/
function xmlOpen(method, url, toSend, responseHandler)
{
// alert(url);
if (window.XMLHttpRequest)
{
// browser has native support for XMLHttpRequest object
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// try XMLHTTP ActiveX (Internet Explorer) version
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}

if(req)
{
req.onreadystatechange = responseHandler;
req.open(method, url, true);
req.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
req.send(toSend);
}
else
{
alert(‘Your browser does not seem to support XMLHttpRequest.’);
}
}

/**
* Handler for server’s response to notes.xml request.
* Notes are pulled from notes.xml and replace the
* contents of the DIV with id ‘notesSection’.
*/
function notesResponseHandler()
{
// Make sure the request is loaded (readyState = 4)
if (req.readyState == 4)
{
// Make sure the status is “OK”
if (req.status == 200)
{
var swappableSection = document.getElementById(elementName);
var str = req.responseText;
swappableSection.innerHTML = str;
}
else
{
alert(“There was a problem retrieving the XML data:\n” +
req.statusText);
}
}
}

/**
* When a file gets included in the page….
* Call the function on load or on click….
*/
//xmlGet(‘products.php’, notesResponseHandler);
//alert(‘called’);

IE6+ window.location doesn’t work (redirect to a page)

In IE6+ window.location doesn’t work so a turn around would be changing the JS script or working with the environment and calling the JS script in a different manner.

Here how it works:-
1. First check the browser and its version.
2. Call the JS script.

Example:

var url=’http://austinnoronha.wordpress.com’;
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)
if (browser_type==”Netscape”&&browser_version>=4)
{
//if NS 4+
window.location.replace(url);
}
else if (browser_type==”Microsoft Internet Explorer”&&browser_version>=4)
{
//if IE 4+
window.location.replace(url);
}
else
{
//Default goto page (NOT NS 4+ and NOT IE 4+)
window.location=url;
}