What is Ajax - Asynchronous JavaScript and XML

This section explains you the Ajax You will learn the basics of Ajax Ajax is of the most important technologies for the development of highly interactive web application and due to its features it has become extremely popular these days

What is Ajax

Asynchronous JavaScript and XML or Ajax for short is new web development technique used for the development of most interactive website Ajax helps you in making your web application more interactive by retrieving small amount of data from web server and then showing it on your application You can do all these things without refreshing your page

Usually in all the web applications the user enters the data into the form and then clicks on the submit button to submit the request to the server Server processes the request and returns the view in new page (by reloading the whole page) This process is inefficient time consuming and a little frustrating for you user if the only the small amount of data exchange is required For example in a user registration form this can be frustrating thing for the user as whole page is reloaded only to check the availability of the user name Ajax will help in making your application more interactive With the help of Ajax you can tune your application to check the availability of the user name without refreshing the whole page

Understanding the technology behind Ajax

Ajax is not a single technology but it is a combination of many technologies These technologies are supported by modern web browsers Following are techniques used in the Ajax applications

bull JavaScript JavaScript is used to make a request to the web server Once the response is returned by the web server more JavaScript can be used to update the current page DHTML and CSS are used to show the output to the user JavaScript is used very heavily to provide the dynamic behavior to the application

bull Asynchronous Call to the Server Most of the Ajax application used the XMLHttpRequest object to send the request to the web server These calls are Asynchronous and there is no need to wait for the response to come back User can do the normal work without any problem

bull XML XML may be used to receive the data returned from the web server JavaScript can be used to process the XML data returned from the web server easily

How Ajax Works

When user first visits the page the Ajax engine is initialized and loaded From that point of time user interacts with Ajax engine to interact with the web server The Ajax engine operates asynchronously while sending the request to the server and receiving the response from server Ajax life cycle within the web browser can be divided into following stages

bull User Visit to the page User visits the URL by typing URL in browser or clicking a link from some other page

bull Initialization of Ajax engine When the page is initially loaded the Ajax engine is also initialized The Ajax engine can also be set to continuously refresh the page content without refreshing the whole page

bull Event Processing Loop Browser event may instruct the Ajax engine to send request to server and receive the response data Server response - Ajax engine receives the response from the server Then it calls the JavaScript call back functions Browser (View) update - JavaScript request call back functions is used to update the browser DHTML and css is used to update the browser display

Benefits of Ajax

Ajax is new very promising technology which has become extremely popular these days Here are the benefits of using Ajax

bull Ajax can be used for creating rich web-based applications that look and works like a desktop application

bull Ajax is easy to learn Ajax is based on JavaScript and existing technologies like XML CSS and DHTML Etc So its very easy to learn Ajax

bull Ajax can be used to develop web applications that can update the page data continuously without refreshing the whole page

The Role of AJAX in enhancing the user experience on the Web ( Sagar G Arlekar - June 2006)

AJAX is not a new technology but a combination of several existing technologies in a new way These include HTML CSS DOM XML XSLT XMLHttpRequest and JavaScript The acronym AJAX stands for Asynchronous JavaScript and XML AJAX is based on open standards supported by many browsers and platforms AJAX is a new paradigm for building web application

AJAX applications eliminate the start-stop-start-stop nature of traditional web pages hence allow web application to look and behave like the desktop ones of course to a limited extent AJAX allows pages to request small bits of information from the server instead of entire pages This incremental updating of pages eliminates the page refresh problem and slow response that have plagued Web applications since their inception

AJAX has received tremendous industry recognition and support The major software giants and web portals have adopted it A large number of AJAX toolkits and libraries are available for free AJAX does have its limitation but most of them can be overcome by integrating AJAX with other technologies whenever required

AJAX is here to change the user experience on desktop as well as on mobile devices

Rich Internet Applications

According to Wikipedia Rich Internet Applications (RIA) are web applications that have the features and functionality of traditional desktop applications RIAs transfer the processing necessary for the user interface to the web client but keep the bulk of the data back on the application server

Traditional web applications centered all activity around a client-server architecture with all processing done on the server and the client only displaying static content The biggest drawback with this system is that all interaction must pass through the server which requires data to be sent to the server the server to respond and the page to be reloaded on the client with the response Most traditional web applications have clumsier and difficult to use interfaces compared to desktop ones The primary difference between a RIA and traditional web applications is the amount and quality of interaction between the user and the interface An RIA can use a wider range of controls to improve usersrsquo interaction allowing efficient interactions better error management feedback and overall user experience Another benefit of RIAs is that data can be cached in the client allowing a vastly more responsive user interface and fewer round trips to the server

The Role of AJAX in enhancing the user experience on the Web ( Sagar G Arlekar - June 2006)

AJAX is not a new technology but a combination of several existing technologies in a new way These include HTML CSS DOM XML XSLT XMLHttpRequest and JavaScript The acronym AJAX stands for Asynchronous JavaScript and XML AJAX is based on open standards supported by many browsers and platforms AJAX is a new paradigm for building web application

AJAX applications eliminate the start-stop-start-stop nature of traditional web pages hence allow web application to look and behave like the desktop ones of course to a limited extent AJAX allows pages to request small bits of information from the server instead of entire pages This incremental updating of pages eliminates the page refresh problem and slow response that have plagued Web applications since their inception

AJAX has received tremendous industry recognition and support The major software giants and web portals have adopted it A large number of AJAX toolkits and libraries are available for free AJAX does have its limitation but most of them can be overcome by integrating AJAX with other technologies whenever required

AJAX is here to change the user experience on desktop as well as on mobile devices

Rich Internet Applications

According to Wikipedia Rich Internet Applications (RIA) are web applications that have the features and functionality of traditional desktop applications RIAs transfer the processing necessary for the user interface to the web client but keep the bulk of the data back on the application server

Traditional web applications centered all activity around a client-server architecture with all processing done on the server and the client only displaying static content The biggest drawback with this system is that all interaction must pass through the server which requires data to be sent to the server the server to respond and the page to be reloaded on the client with the response Most traditional web applications have clumsier and difficult to use interfaces compared to desktop ones The primary difference between a RIA and traditional web applications is the amount and quality of interaction between the user and the interface An RIA can use a wider range of controls to improve usersrsquo interaction allowing efficient interactions better error management feedback and overall user experience Another benefit of RIAs is that data can be cached in the client allowing a vastly more responsive user interface and fewer round trips to the server

Some of the features and benefits delivered by RIAs are listed below

a) Allows feedback confirmation and errors messages to be displayed on same pageview

b) Wider variety of controls eg sliders date pickers windows tabs spinners etc

c) No installation just an AJAX enabled browser required

d) Higher immunity to viruses and piracy

e) Reduced load on server resources as processing is distributes over server and client

f) Lowered application development and deployment costs

g) Reduction in network traffic due to more intelligent client and selective data request

The most common technologies used for building RIAs are Java applets and web start Adobe Flash and Flex and AJAX Efforts are being made to make AJAX work with the other mentioned technologies Adobe Systems has released libraries to help developers bridge Adobe Flash and Flex technology with AJAX Similarly libraries are available to integrate AJAX with JavaNETPHPPythonPerlRuby and other backend technologies

What can AJAX do

To start with let me tell the readers that this entire document was composed online using an AJAX powered word processor available at wwwwritelycom

AJAX is playing a crucial role in making Web 20 promises a reality Some of the features of web 20 are

a) Use of Web as the platform

b) Software delivered as a service instead of packaged software

c) Cost-effective scalability

d) Architecture with user participation

AJAX interfaces are a key component of many Web 20 applications Google Yahoo Microsoft Amazon and many others have embraced AJAX

Google services like Maps Gmail Suggest and Reader use it Google Maps which is considered as one of the most impressive and popular AJAX based application allows user to zoom in and out and scroll the map in four directions very much like a desktop application User can drag the map on screen with the mouse pointer and double click to

center All this with no clicking and waiting for graphics to reload each time you want to view the adjacent parts of a map Gmail uses AJAX for spell-check auto save new email check and other functions In Google suggest suggestions are provided in real time as the user types the search query

Yahoos Flicker and instant search use AJAX In Flicker the text-editing and tagging interface uses it Instant search gives user the result as heshe is typing the query Yahoo FrontPage too has been AJAXified

Windows Live is a free AJAX virtual desktop Some of its features are search news maps email integration instant messenger contact management tool etc More features can be included through the use of third party Gadgets

Meebo is a web based instant messenger client it supports Yahoo Gtalk MSN and AIM protocols Writely Zoho gOffice AjaxOffice are AJAX based online word processors some are full-fledged office suits Digg is a technology news website that combines social book marking blogging RSS and non-hierarchical editorial control Travbuddy lets users create travel journals and share travel experiences reviews and photos This application also uses Google Maps Pageflakes Netvibes and Protopage are free startpages

Zimbra is an AJAX based collaboration suit Kiko and Calendarhub are online calendars Pixoh is an online photo editing application

The impact of AJAX on user experience AJAX user interfaces are highly responsive giving users the feeling that changes are instantaneous It also introduces multiple segments of interactivity on the same page User may submit a form and immediately after concentrate on some text or click on a menu item in some other segment Even in case of an error in one segment other segments can stay usable AJAX applications usually avoid the need of horizontal and vertical scrollbars this adds to user convenience

Existing AJAX applications can be categorized into two types 1) partially AJAXed - here AJAX is used to provide certain functionalities eg Flickr and 2) fully AJAXed - here AJAX is necessary for functionalities as well as for user-interface eg Meebo Google Maps Windows Live

The way users use fully AJAXed applications is very different from their traditional web experience In these applications the concept of web pages breaks down surfing a site or using an applications is not just clicking links and loading fresh pages In some applications the response may result in changes to smallcertain parts of the current view the URL in the address bar remains unchanged and the Back Forward Reload and Bookmark buttons are rendered meaningless The browser is not certain to show the previous state of the application on hitting BackForward buttons Users need to adapt to this change in browser behavior

Some of the processeselements in user experience which have undergone AJAXification are mentioned below

a) Hierarchical tree navigation - users find it irritating to navigate trees in Directories and Discussion threads AJAX makes expansioncontraction of tree nodes smooth without making the user wait for the new page to load

b) Form value check - as the user fills in a online form an AJAX call could be made to the server to do tasks like checking availability of user name measure strength of password populate drop-down boxes further down based on data already entered Also auto-completion and spell-check features can be provided

c) Rapid user-user communication - browser based chat applications and games can be built without the need to manually refresh the page to get current datastate

d) Data filtering and rearranging - this include applying a filter sorting by date or some particular column values relocate iframes divs and page elements

e) Server-side pushes - AJAX enables simulation of server-side push technology using polling

AJAX on mobile

Pocket PC and Smartphone Devices (2003 and later) support AJAX

Opera Software has released Opera Platform SDK a kit for developing and running software on mobile phones This SDK will allow development of AJAX based rich mobile applications In addition the Opera Platform SDK will help developers adapt existing content and web applications to run on mobile phones

By storing an AJAX application on the mobile phone and allowing XML-communication with a Web-server the traditional bandwidth constraints become less of an issue This also enables transparent updating of information pushed to the mobile phone

With increasing processor power and wireless network speeds AJAX is sure to play an important role in enhancing mobile user experience

About Author Author has developed a project called ichat using Ajax technologies You can visit httpichatrgoa-developersorg for

center All this with no clicking and waiting for graphics to reload each time you want to view the adjacent parts of a map Gmail uses AJAX for spell-check auto save new email check and other functions In Google suggest suggestions are provided in real time as the user types the search query

Yahoos Flicker and instant search use AJAX In Flicker the text-editing and tagging interface uses it Instant search gives user the result as heshe is typing the query Yahoo FrontPage too has been AJAXified

Windows Live is a free AJAX virtual desktop Some of its features are search news maps email integration instant messenger contact management tool etc More features can be included through the use of third party Gadgets

Meebo is a web based instant messenger client it supports Yahoo Gtalk MSN and AIM protocols Writely Zoho gOffice AjaxOffice are AJAX based online word processors some are full-fledged office suits Digg is a technology news website that combines social book marking blogging RSS and non-hierarchical editorial control Travbuddy lets users create travel journals and share travel experiences reviews and photos This application also uses Google Maps Pageflakes Netvibes and Protopage are free startpages

Zimbra is an AJAX based collaboration suit Kiko and Calendarhub are online calendars Pixoh is an online photo editing application

The impact of AJAX on user experience AJAX user interfaces are highly responsive giving users the feeling that changes are instantaneous It also introduces multiple segments of interactivity on the same page User may submit a form and immediately after concentrate on some text or click on a menu item in some other segment Even in case of an error in one segment other segments can stay usable AJAX applications usually avoid the need of horizontal and vertical scrollbars this adds to user convenience

Existing AJAX applications can be categorized into two types 1) partially AJAXed - here AJAX is used to provide certain functionalities eg Flickr and 2) fully AJAXed - here AJAX is necessary for functionalities as well as for user-interface eg Meebo Google Maps Windows Live

The way users use fully AJAXed applications is very different from their traditional web experience In these applications the concept of web pages breaks down surfing a site or using an applications is not just clicking links and loading fresh pages In some applications the response may result in changes to smallcertain parts of the current view the URL in the address bar remains unchanged and the Back Forward Reload and Bookmark buttons are rendered meaningless The browser is not certain to show the previous state of the application on hitting BackForward buttons Users need to adapt to this change in browser behavior

Some of the processeselements in user experience which have undergone AJAXification are mentioned below

a) Hierarchical tree navigation - users find it irritating to navigate trees in Directories and Discussion threads AJAX makes expansioncontraction of tree nodes smooth without making the user wait for the new page to load

b) Form value check - as the user fills in a online form an AJAX call could be made to the server to do tasks like checking availability of user name measure strength of password populate drop-down boxes further down based on data already entered Also auto-completion and spell-check features can be provided

c) Rapid user-user communication - browser based chat applications and games can be built without the need to manually refresh the page to get current datastate

d) Data filtering and rearranging - this include applying a filter sorting by date or some particular column values relocate iframes divs and page elements

e) Server-side pushes - AJAX enables simulation of server-side push technology using polling

AJAX on mobile

Pocket PC and Smartphone Devices (2003 and later) support AJAX

Opera Software has released Opera Platform SDK a kit for developing and running software on mobile phones This SDK will allow development of AJAX based rich mobile applications In addition the Opera Platform SDK will help developers adapt existing content and web applications to run on mobile phones

By storing an AJAX application on the mobile phone and allowing XML-communication with a Web-server the traditional bandwidth constraints become less of an issue This also enables transparent updating of information pushed to the mobile phone

With increasing processor power and wireless network speeds AJAX is sure to play an important role in enhancing mobile user experience

About Author Author has developed a project called ichat using Ajax technologies You can visit httpichatrgoa-developersorg for

Some of the processeselements in user experience which have undergone AJAXification are mentioned below

a) Hierarchical tree navigation - users find it irritating to navigate trees in Directories and Discussion threads AJAX makes expansioncontraction of tree nodes smooth without making the user wait for the new page to load

b) Form value check - as the user fills in a online form an AJAX call could be made to the server to do tasks like checking availability of user name measure strength of password populate drop-down boxes further down based on data already entered Also auto-completion and spell-check features can be provided

c) Rapid user-user communication - browser based chat applications and games can be built without the need to manually refresh the page to get current datastate

d) Data filtering and rearranging - this include applying a filter sorting by date or some particular column values relocate iframes divs and page elements

e) Server-side pushes - AJAX enables simulation of server-side push technology using polling

AJAX on mobile

Pocket PC and Smartphone Devices (2003 and later) support AJAX

Opera Software has released Opera Platform SDK a kit for developing and running software on mobile phones This SDK will allow development of AJAX based rich mobile applications In addition the Opera Platform SDK will help developers adapt existing content and web applications to run on mobile phones

By storing an AJAX application on the mobile phone and allowing XML-communication with a Web-server the traditional bandwidth constraints become less of an issue This also enables transparent updating of information pushed to the mobile phone

With increasing processor power and wireless network speeds AJAX is sure to play an important role in enhancing mobile user experience

About Author Author has developed a project called ichat using Ajax technologies You can visit httpichatrgoa-developersorg for

getting more information on the project Ajax First Example

In this section we will create a simple Ajax Application for displaying the current date and time Date and time information are retrieved asynchronously from the server side php script Our HTML page calls serverside php script to retrieve the todays date Once the time data is retrieved from the server it uses javascript and css to display the time on the HTML page

Here is the code of HTML File

lthtmlgt ltheadgt

lttitlegtAjax Examplelttitlegt

ltscript language=Javascriptgt

function postRequest(strURL)

var xmlHttp

if (windowXMLHttpRequest) Mozilla Safari

var xmlHttp = new XMLHttpRequest()

else if (windowActiveXObject) IE

var xmlHttp = new ActiveXObject(MicrosoftXMLHTTP)

xmlHttpopen(POST strURL true)

xmlHttpsetRequestHeader(Content-Type applicationx-www-form-urlencoded)

xmlHttponreadystatechange = function()

if (xmlHttpreadyState == 4)

updatepage(xmlHttpresponseText)

xmlHttpsend(strURL)

function updatepage(str)

documentgetElementById(result)innerHTML = ltfont color=red size=5gt + str +

ltfontgt

function showCurrentTime()

var rnd = Mathrandom()

var url=timephpid=+rnd

When use clicks on the Show Time button the showCurrentTime() is called The the function showCurrentTime() calls the timephp using Ajax and then updates the time values retrieved from server

Here is the code of PHP (timephp) file

ltprint date(l M dS Y His)gt

The above PHP code prints current date and time

Try the example Online

Ajax Multiplication Program

Ajax is a web development technique where you can send the request to server without refreshing the page In this section you will learn how to multiply two values and display the result on the page This program calls the method callmultiply() for the multiplying the values entered by user The multiplication operation is performed in the multiplyphp page at serverside The callmultiply() sends the numbers as url string by calling the postRequest() method The postRequest() method generates Ajax call to serverside script multiplyphp And finally updatepage() method updates the multiplication result on the html page

Example of Ajax multiplication program

lthtmlgt ltheadgt lttitlegtAjax Multiply Examplelttitlegt ltscript language=Javascriptgt function postRequest(strURL) var xmlHttp if(windowXMLHttpRequest) For Mozilla Safari var xmlHttp = new XMLHttpRequest() else if(windowActiveXObject) For Internet Explorer var xmlHttp = new ActiveXObject(MicrosoftXMLHTTP) xmlHttpopen(POST strURL true) xmlHttpsetRequestHeader(Content-Type applicationx-www-form-urlencoded)

When use clicks on the Show Time button the showCurrentTime() is called The the function showCurrentTime() calls the timephp using Ajax and then updates the time values retrieved from server

Here is the code of PHP (timephp) file

ltprint date(l M dS Y His)gt

The above PHP code prints current date and time

Try the example Online

Ajax Multiplication Program

Ajax is a web development technique where you can send the request to server without refreshing the page In this section you will learn how to multiply two values and display the result on the page This program calls the method callmultiply() for the multiplying the values entered by user The multiplication operation is performed in the multiplyphp page at serverside The callmultiply() sends the numbers as url string by calling the postRequest() method The postRequest() method generates Ajax call to serverside script multiplyphp And finally updatepage() method updates the multiplication result on the html page

Example of Ajax multiplication program

lthtmlgt ltheadgt lttitlegtAjax Multiply Examplelttitlegt ltscript language=Javascriptgt function postRequest(strURL) var xmlHttp if(windowXMLHttpRequest) For Mozilla Safari var xmlHttp = new XMLHttpRequest() else if(windowActiveXObject) For Internet Explorer var xmlHttp = new ActiveXObject(MicrosoftXMLHTTP) xmlHttpopen(POST strURL true) xmlHttpsetRequestHeader(Content-Type applicationx-www-form-urlencoded)

xmlHttponreadystatechange = function() if (xmlHttpreadyState == 4) updatepage(xmlHttpresponseText) xmlHttpsend(strURL) function updatepage(str) documentgetElementById(result)value = str function callMultiply() var a = parseInt(documentf1avalue) var b = parseInt(documentf1bvalue) var url = multiplyphpa= + a + ampb= + b + postRequest(url) ltscriptgt ltheadgt ltbodygt lth1 align=centergtltfont color=000080gtAjax Exampleltfontgtlth1gt ltform name=f1gt ltinput name=a id=a value=gt ltinput name=b id=b value=gt ltinput name=result type=text id=resultgt ltinput type=button value=Multiply onClick=callMultiply() name=showmultiplygt ltformgt ltbodygtlthtmlgt

Here is the code of the multiplyphp page

lt $a=$_GET[a] $b=$_GET[b] $mul=$a$b echo $mulgt

Try the example online

Ajax Login Program

In this program you will learn how to validate the user and show alert message if user name or password are not correct These days almost all the e-comm applications requires authentication before accessing the secured part of the web site In this program we will show how you can send ajax request to authenticate the user

When a user input username and password and press Login button call_login() function is called This method sends ajax request to server (loginphp) to validate the user We have hardcoded the authonication mechanism eg if you enter login name admin and password admin then the program will show you success message Otherwise it will show login failed message You can change the authentication logic in the page and easily authenticate use from database

Example of Ajax login Program

lthtmlgtltheadgtltscript language=javascriptgtfunction postRequest(strURL)var xmlHttpif(windowXMLHttpRequest) For Mozilla Safari var xmlHttp = new XMLHttpRequest()else if(windowActiveXObject) For Internet Explorervar xmlHttp = new ActiveXObject(MicrosoftXMLHTTP)xmlHttpopen(POST strURL true)xmlHttpsetRequestHeader(Content-Type applicationx-www-form-urlencoded)xmlHttponreadystatechange = function()if (xmlHttpreadyState == 4)updatepage(xmlHttpresponseText)xmlHttpsend(strURL)

function updatepage(str)if(str==yes)alert(Welcome User)elsealert(Invalid Login Please try again)

function call_login()var username = windowdocumentf1usernamevaluevar password = windowdocumentf1passwordvaluevar url = loginphpusername= + username + amppassword= +password postRequest(url) ltscriptgtltheadgt

ltbodygtltCentergt

ltform name=f1 onsubmit=return call_login()gtlttable border=0 bgcolor=CCCCFF cellspacing=1 cellpadding=3 width=287gtlttrgtlttd align=left colspan=2 width=275gtltbgtltfont size=5 color=000080gtLoginltfontgtltbgtlttdgtlttrgtlttrgtlttd align=right width=81gtltbgtltfont color=000080gtUserNameltfontgtltbgtlttdgtlttd width=184gtltinput type=text name=username id=user size=20 value= gtlttdgtlttrgtlttrgtlttd align=right width=81gtltbgtltfont color=000080gtPasswordltfontgtltbgtlttdgtlttd width=184gtltinput type=password name=password size=20 value= gtlttdgtlttrgtlttrgtlttd colspan=2 align=center width=275gtltinput type=button name=a1 value=Login onclick=call_login()gtlttdgtlttrgtlttablegtltformgt

ltcentergtltbodygtlthtmlgt

Here is the code for loginphp page

lt$username=$_GET[username]$password=$_GET[password]if($username==admin ampamp $password==admin)echo yeselseecho Nogt

Try the example online

Ajax Registration Program

In this Ajax Registration program you will learn how to validate the user registration through ajax call and then display the alert massage if no values are provided in the username and password fields

When a user input user Id and password and press Register button method call_Register() will make ajax call If the value returned from the server is yes the alert box will show Welcome for Register otherwise it will show the Invalid Idpassword please enter the Idpassword

Example of Ajax Registration program

lthtmlgt

ltheadgt

lttitlegtAjax Registratiion programlttitlegt

ltscript language=javascriptgt

function postRequest(strURL)

var xmlHttp

if(windowXMLHttpRequest) For Mozilla Safari

var xmlHttp = new XMLHttpRequest()

lt$username=$_GET[username]$password=$_GET[password]if($username==admin ampamp $password==admin)echo yeselseecho Nogt

Try the example online

Ajax Registration Program

In this Ajax Registration program you will learn how to validate the user registration through ajax call and then display the alert massage if no values are provided in the username and password fields

When a user input user Id and password and press Register button method call_Register() will make ajax call If the value returned from the server is yes the alert box will show Welcome for Register otherwise it will show the Invalid Idpassword please enter the Idpassword

Example of Ajax Registration program

lthtmlgt

ltheadgt

lttitlegtAjax Registratiion programlttitlegt

ltscript language=javascriptgt

function postRequest(strURL)

var xmlHttp

if(windowXMLHttpRequest) For Mozilla Safari

var xmlHttp = new XMLHttpRequest()

else if(windowActiveXObject) For Internet Explorer

var xmlHttp = new ActiveXObject(MicrosoftXMLHTTP)

xmlHttpopen(POST strURL true)

xmlHttpsetRequestHeader(Content-Type applicationx-www-form-urlencoded)

xmlHttponreadystatechange = function()

if (xmlHttpreadyState == 4)

updatepage(xmlHttpresponseText)

xmlHttpsend(strURL)

function updatepage(str)

if(str == no)

alert(Invalid Idpassword Please fill Currect Idpassword)

else

alert(welcome for register )

function call_register()

var login_id =documentreguidvalue

var password=documentregpasswdvalue

var url = Registerphploginid=+login_id+amppassword=+password+

postRequest(url)

ltscriptgt

ltheadgt

ltbodygt

ltcentergt

ltform name=reggt

lttable border=1 width=30gt

lttrgt

lttd align=center colspan=2gt ltfont face=Monotype size=5gtRegistrationltfontgtlttdgt

lttrgt

lttrgt

lttdgt Login id lttdgt lttdgt ltinput type=text name=uid size=20gtlttdgt

lttrgt

lttrgt

lttdgt Password lttdgtlttdgtltinput type=password name=passwd size=20 gtlttdgt

lttrgt

lttrgt

lttd align=center colspan=2gt ltinput type=submit value=Register onClick=return call_register()

style=background-colorFFE9D2color0000FF border-color99CC33gt lttdgt

lttrgt lttablegt

ltformgt

ltbodygt lthtmlgt

Here this code support the Registerphp for Ajax Registration program

lt$loginid=$_GET[loginid]$password=$_GET[password]if( $password == || $loginid == || ($loginid == ampamp $password == ) )echo noelseecho yesgt

Try the Example online

Ajax Code Libraries and Tools

Code libraries and loots for the development of your Ajax based applications These days Ajax has been used for the development of responsive web application making it more user friendly You can make your applications interface like gmail interface

1 Chickenfoot firebox Chickenfoot is a Firefox extension that puts a programming environment in the browsers sidebar so you can write scripts to manipulate web pages and automate web browsing In Chickenfoot scripts are written in a superset of JavaScript that includes special functions specific to web tasks Fixed some bugs related to packaging Chickenfoot scripts as standalone extensions Exported Chickenfoot scripts were trying to find the chickenfootsetup directory in the end-userrsquos Firefox profile directory If the end-user had never installed Chickenfoot this directory would not exist causing the extension to crash

2 Mouse wheel programming in JavaScript Web applications are becoming more and more like ldquonormalrdquo desktop applications Of course they are more and more functional but smooth user interface acts the primary role So we have drag and drop autocompletition and much more Many of those nice features got possible only with help of AJAX This page however is not about AJAX (or any other buzzword) It is about rather simple user input method -- mouse wheel I believe it would now be difficult to find a mouse without wheel Vast majority of users are used to the wheel as a

postRequest(url)

ltscriptgt

ltheadgt

ltbodygt

ltcentergt

ltform name=reggt

lttable border=1 width=30gt

lttrgt

lttd align=center colspan=2gt ltfont face=Monotype size=5gtRegistrationltfontgtlttdgt

lttrgt

lttrgt

lttdgt Login id lttdgt lttdgt ltinput type=text name=uid size=20gtlttdgt

lttrgt

lttrgt

lttdgt Password lttdgtlttdgtltinput type=password name=passwd size=20 gtlttdgt

lttrgt

lttrgt

lttd align=center colspan=2gt ltinput type=submit value=Register onClick=return call_register()

style=background-colorFFE9D2color0000FF border-color99CC33gt lttdgt

lttrgt lttablegt

ltformgt

ltbodygt lthtmlgt

Here this code support the Registerphp for Ajax Registration program

lt$loginid=$_GET[loginid]$password=$_GET[password]if( $password == || $loginid == || ($loginid == ampamp $password == ) )echo noelseecho yesgt

Try the Example online

Ajax Code Libraries and Tools

Code libraries and loots for the development of your Ajax based applications These days Ajax has been used for the development of responsive web application making it more user friendly You can make your applications interface like gmail interface

1 Chickenfoot firebox Chickenfoot is a Firefox extension that puts a programming environment in the browsers sidebar so you can write scripts to manipulate web pages and automate web browsing In Chickenfoot scripts are written in a superset of JavaScript that includes special functions specific to web tasks Fixed some bugs related to packaging Chickenfoot scripts as standalone extensions Exported Chickenfoot scripts were trying to find the chickenfootsetup directory in the end-userrsquos Firefox profile directory If the end-user had never installed Chickenfoot this directory would not exist causing the extension to crash

2 Mouse wheel programming in JavaScript Web applications are becoming more and more like ldquonormalrdquo desktop applications Of course they are more and more functional but smooth user interface acts the primary role So we have drag and drop autocompletition and much more Many of those nice features got possible only with help of AJAX This page however is not about AJAX (or any other buzzword) It is about rather simple user input method -- mouse wheel I believe it would now be difficult to find a mouse without wheel Vast majority of users are used to the wheel as a

ltbodygt lthtmlgt

Here this code support the Registerphp for Ajax Registration program

lt$loginid=$_GET[loginid]$password=$_GET[password]if( $password == || $loginid == || ($loginid == ampamp $password == ) )echo noelseecho yesgt

Try the Example online

Ajax Code Libraries and Tools

Code libraries and loots for the development of your Ajax based applications These days Ajax has been used for the development of responsive web application making it more user friendly You can make your applications interface like gmail interface

1 Chickenfoot firebox Chickenfoot is a Firefox extension that puts a programming environment in the browsers sidebar so you can write scripts to manipulate web pages and automate web browsing In Chickenfoot scripts are written in a superset of JavaScript that includes special functions specific to web tasks Fixed some bugs related to packaging Chickenfoot scripts as standalone extensions Exported Chickenfoot scripts were trying to find the chickenfootsetup directory in the end-userrsquos Firefox profile directory If the end-user had never installed Chickenfoot this directory would not exist causing the extension to crash

2 Mouse wheel programming in JavaScript Web applications are becoming more and more like ldquonormalrdquo desktop applications Of course they are more and more functional but smooth user interface acts the primary role So we have drag and drop autocompletition and much more Many of those nice features got possible only with help of AJAX This page however is not about AJAX (or any other buzzword) It is about rather simple user input method -- mouse wheel I believe it would now be difficult to find a mouse without wheel Vast majority of users are used to the wheel as a

control for scrolling in lists zooming etc Rather few web applications however make smart use of mouse wheel This page is to provide you with general information about handling mouse wheel-generated events in JavaScript programming language

3 JavaScript Sound Kit The JavaScript Sound Kit is a wrapper around the ActionScript Sound Object it makes it possible to use the Sound Object in JavaScript the same way you do it in ActionScript The API works almost the same way as the ActionScript Sound Object The JavaScript Sound Kit works by calling a Sound Object in a flash movie with a sound class bridge implemented The magic happens by using the External Interface available on the flash plugin version 8

4 Hibernate Spring Echo2 Base Application This project is designed as a base application and guide for building AJAX applications using Hibernate Spring and Echo2 It is intentionally left sparse (It contains only a group and user editor) so that it can be used as a base for a full blown application All three technologies are matched cohesively together to provide a robust base for your AJAX applications SecurityAllows usernamepassword logon logoff and permission checkingPermissions can be queried using has Permission() or enforced using require Permission()Enforcement is done in the business tier

5 XAP Extensible AJAX Platform XAP is an XML-based declarative framework for building deploying and maintaining rich interactive Ajax powered web applications It aims to reduce the need for scripting and help solve the development and maintenance challenges associated with large scale JavaScript programming XAP provides Declarative rich user interface via XML Data binding for connecting UI to data Incremental update of web pages in a declaratively and programmatically A plugin architecture allowing developers to define their own XML tags to provide behavior and UI or even use a completely different XML syntax

6 Project jMaKi jMaki is all about enabling Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component jMaki uses the best parts of Java and the best parts of JavaScript to deliver a rich AJAX style widgets jMaki currently provides bootstrap widgets for many components from Dojo Scriptaculous Yahoo UI Widgets Spry DHTML Goodies and Google jMaki provides a common interfaces to these widget libraries and allows you to use these libraries together in the same page Play with the jMaki sample application running live at httpjavaserverorgjmaki For more on running the code on your own server see Running the jMaki Sample Application

7 Protowidget Irsquod like to introduce a new JavaScriptAjax framework that my company is creating Wersquore calling it Protowidget because it uses Prototype and does things with widgets And yes we know itrsquos 2006 and this is something like the 800th Ajax framework released this year We think this one is new and different though (of course every parent thinks their baby is beautiful) It is being created out of real needs while building applications for customers and is helping us create better stuff Please note that this is just a preview Not everything works like it should or has been tested to the degree we would like In particular under certain circumstances the library leaks memory We know what needs to change to fix this but havenrsquot gotten to it yet

8 WidgetServer In the beginning WidgetServer was intended to be an alternative to XMLGUI and XUL frameworks with the difference that WidgetServer supports multiple target technologies from one single binary application and configuration set Swing standalone applications or fat Clients Swing ClientServer application with a rich thin Swing ClientWeb applications based on HTML CSS if needed JavaScript and MulitChannel applications which support a mixed Client environment WidgetServer is prepared for other channels like SWT mobile etc

9 Rhino in Spring Rhino in Spring is a project that intends to integrate Mozilla Rhino JavaScript interpreter the interpreter for the best (in our opinion) dynamic language on the Java platform with Spring Framework the also best (again in our opinion) enterprise framework on the Java platform The aim is to provide a system that amalgamates the rapid development benefits and flexibility of a dynamic language with the strength scalability and versatility of the Java platform and the Spring framework At the moment the project delivers a controller component for Spring MVC that allows complex control flows spanning several webpages in web applications to be expressed as a single structured algorithm in JavaScript putting the rich set of control flow structures and function reusability of a full-blown language at your fingertips

10 Spry framework for Ajax The Spry framework for Ajax is a JavaScript library for web designers that provides functionality that allows designers to build pages that provide a richer experience for their users It is designed to bring Ajax to the web design community who can benefit from Ajax but are not well served by other frameworks The first release of the Spry framework was a preview of the data capabilities that enable designers to incorporate XML data into their HTML documents using HTML CSS and a minimal amount of JavaScript without the need for refreshing the entire page The Spry framework is HTML-centric and easy to implement for users with basic knowledge of HTML CSS and JavaScript

The framework was designed such that the markup is simple and the JavaScript is minimal The Spry framework can be used by anyone who is authoring for the web in their tool of choice This is the 4th pre-release of Spry In this release we are introducing Spry Effects JavaScript behaviors that provide animation and color effects for page elements

11 The Ajax Engine AJAX is a technology that enables web applications to call the webserver without leaving the actual page Its possible to do this in the background without notice of the user This avoids loading the same form or page including the html markup multiple times reduces the network traffic and increases the user acceptance The AJAX Engine that you can find here is built upon the webservice standard protocols SOAP and WSDL for transferring the data between the browser client and the web server instead of using a new or proprietary protocolThe key part of this engine is a small webservice client written in JavaScript and a state engine that controls the asynchronous communication The benefit of that approach is that there is no need to invent new protocols and that the webservice framework on the server can be reused

12 The Dojo Foundation Dojo is Open Source software distributed by a non-profit foundation which has been set up for the purpose of providing a vendor-neutral owner of Dojo intellectual property The goals of all Foundation licensing decisions are to Encourage adoption Discourage political contention Encourage collaboration and integration with other projects Be transparent

13 What is JSMX JSMX is an Ultra Lightweight - Language Agnostic - Ajax Framework It is by far the easiest way to integrate Ajax into any Web Application What separates JSMX from most other Ajax Frameworks is that the JSMX API runs entirely on the client and has no Server Side Components to install Given this fact plus the fact that you can pass back JavaScript XML JSON or WDDX makes JSMX a truly Universal Ajax API Originally designed for ColdFusion developers by leveraging ColdFusions native ability to quickly build server-side generated JavaScript it became (and still is) a very efficient choice as an Ajax API for the ColdFusion Community But ColdFusion developers arent the only ones who can take advantage of this small but powerful API JSMX has been extended to support XML JSON and now WDDX while remaining completely backward compatible to its original user base With no Server Side Modules to install and with so many data-exchange options JSMX is now the perfect choice for fast Ajax integration for ANY language

14 What is CFAjax CFAjax is the AJAX implementation for coldfusion It makes coldfusion method calls on server directly from HTML page using JavaScript and return backs the result to the calling HTML page CFAjax comes with simple to use JavaScript API and simple coldfusion implementation that marshalrsquos the response between your CF methods and HTML page Using CFAjax you can create highly interactive websites with greater performance and usability Implementing authentication in CFAjax If you are concerned about exposing your CFAjax logicfunctions to outside world and want to prevent other websites from stealingusing your content there are three authentication mechanism that you can implement in CFAjax to prevent unauthorized access

15 AjaxCFC AJAX is Asynchronous JavaScript and XML It is not a technology but an umbrella that combines several concepts to enrich user experience by allowing server interaction without refreshing the browser AjaxCFC is a ColdFusion framework meant to speed up ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion and providing built-in functions such as security and debugging to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems

16 Ajason JavaScript AJASON is a PHP 5 library and JavaScript client for the upcoming Web technology called AJAX AJAX permits data to be fetched asynchronously without the need for reloading the Web page and thus allows the development of interactive GUI-like Web applications JSON is a lightweight data interchange format which is used by AJASON to exchange data between server and client The key features of AJASON are Fully object oriented code in PHP 5 and JavaScript Call PHP functions and object methods from JavaScript asynchronously Exchange even complex data types like arrays and objects (precisely object properties) between server and client Use JavaScript callback functions to process server responses Client side error reporting for server side AJASON errors Open source released under the GNU GPL

17 ICEfaces Ajax ICEfaces Community Edition is an Ajax application framework that enables J2EE application developers to easily create and deploy thin-client rich web applications in pure Java ICEfaces Community Edition is a fully featured product that Java developers can use to develop new or existing J2EE applications at no cost ICEfaces revolutionary Direct-to-DOM (D2D) rendering technology and Ajax Bridgeempowers developers to quickly produce sophisticated and robust J2EE applications that exhibit the following characteristics

Smooth incremental page updates with in-place editing and no full page refresh Asynchronous page updates driven from the application in real time Fine-grained user interaction during form entry that augments the standard submitresponse loop User context preservation during page update including scrollbar positioning and user focus

18 Javeline Framework Javeline FrameWork does away with traditional page-based interfaces on the Internet Web applications can now behave exactly like a desktop application Javeline FrameWork includes familiar controls such as trees and buttons that enable developers to build interactive data-bound applications that automatically update their data without round trips to the server With the included Skinning Engine designers can create a custom look amp feel using familiar established technology such as CSS and XHTML Data is delivered to the application via Javeline TelePort making Javeline FrameWork applications agnostic of back-end technology Javeline TelePort takes care of the communication between the client and the server It elegantly handles errors time-outs and retry TelePort features an advanced polling interface for controlling reconnecting and polling frequency Javeline TelePort has built-in support for XML-RPC SOAP JSON REST Comet and Javeline FrameWork-specific protocols

19 My-BIC Ajax My-BIC provides support for XML JSON and TEXT ajax transactions My-BIC has also been tested to work with Safari Firefox IE and Opera web browsers Thats the front controller that runs the server side I provide 2 server side pieces and you supply the rest Please visit the tutorials section to see how easy most things are The high level overview is you make a xmlhttp request to a server page named mybic_serverphp which reads a $_REQUEST[action] variable to find out what class it needs to load The nice thing about having a front controller style on the server side is you can add security layers in one file which get handled on every ajax request Lets say someone doesnt like you and decides to write a script that sends bad data nonstop to all your ajax pages

20 Ajax Toolkit Frameworks AJAX Toolkit Framework (ATF) provides extensible tools for building IDEs for the many different AJAX (asynchronous JavaScript and XML) run-time environments (such as Dojo Zimbra etc) This technology also contains features for developing debugging and testing AJAX applications The framework provides enhanced JavaScript editing features such as edit-time syntax checking an embedded Mozilla Web browser an embedded DOM browser and an embedded JavaScript debugger An additional and unique aspect of the framework is the Personality Builder function which assists in the construction of IDE features for arbitrary AJAX run-time frameworks and thus adds to the supported

set of run-time environments in the ATF

21 SAJAX Simple Ajax Toolkit Get support from the people who made Ajax easy for the masses If your staff needs a helping hand with your Ajax project we now offer commercial support and consulting Email support for the Sajax library starts at an affordable $199 per year We can help you build your project for rates from $150 per hour Contact us for more information Sajax itself remains under the open source BSD license Sajax is an open source tool to make programming websites using the Ajax framework - also known as XMLHTTPRequest or remote scripting as easy as possible Sajax makes it easy to call PHP Perl or Python functions from your webpages via JavaScript without performing a browser refresh The toolkit does 99 of the work for you so you have no excuse to not use it

22 G et Elements By Tag Names HTML has several related elements with distinct tag names like h1-h6 or input select and textarea getElementsByTagName works only on elements with the same tag name so you cannot use it to get a list of all headers or all form fields The getElementsByTagNames script (note the plural names) takes a list of tag names and returns an array that contains all elements with these tag names in the order they appear in the source code This is extremely useful for for instance my ToC script which needs all h3s and h4s in the document in the correct order Id have loved to add this method to the Node prototype but thats impossible in Explorer and Safari Therefore I use it as a normal function until all browsers expose their W3C DOM prototypes

23 JavaScript Component for AJAX AJAX Client Engine (ACE) is a JavaScript component that makes it easy to develop AJAX-style Web applications Object-oriented API The component encapsulates the details of creating and calling the XMLHTTPRequest object completely It provides an object-oriented API that is simple and yet powerful The user only need become familiar with three JavaScript classes Engine Request and Response to access all the functionality of the XMLHTTPRequest object as well as additional framework services Cross-browser support The component handles the differences between Internet Explorer and Mozilla Firefox browsers in creating the XMLHTTPRequest object transforming XML documents and so on Request option The user can make either an asynchronous or a synchronous request by either providing a callback function or not

24 Rialto - Rich Internet Application Toolkit Rialto (Rich Internet Application Toolkit) is ajax-based cross browser JavaScript widgets library Because it is technology agnostic it can be encapsulated in JSP JSF Net Python or PHP graphic components Nowadays it supports pure

JavaScript development and JSPtaglib development A JSF pyhton Net and PHP integration are on the road The purpose of Rialto is to ease the access to rich internet application development to corporate developers Ideally a Rialto developer have neither need to write or understand DHTML Ajax or DOM code

25 PAJAJ PHP Asynchronous JavaScript and JSON You do not have to be an expert at PHP HTML JavaScript and CSS to use the framework You can do most if not all your coding in PHP and the framework will generate HTML CSS and JavaScript for you There are object for most of the HTML element with method to manage common task like updating the content of a Div or items in a forms Select pull down A lot of the other frames include a simple example that is anything but simple the framework supports 3 different development models i the developer develops the whole application and interface in PHP since the framework knows about HTML elements you want to interact with ie there are objects for Select Div Table with instances with unique IDs it is easy to have the framework generate simple html and CSS for you ii A designer generate a pretty but dump page and you then hook events to it to make it a real application iii You design an interface as a template and have the framework make html CSS JavaScript that you pore into the template

26 Ajax jsquery An implementation of an AJAX JavaScript data generation server http client and client result set Uses a JavaScript http client to dynamically map the results of data requests from a Java application server to a web browser HTML form without requiring refresh or page submit (similar to Google Suggest) Server side data can be SQL via JDBC an object relational mapping using a tool such as Hibernate returned from a server connecting a group of peers or pipelined from another source like a SOAP server In other words jsquery allows the pages in your web application to dynamically get new information from the a server application without requiring a page refresh

27 Sack Ajax JavaScript SACK and will be over the next little while updated with resources and tutorials about how to use SACK to enhance your webpages Maybe it will even give you some ideas If you come up with something special please let me know Irsquod love to hear from people that are using my SACK in their projects or products The same goes for any suggestions please tell me how I can make this better SACK 12 is included with WordPress 20 which makes me happy beyond words newer versions of SACK should work with no problems in WordPress Full documentation of the classes methods and variables is available here However this information is included in the zip package as well It should be more than you need but if you have any trouble then please let me know The aim is to make everything simple so if you are confused I need to fix something

28 JS Eclipse JSEclipse is the best and most popular JavaScript plugin for the Eclipse environment Its benefits are visible from the simplest tasks like editing small sections of code for your site to the more complex ones like working with the next big AJAX library or developing plugins for a product that embeds JavaScript like Dreamweaver or Photoshop JSEclipse offers several licensing options out of which one will surely fit your needs Read more about the licensing scheme You can also use the unrestricted free for non-commercial use version

29 Ajax any where Ajax Anywhere is designed to turn any set of existing JSP or JSF components into AJAX-aware components without complex JavaScript coding In contrast to other solutions Ajax Anywhere is not component-oriented You will not find here yet another AutoComplete component Simply separate your web page into multiple zones and use Ajax Anywhere to refresh only those zones that needs to be updatedHow to work 1 Mark reload-capable zones of a web page with AjaxAnywhere custom tags 2 Instead of submitting a form in traditional way do it by AjaxAnywhere javascript API 3 During request processing on the server-side determine the zones to refresh 4 On the server-side AjaxAnywhere will generate an XML containing only the updated HTML 5 On the client-side AjaxAnywhere javascript will receive the XML parse it and update the selected zones

30 PowerWEB LiveControls for ASPNET Imagine creating rich web applications that dont flash when posting data to the servershopping carts that dynamically confirm customer information inventory shipping costs and discounts using server-side resourcesfinancial applications that update rates without the usual flickersports applications that update scores in real timeall with simple drag and drop ASPNET controls PowerWEB LiveControls for ASPNET is a suite of 21 Web Controls that allow you to raise server-side callbacks and update form elements without reloading the entire HTML page They are a direct replacement for many standard Microsoft controls allowing you to manipulate client-side objects or send data to the client without disrupting the user experience with a page refresh

31 Worlds Easiest JavaScript AJAX ToolKit AJFORM is a JavaScript toolkit which simply submits data from any given form in an HTML page then sends the data to any specified JavaScript function AJFORM degrades gracefully in every aspect In other words if the browser doesnt support it the data will be sent through the form as normal It has been successfully tested on Mozilla FireFox 10+ Netscape 70+ Internet Explorer 55+ for Windows Safari 12+ Opera 76+

32 Ajax JSP Tag Library The AJAX Tag Library is a set of JSP tags that simplify the use of Asynchronous

JavaScript and XML (AJAX) technology in JavaServer Pages AJAX is primarily rooted in JavaScript However many server-side developers do not have an extensive knowledge of client-side programming in the browser Its much easier in some cases for J2EE developers especially to simply add a JSP tag to the page to gain the function desired This tag library fills that need by not forcing J2EE developers to write the necessary JavaScript to implement an AJAX-capable web form The tag library provides support for live form updates for the following use cases auto complete based on character input to an input field select box population based on selections made from another field callout or balloon popup for highlighting content refreshing form fields and toggling images and form field states onoff

33 JavaScript to Java AJAX communications library JSON-RPC-Java is a key piece of Java web application middleware that allows JavaScript DHTML web applications to call remote methods in a Java Application Server without the need for page reloading (now refered to as AJAX) It enables a new breed of fast and highly dynamic enterprise Web 20 applications JSON-RPC-Java is a dynamic JSON-RPC implementation in Java It allows you to transparently call server-side Java code from JavaScript with an included lightweight JSON-RPC JavaScript client It is designed to run in a Servlet container such as Tomcat and can be used with JBoss and other J2EE Application servers to allow calling of plain Java or EJB methods from within a JavaScript DHTML web application

34 Introduction to JSON JavaScript Object Notation (JSON) is a lightweight data-interchange format It is easy for humans to read and write It is easy for machines to parse and generate It is based on a subset of the JavaScript Programming Language Standard ECMA-262 3rd Edition - December 1999 JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages including C C++ C Java JavaScript Perl Python and many others These properties make JSON an ideal data-interchange language JSON is built on two structures A collection of namevalue pairs In various languages this is realized as an object record struct dictionary hash table keyed list or associative array An ordered list of values In most languages this is realized as an array vector list or sequence

35 Introduction to the Simple Web Framework The Simple Web Framework (SWF) is a Java framework for creating Web applications and occupies the same architectural niche as Struts and JSF Unlike Struts and similar to JSF the SWF is based on a server side event system Unlike Struts or JSF the SWF supports In place Page Updating or IPU With IPU an event is posted through an XmlHttpRequest channel rather than as a form submit as is the case with JSF The result returned to the browser is not a full page but only the page fragments that have been changed (dirty regions) by the event The

SWF refreshes the dirty fragments in place without reloading the page With IPU the page will not lose its scroll position JavaScript variables will not be lost and a host of other behavioral improvements that help you create a richer application The SWF also fully supports links and submit type events like JSF for when you want (or need) to use full Page reloads

36 AjaxAC - Open-souce PHP framework for AJAX AjaxAC is an open-source framework written in PHP used to developcreategenerate AJAX applications The fundamental idea behind AJAX (Asynchronous JavaScript And XML) is to use the XMLHttpRequest object to change a web page state using background HTTP sub-requests without reloading the entire page It is released under the terms of the Apache License v20 Features The basic idea behind AjaxAC is that you create an AjaxAC application which in itself contains a number of action handlers and event handlers An application in this context might mean an entire web site powered by AJAX or it could mean a subset of a form All application code is self-contained in a single class (plus any additional JavaScript libraries) Calling PHP file HTML page is very clean All that is required is creating of the application class then referencing the application JavaScript and attaching any required HTML elements to the application Built in functionality for easily handling JavaScript events

37 Flexible Ajax Framework Flexible Ajax is a handler to combine the remote scripting technology also known as AJAX (Asynchronous Javascript and XML) with a php-based backend The AJAX Technique is best described in the wikipedia article and the original article on adaptivepathcom giving the technique the name AJAX Basically Flexible Ajax is the tool to call php functions from within javascript and handle the returned values without having to reload the entire page Facts about Flexible Ajax written in PHP5 using object-oriented code consists of a client and a server handler allows separation of client side-code and server side-code get and post methods supported easy to implement into existing co

38 Introducting xajax 024 xajax is an open source PHP class library that allows you to easily create powerful web-based Ajax applications using HTML CSS JavaScript and PHP Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page The xajax PHP object generates JavaScript wrapper functions for the PHP functions you want to be able to call asynchronously from your application When called these wrapper functions use JavaScripts XMLHttpRequest object to asynchronously

communicate with the xajax object on the server which calls the corresponding PHP functions Upon completion an xajax XML response is returned from the PHP functions which xajax passes back to the application The XML response contains instructions and data that are parsed by xajaxs JavaScript message pump and used to update the content of your application

Ajax Chat

List of chat application developed in Ajax These chat applications are very responsive and dont require full page refresh to send and retrieve the message from server You can use these applications on your website

WebChat en AJAX Servidor con soporte PHP Navegador que soporte AJAX por parte del usuario como estos No necesita un servidor que retransmita los mensajes No necesita base de datos (se utiliza este fichero de texto) Prueba tambieacuten las nuevas salas de chat (chat rooms) ULRTMT - Skype Version Now Supports Real-Time TranslationHappy to announce that the The ULRTMT - Skype Version 25 Beta Universal Language Real-Time Message Translator now supports Yes you can now chat with others in your own native language and have your text translated in Real-Time Both your sent and received chat messagesPeople from all over the world can now be in the same chat using their own native language and everyone can understand each other The ULRTVR - Universal Language Real-Time Voice Recognition for Skype example shows once again the power of the Skype4COM lib This is a simple PoC Proof of Concept to show how easy it is to create your own voice recognition interface to the Skype client These concepts could be used to do many other things for both home and business and can interface to sound devices other than the sound card as well

Php free chat php Free Chat is a free simple to install fast customizable and multi languages chat that uses a simple file system for message and nickname storage It uses AJAX to smoothly refresh (no flicker) and display the chat zone and the nickname zone It supports multi-rooms (join) private messages moderation (kick ban) customized themes based on CSS and plugins systems that allows you to write your own storage routines (ex Mysql IRC backends ) and you own chat commands

Metatron Chat EngineThe Metatron Chat Engine is a PHPMySQLJavaScript powered engine The Engine was formerly known as the ORP Engine on which Onlineroleplaynet was running You can

check out an example by following the example link from the menu The Metatron Chat Engine is a web-based Chat System that can be used on any computer that has a JavaScript-Enabled Web browser Its got an easy to maintain Channel system and it is easy for users and visitors to navigate around Features Multi-Channel Registration of Users Private Channels User Banning and Kicking on IP and User ID level Tunneling Channel Observations Custom Avatar Images Usages of Emoticons per Channel Private Messages Dice-Roller

XHTML (ajax) Chat sources for downloadAfter a slow start (following the announcement of the XHTML (ajax) Chat) things got finally busy I had so many requests that I have decided to offer the complete sources for download With Backbase AJAX software developers can create more user-friendly web applications in record-time The Backbase framework has many user interface controls and code samples and advanced development tools Backbase supports all main web browsers without the need for a plug-in You can download our software below

Lace- Ajax ChatLace is a free chat application for your website It takes advantage of Ajax in modern browsers and degrades gracefully in older browsers The recent beta test of 016b1 has turned up several bugs that will be squashed soon for a second public beta Soon my time might become limited by forces beyond my control so I hope to have this complete within the next few weeks Once the dust settles Lace 016 will absolutely be the last version on that branch despite anything I may have said in the past Its likely it will remain in beta as development continues on the new 02 branch

AJAX Web ChatThis tutorial will walk you through the step in order to create an AJAX driven web chat program This will be a very simple program but will be expanded upon in future tutorials AJAX programming is centered around the XMLHTTPRequest() Object This is the piece that makes all AJAX programming possible Unfortunatlly creating the XMLHTTPRequest() object is different for each browser Luckly it is fairly simple to write code to use the correct object for the clients browser and once you create the object it functions in pretty much the same manner

JSON AJAX Web ChatThis tutorial will walk you through the steps to create an JSON AJAX driven website This tutorial is very similar to the original AJAX Web Chat tutorial that I wrote back in November of 2005 but instead of passing the message data back as XML we will be using JSON JSON stands for JavaScript Object Notation and is basically a lightweight way of describing hierarchical data Since it is so lightweight it makes it an ideal candidate for AJAX applications So what does JSON look like

Ajax Tutorials

1 Creating a MySQL connection with PHPAJAX The purpose of this article is to demonstrate how the XMLHttpRequest object works within php and the advantages of using it This tutorial will be the first in a series of articles leading to the development of a fully functional dynamic web events application AJAX is a fancy technique for creating websites that gather information from servers without having to refresh themselves I could get into the nitty-gritty about advantages and disadvantages of using AJAX but for now all you need to know is any users action that would normally generate a HTTP request takes the form of a JavaScript call to the AJAX engine instead The engine makes any data requests asynchronously without pausing a userrsquos interaction with the web application

2 Getting Started with Ajax Ajax stands for Asynchronous JavaScript and XML In a nutshell it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts It can send as well as receive information in a variety of formats including XML HTML and even text files Ajaxrsquos most appealing characteristic however is its ldquoasynchronousrdquo nature which means it can do all of this without having to refresh the page This allows you to update portions of a page based upon user events and provides one of the cornerstones of Rich Internet Applications (RIA) referred to in discussions of ldquoWeb 20rdquo The DOM plays into Ajax in a number of ways How you use the DOM depends a good deal on how you handle the content returned from the server You can treat the content as simple text using the response Text property of the server response or you can treat it as XML using responseXML

3 Mastering Ajax part-2 Most Web applications use a requestresponse model that gets an entire HTML page from the server The result is a back-and-forth that usually involves clicking a button waiting for the server clicking another button and then waiting some more With Ajax and the XMLHttpRequest object you can use a requestresponse model that never leaves users waiting for a server to respond In this article Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way construct and send requests and respond to the server In the last article of this series you were introduced to the Ajax applications and looked at some of the basic concepts that drive Ajax applications At the center of this was a lot of technology that you probably already know about JavaScript HTML and XHTML a bit of dynamic HTML and even some DOM In this article I will zoom in from that 10000-foot view and focus on specific Ajax details

4 Mastering Ajax Introduction to Ajax Ajax which consists of HTML JavaScripttrade technology DHTML and DOM is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications The author an Ajax expert demonstrates how these technologies work together - from an overview to a detailed look -- to make

extremely efficient Web development an easy reality He also unveils the central concepts of Ajax including the XMLHttpRequest object Five years ago if you didnt know XML you were the ugly duckling whom nobody talked to Eighteen months ago Ruby came into the limelight and programmers who didnt know what was going on with Ruby werent welcome at the water cooler Today if you want to get into the latest technology rage Ajax is where its at These are both familiar desktop applications usually come on a CD and install completely on your computer They might use the Internet to download updates but the code that runs these applications resides on your desktop Web applications -- and theres no surprise here -- run on a Web server somewhere and you access the application with your Web browser

5 Guide to Using AJAX and XMLHttpRequest from WebPasties The XMLHttpRequest object is a handy dandy JavaScript object that offers a convenient way for webpages to get information from servers without refreshing themselves The benefit to end users is that they dont have to type as much and they dont have to wait as long For example having the users city and state show up in a webpage automatically after the ZIP code has been typed in is a big time saver Although the XMLHttpRequest object might sound complex and different from any other JavaScript object you have ever used it really isnt A good way to think of the XMLHttpRequest object is as you would think of the JavaScript Image object As we know with the Image object you can dynamically specify a new URL for the image source without reloading the page Similarly with the XMLHttpRequest object you can dynamically specify a URL to get some server data without reloading the page

6 Direct Web Remoting DWR allows JavaScript in a browser to interact with Java on a server and helps you manipulate web pages with the results Our stable release is DWR version 11 We are developing DWR version 20 and recently announced Reverse Ajax which allows Java on the server to asynchronously send JavaScript to the client License shall mean the terms and conditions for use reproduction and distribution as defined by Sections 1 through 9 of this document Licensor shall mean the copyright owner or entity authorized by the copyright owner that is granting the License Legal Entity shall mean the union of the acting entity and all other entities that control are controlled by or are under common control with that entity For the purposes of this definition control means (i) the power direct or indirect to cause the direction or management of such entity whether by contract or otherwise or (ii) ownership of fifty percent (50) or more of the outstanding shares or (iii) beneficial ownership of such entity

7 Sajax Toolkit Commercial consulting and support now available Get support from the people who made Ajax easy for the masses If your staff needs a helping hand with your Ajax project we now offer commercial support and consulting Email support for the Sajax library starts at an affordable $199 per year We can help you build your

project for rates from $150 per hour Contact us for more information Sajax itself remains under the open source BSD license Breaking news After a long delay Sajax version 012 is finally out PHP support has been much improved including many bug fixes and improvements to the serialization support Please download the new version and contact us if you find any bugs Sajax is an open source tool to make programming websites using the Ajax framework - also known as XMLHTTPRequest or remote scripting - as easy as possible Sajax makes it easy to call PHP Perl or Python functions from your webpages via JavaScript without performing a browser refresh The toolkit does 99 of the work for you so you have no excuse to not use it

8 JavaScript Rico Internet Application Ajax is the term that describes a set of web development techniques for creating interactive web applications One of the key ingredients is the JavaScript object XmlHttpRequest Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects Multiple elements andor objects may be updated as the result of one Ajax request Desktop applications have long used drag and drop in their interfaces to simplify user interaction Rico provides one of the simplest interfaces for enabling your web application to support drag and drop Just register any HTML element or JavaScript object as a drag gable and any other HTML element or JavaScript object as a drop zone and Rico handles the rest

9 How does xajax work The xajax PHP object generates JavaScript wrapper functions for the PHP functions you want to be able to call asynchronously from your application When called these wrapper functions use JavaScripts XMLHttpRequest object to asynchronously communicate with the xajax object on the server which calls the corresponding PHP functions Upon completion an xajax XML response is returned from the PHP functions which xajax passes back to the application The XML response contains instructions and data that are parsed by xajaxs JavaScript message pump and used to update the content of your application xajaxs unique XML response JavaScript message-pump system does the work for you automatically handling the data returned from your functions and updating your content or state according to the instructions you return from your PHP functions Because xajax does the work you dont have to write JavaScript callback handler functions

10 Welcome to Ajax any where AjaxAnywhere is designed to turn any set of existing JSP or JSF components into AJAX-aware components without complex JavaScript coding In contrast to other solutions AjaxAnywhere is not component-oriented You will not find here yet another AutoComplete component Simply separate your web page into multiple zones and use AjaxAnywhere to refresh only those zones that needs to be updated Advantages Less JavaScript to develop and to maintain Absence of commonly accepted

naming convention formatting rules patterns makes JavaScript code messier then JavaJSP It is extremely difficult to debug and unit-test it in multi-browser environment Get rid of all those complexities by using AjaxAnywhere Easy to integrate AjaxAnywhere does not require changing the underlying application code Lower technical risk Switch whenever you need between AJAX and traditional behaviour of your web application Your application can also support both behaviors

11 How To Use AJAX AJAX an acronym for Asynchronous JavaScript and XML is the latest technology buzzword Asynchronous means that you can make a request to a server via Hypertext Transfer Protocol (HTTP) and continue to process other data while waiting for the response This means for example that you can make calls to a server-side script to retrieve data from a database as XML send data to a server-side script to be stored in a database or simply load an XML file to populate pages of your Web site without refreshing the page However along with all of the benefits AJAX sparks some unquestionable debate over issues with the Back button This article will help you to determine when AJAX is a good solution for developing your users experiences

12 Very Dynamic Web Interfaces One of the classic drawbacks to building a web application interface is that once a page has been downloaded to the client the connection to the server is severed Any attempt at a dynamic interface involves a full roundtrip of the whole page back to the server for a rebuild--a process which tends to make your web app feel inelegant and unresponsive In this article Ill be exploring how this problem can be tackled with the use of JavaScript and the XMLHttpRequest object The user requests a page from the server which is built and delivered to the browser This page includes an HTML form element for capturing data from the user Once the user posts their input back to the server the next page can be built and served based on the input and so the process continues This is largely dictated by the nature of HTTP and differs from the traditional desktop application model of an interface which is inherently connected to the application layer

13 AJAX Getting Started AJAX (Asynchronous JavaScript and XML) is a newly coined term for two powerful browser features that have been around for years but were overlooked by many web developers until recently when applications such as Gmail Google Suggest and Google Maps hit the streetsThe two features in question are that you can Make requests to the server without reloading the page Parse and work with XML documents

14 Using the XML HTTP Request object Internet Explorer on Windows Safari on Mac OS-X Mozilla on all platforms

Konqueror in KDE Ice Browser on Java and Opera on all platforms including Symbian provide a method for client side JavaScript to make HTTP requests From the humble begins as an oddly named object with few admirers its blossomed to be the core technology in something called AJAX The Object makes many things easier and neater than they other would be and introduces some things that were otherwise impossible such as HEAD requests to see when a resource was last modified or to see if it even exists It makes your scripting options more flexible allowing for POST requests without having the page change and opens up the possibility of using PUT DELETE etc These methods are increasingly used to provide richer Web Applications like G-Mail that use lower bandwidth and offer snappier user interaction

15 Ajax Tutorial Getting to a semi-usable point with my system took me about a week of part-time digging and coding This was done on evenings and only when I could get an hour here and there to work on it My goal was three-fold1 The ability to have PHP output discrete portions of a page (a major part of AJAX)2 To be able to take those different pieces and have a simple way to update the html page3 To be able to submit form information to a script and have the results returned as in point 1

16 AJAX Instant Tutorial After taking a look at this tutorial and a couple others I was dissapointed at the quality of the code so herersquos a quick tutorial to get you jump started with AJAX (Asynchronous JavaScript + XML) I am using object detection and explain some of the caveats for doing what I am doing Simply put AJAX allows you to make a call to an http server (typically an RSS feed or a webpage) get itrsquos content and load them into your existing page without having to refresh the whole page This means that services like email donrsquot have to reload the whole page everytime you click a message saving on bandwidth (loading the headerfooter all over again) and making things more efficient

17 A Simpler Ajax Path I began working with web applications back in the bad old days when making an application behave like a desktop app meant wrestling with byzantine table-based layouts nested five and six levels deep and horrid hackish frame sets within frame sets within frame sets Those were the days Things have steadily improved for web developers with the advent of standards-compliant browsers CSS DHTML and the DOM Pervasive broadband access has made web apps feel a lot snappier Now something called the XMLHttpRequest object makes it even easier to develop full-blown super interactive applications to deploy in the browser

18 The Hows and Whys of Degradable Ajax While working on Particle trees shopping cart system for our magazine we

decided that we wanted to create a flawless user experience for all users without having to sacrifice the added user interface benefits provided by Ajax goodness A lot of places will tell you that it is ok to use JavaScript and Ajax as long as itrsquos not mission critical Well we donrsquot think web apps have to be boring to be reliable And so wersquove developed some solid strategies to help us use Ajax in our apps without having to worry if theyrsquore essential or not to the application After some heavy experimenting wersquove developed a method for making web pages work regardless of the userrsquos browser settings While other sites have implemented their own versions of degradable Ajax we found the lack of documentation on the subject discouraging And so it is with great pleasure that we present to you the Particle tree method of degradable Ajax

19 Remote Scripting with AJAX This two-part series of articles covers remote scripting using the AJAX XMLHttpRequest protocol Part one walks through an example application that demonstrates how to implement the protocol while part two will show how to create a usable interface To begin download the code archive which contains all of the files youll need to create the working examples presented here and for the upcoming second part of this series Essentially remote scripting allows client-side JavaScript to request data from a server without having to refresh the web page Thats it Everything else that goes into making a seamless web application draws upon the established methods of manipulating the Document Object Model However remote scripting and seamless applications bring with them a host of problems from the desktop application design realm making those same issues possible on the Web

20 AJAX made simple with DWR AJAX or Asynchronous JavaScript and XML describes a Web development technique for creating interactive Web applications using a combination of HTML (or XHTML) and Cascading Style Sheets for presenting information Document Object Model (DOM) JavaScript to dynamically display and interact with the information presented and the XMLHttpRequest object to interchange and manipulate data asynchronously with the Web server Many examples on the Internet show all the necessary steps for using XMLHttpRequest to communicate with the server from within an HTML file When manually writing and maintaining the XMLHttpRequest code a developer must deal with many potential problems especially with cross-browser compatibilities like different DOM implementations This can lead to countless hours spent coding and debugging JavaScript code which is not known to be developer friendly

21 An Introduction To Ajax As J2EE developers it seems we are constantly focused on backend mechanics Often we forget that the main success of J2EE has been around the Web application people love developing applications that utilize the Web for many reasons but mainly because the ease of deployment allows a site to have millions of users with minimal cost Unfortunately over the years we have invested too

much time in the back end and not enough time in making our Web user interfaces natural and responsive to our users This article introduces a methodology Ajax you can use to build more dynamic and responsive Web applications The key lies in the combination of browser-side JavaScript DHTML and asynchronous communication with the server This article also demonstrates just how easy it is to start using this approach by leveraging an Ajax framework (DWR) to construct an application that communicates with backend services directly from the browser If used properly this tremendous power allows your application to be more natural and responsive to your users thereby providing an improved browsing experience

22 Developing AJAX Applications the Easy Way AJAX is the buzzword of the moment among web developers so much so that you could be sick of introductions to AJAX by now (if thats the case skip down to The Chat Web Page) AJAX is a technology that is hotly debated from many angles but it has stuck because it encapsulates something that is new from a users perspective The functionally that is newly available to all web users is in-page replacement the ability for a web page to change using data from a web server without totally redrawing itself This functionality has been around in Mozilla and Internet Explorer for a while but it is only recently that Safari and Konqueror users have been able to join in AJAX isnt the best acronym in the world it stands for Asynchronous JavaScript and XML This does nothing to describe the benefits to a user the technology behind it does not have to be asynchronous and the best implementations dont necessarily use XML either However the buzzword has stuck so we are better off going with the flow now

23 Ajax on Rails In a few short months Ajax has moved from an obscure and rarely used technology to the hottest thing since sliced bread This article introduces the incredibly easy-to-use Ajax support that is part of the Ruby on Rails web application framework This is not a step-by-step tutorial and I assume that you know a little bit about how to organize and construct a Rails web application If you need a quick refresher check out Rolling with Ruby on Rails Part 1 and Part 2 In the beginning there was the World Wide Web Compared with desktop applications web applications were slow and clunky People liked web applications anyway because they were conveniently available from anywhere on any computer that had a browser Then Microsoft created XMLHttpRequest in Internet Explorer 5 which let browser-side JavaScript communicate with the web server in the background without requiring the browser to display a new web page That made it possible to develop more fluid and responsive web applications

24 Ajax Mistakes Ajax is also a dangerous technology for web developers its power introduces a huge amount of UI problems as well as server side state problems and server load problems Irsquove compiled a list of the many mistakes developers using Ajax often

make Sure Ajax is cool and developers love to play with cool technology but Ajax is a tool not a toy A lot of the new Ajax applications are really just little toys not developed for any real purpose just experiments in what Ajax can do or trying to fit Ajax somewhere where it isnrsquot needed Toys might be fun for a little while but toys are not useful applications The back button is a great feature of standard web site user interfaces Unfortunately the back button doesnrsquot mesh very well with JavaScript Keeping back button functionality is a major reason not to go with a pure JavaScript web app

Ajax Examples

There are a few AJAX demos and examples on the web right now While these are invaluable to learning AJAX some people need a bit more information than just a raw piece of code In todays environment there are many ways to learn AJAX including books classes conferences workshops and tutorials Of these the only one that is free and accessible to everyone are web-based tutorials The following is a list of what I consider the be the best and most helpful AJAX tutorials that Ive found over the past year

The Ajax alternate TechniquesThe first alternate Ajax technique is dynamic script loading The concept is simple create a new ltscriptgt element and assign a JavaScript file to its src attribute to load JavaScript that isnt initially written into the page The beginnings of this technique could be seen way back when Internet Explorer 40 and Netscape Navigator 40 ruled the web browser market At that time developers learned that they could use the documentwrite() method to write out a ltscriptgt tag The caveat was that this had to be done before the page was completely loaded With the advent of the DOM the concept could be taken to a completely new level

Ajax and XMLHttp Request from webPastiesThe XMLHttpRequest object is a handy dandy JavaScript object that offers a convenient way for webpages to get information from servers without refreshing themselves The benefit to end users is that they dont have to type as much and they dont have to wait as long For example having the users city and state show up in a webpage automatically after the ZIP code has been typed in is a big time saver Although the XMLHttpRequest object might sound complex and different from any other JavaScript object you have ever used it really isnt A good way to think of the XMLHttpRequest object is as you would think of the JavaScript Image object As we know with the Image object you can dynamically specify a new URL for the image source without reloading the page Similarly with the XMLHttpRequest object you can dynamically specify a URL to get some server data without reloading the page

The Ajax Make request with asynchronous JavaScript Most Web applications use a requestresponse model that gets an entire HTML page from the server The result is a back-and-forth that usually involves clicking a button waiting for the server clicking another button and then waiting some more With Ajax and the XMLHttpRequest object you can use a requestresponse model that never leaves users waiting for a server to respond In this article Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way construct and send requests and respond to the server First take this last bit of overview before you dive into code -- make sure youre crystal clear on this idea of the Web 20 When you hear the term Web 20 you should first ask Whats Web 10 Although youll rarely hear Web 10 it is meant to refer to the traditional Web where you have a very distinct request and response model For example go to Amazoncom and click a button or enter a search term A request is made to a server and then a response comes back to your browser

The Advanced requests and responses in AjaxIn the last article in this series I provided a solid introduction to the XMLHttpRequest object the centerpiece of an Ajax application that handles requests to a server-side application or script and also deals with return data from that server-side component Every Ajax application uses the XMLHttpRequest object so youll want to be intimately familiar with it to make your Ajax applications perform and perform well In this article I move beyond the basics in the last article and concentrate on more detail about three key parts of this request object The HTTP ready state The HTTP status code The types of requests that you can make

Ajax Example Drag and Drop with JavaScript and cssIn Web applications Ive seen numerous -and personally implemented a few ways to rearrange items in a list All of those were indirect interactions typically involving something like updown arrows next to each item The most heinous require server roundtrips for each modification boo With sorting vertically oriented items under our belt onto the next challenge sorting floated wrapped list items Earlier versions of my code had separate scripts for vertical horizontal and wrapped lists Now they are unified into one script that does it all

Ajax Building a Drag and Drop shopping cartThe rise of AJAX over the past several months has taken over the development world and breathed new life into the Web Although these techniques have been possible for many years now the maturity of Web standards like XHTML and CSS now make it a viable alternative that will be viewable by all but the oldest browsers Its also been possible to accomplish many of the same things using Flex or Flash but the development cycle with those applications is typically more involved and the overhead often not justified Were going to harness the power of the Sciptaculous JavaScript

library to provide our interaction As their Web site states this library provides you with easy-to-use compatible and ultimately totally cool JavaScript libraries to make your web sites and web applications fly Web 20 style Were also going to utilize the ltCF_SRSgt library to handle the actual AJAX data piping to our application Both of these libraries are free for all to use and theyre easier to integrate than you would think

The Better a Ajax and JavaServer FacesBrowser-based file uploads in particular those involving the HTML ltinput type=filegt tag have always been rather lacking As I am sure most of you are aware uploading files exceeding 10MB often causes a very poor user experience Once a user submits the file the browser will appear to be inactive while it attempts to upload the file to the server While this happening in the background many impatient users would start to assume that the server is hanging and would try to submit the file again This of course only helps to make matters worse In an attempt to make uploading of files more user-friendly many sites display an indeterminate progress animation once the user submits the file Although this technique may be useful in keeping the user distracted while the upload being submitted to the server it offers very little information on the status of the file upload Another attempt at solving the problem is to implement an applet that uploads the file to the server through FTP The drawback with this solution is that it limits your audience to those that have a Java-enabled browser

Ajax Using the PHP and SajaxThe goal of creating a truly responsive Web application was hampered by one simple fact of Web development To change the information on part of a page a user must reload the entire page Not anymore Thanks to asynchronous JavaScript and XML (Ajax) we can now request new content from the server and change just part of a page This tutorial explains how to use Ajax with PHP and introduces the Simple Ajax Toolkit (Sajax) a tool written in PHP that lets you integrate server-side PHP with JavaScript that makes this work This tutorial is for those interested in developing rich Web applications that dynamically update content using asynchronous JavaScript and XML (Ajax) with PHP without having to refresh entire Web pages with each user click You will learn about Ajax as well as issues surrounding its usage You will also build an Ajax application in PHP that will display parts of a previously written tutorial Then you will integrate the Simple Ajax Toolkit (Sajax) into your Ajax application which will synchronize the use of Ajax simplifying development

The Ajax getting StartedAjax stands for Asynchronous JavaScript and XML In a nutshell it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts It can send as well as receive information in a variety of formats including XML HTML and even text files Ajaxrsquos most appealing characteristic however is its ldquoasynchronousrdquo nature which means it can do all of this without having to refresh the page In order to make an HTTP request to the server using JavaScript you need an instance of a class that provides you this functionality Such a class was originally introduced in Internet

Explorer as an ActiveX object called XMLHTTP Then Mozilla Safari and other browsers followed implementing an XMLHttpRequest class that supports the methods and properties of Microsofts original ActiveX object

The Ajax Developer for prototypeIn case you havent already used it prototypejs is a JavaScript library written by Sam Stephenson This amazingly well thought and well written piece of standards-compliant code takes a lot of the burden associated with creating rich highly interactive web pages that characterize the Web 20 off your back If you tried to use this library recently you probably noticed that documentation is not one of its strongest points As many other developers before me I got my head around prototypejs by reading the source code and experimenting with it I thought it would be nice to take notes while I learned and share with everybody else Im also offering an un-official reference for the objects classes functions and extensions provided by this library As you read the examples and the reference developers familiar with the Ruby programming language will notice an intentional similarity between Rubys built-in classes and many of the extensions implemented by this library

Ajax creating autosuggest with JavaScript Over the past year Google has branched out from its search engine into other types of Web applications One that caused a great deal of excitement among Web developers is Google Suggest The basic idea is very simple as you type Google suggests search terms that come up with results The first suggestion is filled into the textbox as you type while a list of several suggestions appears in a dropdown list beneath the textbox If you havent tried it yet check it out before reading on The idea behind Google Suggest is something that has been used in desktop applications for some time and has only recently made it onto the Web Google Suggest wasnt the first implementation of such an interface but it popularized the technique among developers to the point where people have dissected the source code and attempted to recreate the functionality In building the autosuggest textbox you will JavaScript in a true object-oriented fashion The main implementation consists of two types of objects one to represent the autosuggest control and one that provides the suggestions The autosuggest control does the heavy lifting in the code by handling all of the user interaction with the textbox

Ajax How to Create the suggest with ASP NET 20It all started when Netscape released Navigator 20 in 1996 This browser boosted two revolutionary new features frames and JavaScript Although Netscape had different intensions for these features developers could exploit frames and JavaScript to set up an out-of-band communications channel between the browser and the web server This made it possible to update forms data without posting back The concept behind the communications channel was simple You created a frameset made up of two frames One of the frames had the height or width attribute set to zero in practice making the frame ldquoinvisiblerdquo The other frame contained the user interface When the user clicked a button she triggered a JavaScript function which replaced the location property of the hidden frame with the URL for a CGI script that handled the request The various

parameters were passed thru the query string

The Ajax is very Dynamic interfaceOne of the classic drawbacks to building a web application interface is that once a page has been downloaded to the client the connection to the server is severed Any attempt at a dynamic interface involves a full roundtrip of the whole page back to the server for a rebuild-a process which tends to make your web app feel inelegant and unresponsive In this article Ill be exploring how this problem can be tackled with the use of JavaScript and the XMLHttpRequest object Take the simple example of filling out a serial number box to register a desktop app on a platform like Microsoft Windows According to convention once youve finished typing that tiresome string of alphanumeric into the little boxes a big green tick icon appears to indicate youve entered a valid code This happens instantly as a result of the interface being sewn to the application as soon as you finish typing the number the application is able to check its validity and respond

The Ajax make Website in less then 10 MinutesIve been toying around with AJAX apps and XMLHttpRequest but have wanted to put up a site that loads all of its content asynchronously If youre like me and you learn best from working with examples youre only 10 minutes away from your first AJAX website Angus Turnbull of Twinhelix has written an interesting piece of code named ldquoHTMLHttpRequest v10beta2rdquo and itrsquos the perfect start to building your own rich client-side web applications that send and retrieve data tofrom a server I have done several examples and tutorials on this subject but this is one of the most complete Irsquove seen to date This implements both XMLHttpRequest and a custom-written hidden-IFRAME-based transport layer Therefore it works in a wider range of browsers including Opera 7 and IE5Mac

Ajax Design PatternsBy now the entire World has heard about AJAX even those who donrsquot care about Web-Development have seen the potential of this new technology Everybody is tired of endless introductions on how cool AJAX is and those endless lists of good examples like Google Suggest GMail and alike so I decided to cut a long story short and jump right into the real tutorial Well yes and no it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget To keep the tutorial readable and to avoid having to implement low level functionality Irsquom using the dojo toolkit I tried prototype too and really enjoyed working with being a really nice and easy to use Library but dojo provides much more functionality bundled with it For both frameworks one thing is true documentation is scarse and I spent alot time debugging and reading posts on the newsgroups

Facing Programming Problem

bull Ask Questions bull Browse Latest Questions

bull Question-Answer Guidelines Add This Tutorial To Delicious Digg Google Spurl Blink Furl Simpy Y MyWeb

Current Comments

8 comments so far (post your own) View All Comments Latest 10 Comments

can i write my own Action instead of php file in ajax code

Posted by GVenu Prasad on Monday 021808 1713pm | 48890

View This Comment Separately

Provided excellent information and very good example in AJAX This is really helpful for who want to be a AJAX professional

Posted by jagadeesh rajanala on Thursday 072607 1440pm | 21987

View This Comment Separately

Try out dojo toolkit

Its a great ajax framework

httpwwwjyogcom

Posted by jYog on Thursday 05307 1011am | 15195

View This Comment Separately

Its nice to startup withThanku

Posted by Sailatha Patchala on Saturday 021007 0214am | 7067

View This Comment Separately

Pls Guide Me how to use AJAX with JSF with a Sample Example

Posted by Sowmithry on Monday 012907 1430pm | 4625

View This Comment Separately

hi this is very clear about ajax but i havent seen simple java example

Posted by murali on Thursday 012507 1728pm | 4347

View This Comment Separately

itz really nice but there should be example of java also ajax using struts

Posted by maheshv on Friday 011907 1649pm | 3832

View This Comment Separately

Its very nicePlease provide more Examples on thisU do not given a single example for java people

Posted by nagendra kumar on Monday 011507 1626pm | 3537

View This Comment Separately

Leave your commentNameEmailURLTitle

Comments

Enter Code

Note Emails will not be visible or used in any way and are not required Please keep comments relevant Any content deemed inappropriate or offensive may be edited andor deleted

No HTML code is allowed Line breaks will be converted automatically URLs will be auto-linked Please use BBCode to format your text