Ajax

Page 1

AJAX PRESENTATION by A.ANANDHA GANESH

Page 2

AJAX:

Ajax (shorthand for asynchronous JavaScript + XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages.

Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous.

The term Ajax has come to represent a broad group of web technologies that can be used to implement a web application that communicates with a server in the background, without interfering with the current state of the page

Page 3

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.

• Basically it is not a new programming language, but is a way to use existing standards to make the things better, faster and more user-friendly.

Page 4

Why Ajax?

 Ajax is popular and commonly uses script today for web application, it is because for the following reasons:

 1. Speed and invisibility (all smart clients) makes for a very efficient user experience.

2. The smaller server resources footprint helps server scalability.

3. Dynamic and continuous user experiences.

4. Desktop-like user interfaces.

 AJAX is a web development technique used at client side to create interactive web application. Its works as, it retrieve the data from the server asynchronously in the background without refreshing the whole page. It only refreshing the some part of the page and give result, instead of refreshing the whole page with its images and the CSS.

 -> The main purpose of the Ajax is to provide an effective output, communicating with the server for process the clients query quickly.

 -> It allows to performing the processing on user computer with the data taken from the server. Its main theme is to processing of web page formerly with the server using the Web services or php scripts, without interfering with the display and behavior of the existing page. (Page may includes many contents excluding text, images etc).

Page 5

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.

Page 6

Use:

 new Ajax.Request(url[, options])

 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 7

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.

Page 8

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.

 The XMLHttpRequest object is at the heart of Ajax and has become the de facto standard for enabling XML data to be passed asynchronously over HTTP. Asynchronous interaction implies that the browser can continue to process events in the page after the request is sent. Data is passed in the background, and can be automatically loaded into the page without requiring a page refresh.

Page 9

Creating Your First AJAX Page:

We have now know much more about ajax, and for the shake of understanding let us take a simple example which can exactly clears the concept what is the process and how ajax works.

Let us take an example:

Let us explain the working of the example described below. It includes an html page, which has the text box for search, also containing JavaScript and xml. And a php page having a php script for communicate to the server.

Functionality work as when you enter the text in the specified text field in the HTML page, it gives the response of your text, typed by you. Without doing a page refresh. And suddenly you got your response without doing wait.

Page 10

Javascript function

The JavaScript functions are to used to make a request for an information to the server. The server process the request and returns the specific information.

JavaScript the same page integrates the information in the same page. The theme is that instead of refreshing the whole page with the response, it only refreshes the part which is being queried.

Ajax script is made up of two different functions, the first one is fetch Data () and the other one is filter Data (). The XMLHttpRequest are created within the function, also the code is used to send the data located within this function.

Page 11

The Back-End Page

 However, your ‘back-end’ page needs to be written in a dynamic scripting language which is able to query a database. accept query string data - anything which requires access to a server or needs to fetch client-side data; examples of these kind of language is php.

 The back-end page are the page having the logic and ideas for running the concept of the front end page. If you want to run your Ajax internally,you have to prepare a back-end page in a dynamic language.

 This page can be created in any dynamic language, as well as it uses another language to communicate with the database for query.

 The Front-End Page:

 User interaction, GUI page, Display page and all the names are meant for the front page the HTML page, this page is built for display a page with the input fields, through which a user can filled the data and gets the required output.

 To begin with, your ‘front-end’ page can be in any scripting language - it can even be just a basic HTML file.

 In technical terms the page with .php(we consider for the php language) for displaying the input field to the user and return the result, is called the front end page, the page are basically having the html codes and the scripting language like JavaScript etc.

Page 12

Ajax with PHP(Using Database)

 Let us take an example of ajax with the use of database, how can we interact with database while using ajax in php, may be this question arises in your mind, so here we explain each and every thing through this example.

Example:

 The example shown below is having two php page . First page is for display the field, having HTML tags and the java script, the text field which is in a div is for receiving the result of the user input, text field is for user input a user puts his customer id and while clicks on the check button the request send to the server and the process will occur using the second page.

 Actually the other page is meant for the php script and mysql query.Which is used for communicating the server. And responsible for processing the query (id) in the database.

 Actually the theme of the example is when a user filled his customer id in the html page, the page will checks whether the customer exists or not if it exist then it will give the user name, address, city and phone no and if the id enter by the user/customer is not exist in the database then a message will come “Customer with the ID= XXXX doesn't exist.”

Page 13

AJAX: Real-life examples & Usage cases

Ajax- form vatidation

This is a new type of example of email validation, where we want to validate a form through ajax, The display page contains three fields first one is the name field, second one is the email address field and the last is for the city, this example is for validate the email address, when a user fills his name and then his email id and as he go to fill the city the email validation checks whether the email filled by the user is valid or invalid, a message appers identifying the valid/ invalid email.