AJAX introduction

Falcon · #21 (**permalink**) 03-19-2008, 01:34 AM

Hi Buddies

Accessibility in AJAX

Non-Ajax users would ideally continue to load and manipulate the whole page as a fall back, enabling the developers to preserve the experience of users in non-Ajax environments (including all relevant accessibility concerns) while giving those with capable browsers a much more responsive experience. For this reason it is advised to first develop a full application without Ajax, and implement Ajax enhancements as an addition only. The same counts for JavaScript in general, as this can be disabled in most browsers, thereby hindering user experience at Web sites that rely on these technologies.

Regards
Falcon

senraj · #22 (**permalink**) 03-20-2008, 05:52 AM

Hi,

AJAX introduction

am explain only focus on how to create a basic working AJAX - PHP communication.

The only important thing at the moment is that AJAX uses JavaScript so it need to be enabled in your browser to successfully complete.

The AJAX PHP connection we will create a very simple form with 2 input fields. In the first field you can type any text and we will send this text to our PHP script which will convert it to uppercase and sends it back to us. At the end we will put the result into the second input field. ( The example maybe not very useful but I think it is acceptable at this level. )

senraj · #23 (**permalink**) 03-20-2008, 05:56 AM

Hi,

So,let's list what we need to do:

* Listen on key-press event on the input field.
* In case of key-press send a message to the PHP script on the server.
* Process the input with PHP and send back the result.
* Capture the returning data and display it.

Our html code is very simple it looks like this:

Code:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ajax - introduction</title>

</head>

<body>

<form name="testForm">

Input text: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />

Output text: <input type="text" name="outputText" id="outputText" />

</form>

</body>

</html>

senraj · #24 (**permalink**) 03-20-2008, 06:01 AM

Hi,

AJAX introduction

As you can see there is a doWork() function which is called in every case when a key is up (a key was pressed). Of course you can use any other supported events if you want.

But what is this doWork() and how we can send messages to the server script?

Before the explanation of the doWork() function we first need to learn a more important thing. To make a communication between the client and the server the client code needs to create a so called XMLHttpRequest object. This object will be responsible for AJAX PHP communication.

However creating this object is bit triky as the browser implement it various ways. If you don't want to support the quite old browsers we can do it as follows:

Code:

// Get the HTTP Object

function getHTTPObject(){

if (window.ActiveXObject)

return new ActiveXObject("Microsoft.XMLHTTP");

else if (window.XMLHttpRequest)

return new XMLHttpRequest();

else {

alert("Your browser does not support AJAX.");

return null;

}

}

senraj · #25 (**permalink**) 03-20-2008, 06:04 AM

Hi,

AJAX introduction

First of all we need to get a valid XMLHttpRequest object. If we have it then we can send the value of the inputText field to the server script. We do this by composing an URL with parameter, so in the PHP script we can use the $_GET super-global array to catch the data. As next step we call the send() function of the XMLHttpRequest object which will send our request to the server. At the moment our doWork() function looks like this:

Code:

// Implement business logic

function doWork()
{

httpObject = getHTTPObject();

if (httpObject != null) {

httpObject.open("GET", "upperCase.php?inputText="

+document.getElementById('inputText').value, true);

httpObject.send(null);

}

}

senraj · #26 (**permalink**) 03-20-2008, 06:07 AM

Hi,

AJAX introduction

how we can catch the response from the server?

To do this we need to use an other special property of the XMLHttpRequest object. We can assign a function to this parameter and this function will be called if the state of the object was changed.

Code:

// Implement business logic

function doWork(){

httpObject = getHTTPObject();

if (httpObject != null) {

httpObject.open("GET", "upperCase.php?inputText="

+document.getElementById('inputText').value, true);

httpObject.send(null);

httpObject.onreadystatechange = setOutput;

}

}

senraj · #27 (**permalink**) 03-20-2008, 06:10 AM

Hi,

client side is to implement the setOutput() function which will change the value of our second field. The only interesting thing in this function that we need to check the actual state of the XMLHttpRequest object. We need to change the field value only if the state is complete. The readyState property can have the following values:

* 0 = uninitialized
* 1 = loading
* 2 = loaded
* 3 = interactive
* 4 = complete

So the setOutput() looks like this:

Code:

// Change the value of the outputText field

function setOutput(){

if(httpObject.readyState == 4){

document.getElementById('outputText').value

= httpObject.responseText;

}

}

Now the client side is ready let's implement the server side.

senraj · #28 (**permalink**) 03-20-2008, 06:12 AM

Hi,

AJAX introduction

Implementing the server side functionality is very simple compared to the client side. In the PHP code we just need to check the $_GET super-global array. Afterwards convert it to uppercase and echo the result.

Code:

<?php

if (isset($_GET['inputText']))

echo strtoupper($_GET['inputText']);

?>

senraj · #29 (**permalink**) 03-20-2008, 06:17 AM

Hi,

above explain how to create a basic working on AJAX. below view full code...

client side
--------
<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ajax - introduction</title>

</head>

<body>

<script language="javascript" type="text/javascript">

// Get the HTTP Object

function getHTTPObject()
{

if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");

else if (window.XMLHttpRequest) return new XMLHttpRequest();

else
{

alert("Your browser does not support AJAX.");

return null;

}

}

// Change the value of the outputText field

function setOutput()
{

if(httpObject.readyState == 4)
{

document.getElementById('outputText').value = httpObject.responseText;

}

}

// Implement business logic

function doWork()
{

httpObject = getHTTPObject();

if (httpObject != null)
{

httpObject.open("GET", "upperCase.php?inputText="

+document.getElementById('inputText').value, true);

httpObject.send(null);

httpObject.onreadystatechange = setOutput;

}

}

var httpObject = null;

</script>

<form name="testForm">

Input text: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />

Output text: <input type="text" name="outputText" id="outputText" />

</form>

</body>

</html>

server side
-----------
<?php

if (isset($_GET['inputText']))

echo strtoupper($_GET['inputText']);

?>

Falcon · #30 (**permalink**) 03-21-2008, 05:57 AM

Hi Buddies

Bandwidth usage

By generating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data, Ajax web pages can appear to load relatively quickly since the payload coming down is much smaller in size, and the rest of the layout does not have to be redrawn on each update. An example of this technique is a large result set where multiple pages of data exist. With Ajax, the HTML of the page (e.g., a table structure with related <TR> and <TD> tags) can be produced locally in the browser, not brought down with the first page of the document. In addition to "load on demand" of contents, some web-based applications load stubs of event handlers and then load the functions on the fly. This technique significantly cuts down the bandwidth consumption for web applications. In addition Ajax works on the client and shares some work of the server, so reducing the server load. But nice GUI interfaces have their price. Compared to old fashioned and far less powerful applications, they transfer tremendous amounts of data, and you will never want to use any AJAX based applications if you have to pay for the amount of data transferred between the browser and the web server.

Regards
Falcon

Falcon · #31 (**permalink**) 03-21-2008, 06:00 AM

Hi Buddies

Separation of data, format, style, and function

A less specific benefit of the Ajax approach is that it tends to encourage programmers to clearly separate the methods and formats used for the different aspects of information delivery via the web. Although Ajax can appear to be a jumble of languages and techniques, and programmers are free to adopt and adapt whatever works for them, they are generally propelled by the development motive itself to adopt separation among the following:

Raw data or content to be delivered, which is normally embedded in XML and sometimes derived from a server-side database.
Format or structure of the webpage, which is almost always built in HTML or XHTML and is then reflected and made available to dynamic manipulation in the DOM.
Style elements of the webpage: everything from fonts to picture placement are derived by reference to embedded or referenced CSS.
Functionality of the webpage, which is provided by a combination of:

Javascript on the client browser (Also called DHTML),

Standard HTTP and XMLHttp or client-to-server communication, and

Server-side scripting and/or programs using any suitable language
preferred by the programmer to receive the client's specific requests and respond appropriately.

Regards
Falcon

Jeyaseelansarc · #32 (**permalink**) 03-28-2008, 11:51 PM

Hi,
i have a small query

while processing a ajax request we are using a function as

Code:

onreadystatechange = function()
{
//# - Check Ajax status and do the process 
}

instead of above can we call as function

Code:

onreadystatechange = callfun();

can we get all the result from this function?

sureshbabu · #33 (**permalink**) 03-29-2008, 01:35 AM

what is meant by statechange in ajax?

sureshbabu · #34 (**permalink**) 03-29-2008, 01:37 AM

how to get response from ajaxfile output using ajax?

sureshbabu · #35 (**permalink**) 03-29-2008, 01:39 AM

what is the use of ajax object ?

Jeyaseelansarc · #36 (**permalink**) 03-31-2008, 02:24 AM

Quote:

Originally Posted by sureshbabu

what is meant by statechange in ajax?

Hi Suresh,
After we requested the server to give response thru Ajax call, we use this function to get status of the request.

In general we are using onreadystagechange function to get current status of Ajax call

Jeyaseelansarc · #37 (**permalink**) 03-31-2008, 02:38 AM

Quote:

Originally Posted by sureshbabu

what is the use of ajax object ?

Hi,
It seems that u are not understand the Ajax concept through.

Without declaring the Ajax Object you cannot call Ajax from Javascript console to put or get values from server

Jeyaseelansarc · #38 (**permalink**) 03-31-2008, 02:39 AM

Quote:

Originally Posted by sureshbabu

how to get response from ajaxfile output using ajax?

If your response in XML
then you can use AjaxObj.responseXml

If your response in Text
then you can use AjaxObj.responseText

can it be helped you?

sureshbabu · #39 (**permalink**) 03-31-2008, 07:12 AM

what is the main use of xml in ajax?

Jeyaseelansarc · #40 (**permalink**) 03-31-2008, 07:44 AM

Hi,
This is already explained

but i have given you below the main uses of Ajax

1. Ajax allows for the ability to make asynchronous calls to a web server. This
allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more.

2. By not performing a full postback and sending all form data to the server, the network utilization is minimized and quicker operations occur. In sites and locations with restricted pipes for data transfer, this can greatly improve network performance.

3. With the fact that only the necessary data is sent to the server, the server is not required to process all form elements. By sending only the necessary data, there is limited processing on the server. There is no need to process all form elements, process the viewstate, send images back to the client, and no need to send a full page back to the client.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Introduction to ColdFusion	MasterMind