Scribd
Upload
25 views7 pages

Ajax

The document discusses Ajax (Asynchronous JavaScript and XML), which allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes without reloading the entire page. It allows parts of a web page to be updated without disrupting the user's experience. The key aspects are: 1) Ajax uses the XMLHttpRequest object to send and receive data from a web server asynchronously in the background without interfering with the display and behavior of the existing page. 2) This allows updating parts of a web page dynamically without the need to reload the entire page. 3) Ajax communication with the server happens in the background without interfering with other actions and tasks the user may be

Uploaded by

Usman AziZ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
25 views7 pages

Ajax

The document discusses Ajax (Asynchronous JavaScript and XML), which allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes without reloading the entire page. It allows parts of a web page to be updated without disrupting the user's experience. The key aspects are: 1) Ajax uses the XMLHttpRequest object to send and receive data from a web server asynchronously in the background without interfering with the display and behavior of the existing page. 2) This allows updating parts of a web page dynamically without the need to reload the entire page. 3) Ajax communication with the server happens in the background without interfering with other actions and tasks the user may be

Uploaded by

Usman AziZ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 7

Ajax

Asynchronous JavaScript and XML


The usual way we operate in the Web
• Typical browsing behavior consists of loading a web page, then selecting some
action that we want to do, filling out a form, submitting the information, etc.
• We work in this sequential manner, requesting one page at a time, and have to wait
for the server to respond, loading a whole new web page before we continue.
• This is also one of the limitations of web pages, where transmitting information
between a client and server generally requires a new page to be loaded.

• JavaScript is one way to cut down on (some of) the client-server response time, by
using it to verify form (or other) information before it’s submitted to a server.

• One of the limitations of JavaScript is (or used to be) that there was no way to
communicate directly with a web server.

• Another drawback to this usual sequential access method is that there are many
situations where you load a new page that shares lots of the same parts as the old
(consider the case where you have a “menu bar” on the top or side of the page that
doesn’t change from page to page).
Things change…
• We used to not have any alternative to this load/wait/respond method of web
browsing.

• Ajax (sometimes written AJAX) is a means of using JavaScript to communicate with


a web server without submitting a form or loading a new page.

• Ajax makes use of a built-in object, XMLHttpRequest, to perform this function.

• This object is not yet part of the DOM (Document Object Model) standard, but is
supported (in different fashions) by Firefox, Internet Explorer, Safari, Opera, and
other popular browsers.

• The term “Ajax” was coined in 2005, but the XMLHttpRequest object was first
supported by Internet Explorer several years before this.
Ajax
• Ajax stands for “Asynchronous JavaScript and XML”.
• The word “asynchronous” means that the user isn’t left waiting for the server the
respond to a request, but can continue using the web page.

• The typical method for using Ajax is the following:

1) A JavaScript creates an XMLHttpRequest object, initializes it with


relevant information as necessary, and sends it to the server. The script
(or web page) can continue after sending it to the server.
2) The server responds by sending the contents of a file or the output of a
server side program (written, for example, in PHP).
3) When the response arrives from the server, a JavaScript function is
triggered to act on the data supplied by the server.
4) This JavaScript response function typically refreshes the display using the
DOM, avoiding the requirement to reload or refresh the entire page.
The Back End

• The part of the Ajax application that resides on the web server is referred to as the
“back end”.
• This back end could be simply a file that the server passes back to the client, which
is then displayed for the user.
• Alternatively, the back end could be a program, written in PHP, Perl, Ruby, Python,
C, or some other language that performs an operation and sends results back to
the client browser.
• An XMLHttpRequest object can send information using the GET and POST
methods to the server in the same way that an HTML form sends information.
Writing an Ajax application
• We have to write the “front end” of the application in JavaScript to initiate the
request.
• The back end, as mentioned, processes the request and sends it’s response back
to the client. The back end is typically a short program we write for performing
some dedicated task. This could be scripted in any language that is capable of
sending back communication to the browser, like PHP or Perl.
• We also need to write the JavaScript response function for processing the
response and displaying any results (or alterations to the web page).

• The “x” in Ajax stands for XML, the extensible markup language. XML looks like
HTML, which is no mistake as the latest versions of HTML are built upon XML. The
back end could send data back in XML format and the JavaScript response
function can process it using built-in functions for working with XML. The back end
could also send plain text, HTML, or even data in the JavaScript format.

• We will discuss some of these methods for sending data back to the requesting
client and how it can be processed.
The XMLHttpRequest object
• The XMLHttpRequest object is the backbone of every Ajax method. Each
application requires the creation of one of these objects. So how do we do it?

• As with most things in web programming, this depends upon the web browser that
the client is using because of the different ways in which the object has been
implemented in the browsers.

• Firefox, Safari, Opera, and some other browsers can create one of these objects
simply using the “new” keyword.

<script type="text/javascript">
ajaxRequest = new XMLHttpRequest();

</script>

You might also like