Page 1

AJAX

BY,NIRMAL FELIX.K

Page 2

What is Ajax? Ajax stands “A”: Asynchronous,”JA”: JavaScript”X”: XML. It is a group of (JavaScript and Xml) interrelated web development techniques used on the client side to create interactive web application. Any server side technology that supports JavaScript also supports Ajax. • Foundation purpose of Ajax not to giving the output, but is to provide a simple and standard means/output for a web page to communicate with the server without doing a complete page refresh.

• Ajax programming is introduced in 2005 by Google.

Page 3

Technology used in Ajax Ajax as a combination of set of technologies. Use of Ajax is combination is of four things - 1: HTML/Xhtml, 2: JAVASCRIPT, 3: XML, 4: CSS. 2. JAVASCRIPT(ECMA Script) used for the local processing and DOM (Document Object model) data access inside the page or access elements of XML file read on the server. 3. Asynchronous data retrieval with XMLHttpRequest object.

Page 4

Drawbacks of Ajax Apart from the benefits Ajax also have some drawback which to be kept in mind while learning it: • If JavaScript is not activated, Ajax can't works.

• Another issue emerging from the dynamic nature of AJAX is a lack of interaction with search engines, Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not viewed by search engines.

• The back button may be deactivated.

• It usually requires more development time to build an application using AJAX than using other approaches.

• Another issue with JavaScript is that you have to consider what to do when a user has disabled JavaScript support within their browser. This requires extra development time to deliver an alternative solution.

• Data is loaded asynchronously without a page reload, so no page access is recorded in the browser history.

Page 5

AJAX: getting started Elements(Technologies) used in Ajax: Before Starting Ajax you should have the knowledge about the following things – 1-HTML

2-JAVASCRIPT and xml

3-PHP and little bit of the xml concepts. Before we explain anything about ajax, you should know how Ajax work, the main magic behind Ajax is “javascript” and “XMLHTTPRequest Object” .

Page 6

For creating your first Ajax based application, you should have the following things: 1: A front-end page (HTML page)

2: Php script

3: Xml Script HTML page: To begin with your first example, you have to prepare your first page it could be simply a scripting language like HTML, page containing the html tags, which is to be displayed. Html is used to display the data. PHP script: However your backend page have dynamic scripting language, which here we use as php language, which is used for querying a database. Basically it could be the anything which requires server access which accept clients data, these languages are Php and Asp. An another script is used in the front end script called “XML” script.

Page 7

Xml Basic: What is xml? It is necessary for you to know about the xml. What is it? And how it works? • Basically Xml is shorts for Extensible Markup Language.

• It is a Meta language which is used to define other languages.

• It is used for storing and transporting the data.

• It does not similar to HTML because html was designed to display the data and XML is used to describe the data.

• XML is used to aid the exchange of data.

• The data is defined in the language in the structured way.

• Tags used in the xml are not predefined, as in html. XML, which represents the data passed between the server and client. So the points explained above are helpful for you to understanding xml.

Page 8

JavaScript: It is not only the client-side scripting language that can be used for implementing an Ajax application. Other languages such as VBScript are also capable of the required functionality. JavaScript that allows for interaction with the browser and responding to events. XMLHttpRequest Object: Use XMLHttpRequest objects for browser-server communication JavaScript that allows for interaction with the browser and responding to events,XMLHttpRequest object is used for asynchronously exchanging the XML data between the client and the server.

Page 9

Creating the object: The following Example shown here demonstrates how to create and use the XMLHttpRequest object: This object is basically generated for all modern browsers like mozilla, safari including IE7. Example: var reqObj=new XMLHttpRequest(); The object that is shown below is generated for IE5 and IE6. For the ActiveX branch, pass the name of the object to the ActiveX constructor: Example: var reqObj =new ActiveXObject ("Microsoft.XMLHTTP");

Page 10

AJAX Request Introduction: Ajax sends a request to the server with following some method, the methods are “open()” and “send()”, the open method uses three augments, first is method type, second is defined the url of the server side script and the third one is specifies that the request should be handled asynchronously and the send method is sends the request off to the server. The format of the open and send method are: xmlhttp.open("GET","validate.php",true);xmlhttp.send(null); It Initiates and process an ajax request. It simply allows to interact with the server. Use: new Ajax.Request(url[, options])

Page 11

Actually this object is made for wrapping an instance of XMLHttpRequest and provides the facilities for setting function that are called before a request is made and after a request returns. This is made for handling the server response. Point to be remember that whenever an Ajax request is sent to the server, a special header named “X-Requested-With” with a value of XMLHttpRequest is attached to the request. Example:

function ajaxReq() { return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));}

IT would be very clear on seeing the code that, if the function return true then you received an ajax request otherwise return a normal request on receiving false.

Page 12

Ajax Working With browser Ajax unfortunately doesn’t have same code for all browser, it has little bit different for all the browser. The keystone of Ajax is XMLHttpRequest object. And it will be very necessary for you to know about the XMLHttpObject, how it makes all browser compactible with the code.<html><body><script type="text/javascript">function ajaxFunction(){var xmlhttp;if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }else { alert("Your browser does not support XMLHTTP!"); }}</script>

Page 13

Explaination: In the above javascript code, we try three times to make this XMLhttpRequest Object. Creation of the object is done with the try catch block, the try catch block works as basically it attempts to try a piece of code and if that piece causes the “error” it catches the error. 1.If you can see the code above you can notice that we first create a variable called xmlhttp to hold the XMLHttpRequest object. 2.Then next step is to creating the object XMLHttpRequest object. As xmlhttp= new XMLHttpRequest() 3.If the above code fails, try xmlhttp = new ActiveXObject (“Microsoft XMLHTTP). It is used for IE6 and IE5. 4.If that one is also doesn’t work, the it means that the user uses very outdated browser, so that the browser doesn’t support XMLHTTP. Note: The code above can be used every time you need to create an XMLHttpRequest object, so just copy and paste it every time you want to use Ajax.

Page 14

AJAX XMLHttpRequest: Introduction Ajax uses XMLHttpRequest objects for browser-server communication. The mechanism for sending data to and retrieving data from the server with Ajax is the XMLHttpRequest object. XMLHttpRequest has an important role in the AJAX web development technique. It has been used by many websites to implement attractive and dynamic web applications. XMLHttpRequest can be used inside a web browser scripting language(Like JavaScript), to send an HTTP or an HTTPS request directly to a web server and load the server response data directly back into the scripting language.

Page 15

It contains some informative values or a string, that is to be send at client side and be processed by the server. var url = "test.php?uname=user&id=" + escape(field.value);

var reqobj; // global variable to hold request object

function loadXMLDocument(url, params){ if(window.XMLHttpRequest) { try { reqobj = new XMLHttpRequest(); // creation of XMLHttpRequest object } catch(e) { reqobj = false; } } else if(window.ActiveXObject) { try { reqobj = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { reqobj = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { reqobj = false; } } } if(reqobj) { reqobj.onreadystatechange = processReqChange;

return true; } return false;}

Page 16

Creating an XMLHTTPRequest object: For Better use of ajax we must have to initialize the XMLHttpRequest object, use of that is very simple in most browsers, but it becomes little bit complex, when we try to use the IE 5 and 6. Explanation If you review the above code, you can see that, The funchtion LoadXMLDocument accepts two parameter, first one be the url (server location) of the server side script which is being called and the second one is the variable to pass to the script.The script looks like as:

<script type="text/javascript" src="js/xmlhttp.js"></script><script type="text/javascript">var params = 'x=' + encodeURIComponent(input) + '&goal=' + encodeURIComponent(goal); loadXMLDoc('/scripts/testscript.php', params);</script>

This is the script reside in the path scripts/testscripts.php, it have two parameters, namely are “x”, “goal”