AJAX

AJAX
AJAX - Asynchronous JavaScript And XML
AJAX is not a programming language.
AJAX just uses a combination of:
 A browser built-in XMLHttpRequest object (to request data from a web

server)
 JavaScript and HTML DOM (to display or use the data)
 AJAX allows web pages to be updated asynchronously by exchanging data

with a web server behind the scenes. This means that it is possible to
update parts of a web page, without reloading the whole page.
AJAX Working
Ajax working Explanation:
1. An event occurs in a web page (the page is loaded, a button is clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by JavaScript
steps for designing a web application using ajax
1. Create or find your data source URL. An Ajax web application

needs a server or other source of data that can be accessed using a URL in
order to update the page. For this example, we'll use the following text, saved in
a file named data.txt.
Example
HelHello, World! This text is loaded using Ajax.
2. Create the HTML for your application. In the following HTML, I've
used a basic HTML5 template containing an h1 element with an id attribute. I've
also created a button that will trigger the Ajax functionality on the page when
clicked.
3. <html>
4. <head>
5. <title>An Ajax Web Application</title>
6. </head>
7. <body>
8. <h1 id="page-title"></h1>
9. <button id="load-data">Click Here to Load the Data</button>
10. </body>
</html>
3.Create a script block in your HTML (just above the closing body tag)
and write an event listener to detect click events on the button.
<script>
document.getElementById("load-data").addEventListener("click",function(){
});
</script>});
</script>
4.Use an XMLHttpRequest object inside the event listener's callback

function to request the data file.
var xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", "data.txt");
5.To detect the response, look for a change in the state of

the xmlhttp response, using the onreadystatechange event handler.
xmlhttp.onreadystatechange=function() {
//Do something here
}}
6.Write a callback function to insert the data from the text file into
the h1 element when the state of the response changes.
xmlhttp.onreadystatechange = function() {
document.getElementById("page-title").innerHTML = this.responseText;
}
7.Use the send() method to send the request.

xmlhttp.send();
The finished HTML page should look like this:
<html>
<head>
<title>An Ajax Web Application </title>
</head>
<body>
<h1 id="page-title"></h1>
<button id="load-data">Click Here to Load the Data </button>
<script>
document.getElementById("load-
data").addEventListener("click",function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "data.txt");
xmlhttp.onreadystatechange = function() {
document.getElementById("page-title").innerHTML =
this.responseText;
};
xmlhttp.send();
});
</script>
</body>
</html>
8.Open the HTML page in a browser and click the button. The script will produce the
following output in a browser:
The keystone of AJAX is the XMLHttpRequest

object.
1. Create an XMLHttpRequest object
2. Define a callback function
3. Open the XMLHttpRequest object
4. Send a Request to a server
The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object.
The XMLHttpRequest object can be used to exchange data with a

web server behind the scenes. This means that it is possible to
update parts of a web page, without reloading the whole page.
The xmlHttpRequest object is the developers dream, Because you can:
 Update a web page without reloading the page.

 Request data from a server after the page has loaded.
 Receive data from a server after the page has loaded.
 Send data to a server in the background.
XMLHttpRequest Object Methods
Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information

getResponseHeader() Returns specific header information
open(method, url, async, user, psw) Specifies the request
method: the request type GET or POST

url: the file location
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password
send() Sends the request to the server

Used for GET requests
send(string) Sends the request to the server.

Used for POST requests
setRequestHeader() Adds a label/value pair to the header to be sent
XMLHttpRequest Object Properties
Property Description
onload Defines a function to be called when the request is recieved (loaded)

Onreadystatechange: Defines a function to be called when
the readyState property changes
readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status Returns the status-number of a request

200: "OK"
403: "Forbidden"
404: "Not Found"
statusText Returns the status-text (e.g. "OK" or "Not Found")

SENDING AJAX REQUEST TO SERVER AND RECEIVING A RESPPONSE
FROM SERVER AND RECEIVING A RESPONSE FROM SERVER WITH
EXAMPLE PROGRAM
The XMLHttpRequest object is used to request data from a server.
Send a Request To a Server

To send a request to a server, we use the open() and send()
methods of the XMLHttpRequest object:
xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();
Method Description
open(method, url, async) Specifies the type of request
method: the type of request: GET or POST

url: the server (file) location
async: true (asynchronous) or false (synchronous)
send() Sends the request to the server (used for GET)
send(string) Sends the request to the server (used for POST)

Sending a AJAX Request To a Server and
receiving a response from server
To send a request to a server, we use the open() and send()
methods of the XMLHttpRequest object:
xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();
sending request and retrieving the response: The first thing before
you continued with ajax object between server and client you must
do is to instantiate an XMLHttpRequest object.
Var request=new XMLHttoRequest();
The next step is using the open() method of the XMLHttpRequest

Object to send the request to the server is to instantiating the newly-
created request object.
Twp parameters typically accepted in the ope() method such as

“GET”, “POST”.etc..
JQUERY
 jQuery is a JavaScript Library.
 jQuery greatly simplifies JavaScript programming.
 jQuery is easy to learn.
 jQuery is a lightweight, "write less, do more", JavaScript library.
 The purpose of jQuery is to make it much easier to use JavaScript on your

website.
 jQuery takes a lot of common tasks that require many lines of JavaScript
code to accomplish, and wraps them into methods that you can call with a
single line of code.
 jQuery also simplifies a lot of the complicated things from JavaScript, like
AJAX calls and DOM manipulation.
The jQuery library contains the following features:

 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
jQuery - Plugins
A plug-in is piece of code written in a standard JavaScript file. These files provide
useful jQuery methods which can be used along with jQuery library methods.
There are plenty of jQuery plug-in available which you can download from
repository link at https://jquery.com/plugins.
Following example shows how to include jquery.plug-in.js plugin −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"

src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script src = "jquery.plug-in.js" type = "text/javascript"></script>

<script src = "custom.js" type = "text/javascript"></script>
<script type = "text/javascript" language = "javascript">

$(document).ready(function() {
.......your custom code.....
});
</script>
</head>
<body>
.............................
</body>
</html>
steps for including jquery in web pages:
Following are the two different ways for adding the jQuery to Html page:
1. Download and Include jQuery file

2. Include the jQuery by CDN.
Download and Include jQuery File
If we want to add the jQuery to Html page by downloading the jQuery file, then we
have to follow the steps which are given below. Using these steps, any user can
easily add the jQuery.
Step 1: Firstly, we have to download the jquery js file from the following
official site of jQuery. https://jquery.com/download/
Step 2: When we have downloaded the file, then we have to open

that Html file in which we want to add the jquery.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the jQuery file into Html by downloading and Including file
</Title>
</Head>
<Body>
Hello User!... <br> <center>
<img src="https://www.javatpoint.com/images/logo/jtp_logo.png" width="100" he
ight="100" > </center>
</Body>
</Html>
Step 3: After then, we have to place the cursor between the head tag
just before the title tag. And, then we have to use the <script> tag,
which specify the src attribute for adding the jQuery file.
<!Doctype Html>
<Html>
<Head>
<script type="text/javascript" src="jquery-3.5.1.min.js">
</script>
<Title>
Add the jQuery file into Html by downloading and Including file
</Title>
</Head>
<Body>
Hello User!... <br> <center>
<img src="https://www.javatpoint.com/images/logo/jtp_logo.png" width="100" he
ight="100" > </center>
</Body>
</Html>
Step 4: And, at last, save the Html file and the jQuery file is
successfully added into our Html page.
jQuery Syntax:
The jQuery syntax is tailor-made for selecting HTML elements and performing
some action on the element(s).
Basic syntax is: $(selector).action()
 A $ sign to define/access jQuery

 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on
their name, id, classes, types, attributes, values of attributes and much
more. It's based on the existing CSS Selectors, and in addition, it has
some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector

The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
SYNTAX: $("p")
Example:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
EXAMPLE PROGRAM:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></scrip
t>
<script>
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific
element.
An id should be unique within a page, so you should use the #id selector when you
want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of
the HTML element:
Syntax: $("#test")
Example
When a user clicks on a button, the element with id="test" will be hidden:
$("#test").hide();
});
});
The .class Selector

The jQuery .class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the
name of the class:
Syntax: $(".test")
Example:
$(".test").hide();
});
});
The JQUERY Document Ready Event
The ready event occurs when the DOM (document object model) has been loaded.
Because this event occurs after the document is ready, it is a good place to have all
other jQuery events and functions. Like in the example above.
The ready() method specifies what happens when a ready event occurs.
Syntax
Two syntaxes can be used:
$(document).ready(function)
The ready() method can only be used on the current document, so no selector is
required:
$(function)
Parameter Description
function Required. Specifies the function to run after the document is loaded
Example:
$("p").click(function(){
$(this).hide();
});
JQuery Event Methods:
jQuery events are the actions that can be detected by your web application. They
are used to create dynamic web pages. An event shows the exact moment when
something happens.
These are some examples of events.
o A mouse click
o An HTML form submission
o A web page loading
o A keystroke on the keyboard
o Scrolling of the web page etc.
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the
current <p> element:
Example
$(this).hide();
});
EXAMPL E PROGRAM:
<!DOCTYPE html>
<html>
<head>
<script
t>
<script>
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
dblclick()
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:
Example
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
The mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element:
Example
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
Example program:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$("#p1").mouseenter(function(){
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:
Example
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
mousedown()
The mousedown() method attaches an event handler function to an HTML
element.
The function is executed, when the left, middle or right mouse button is pressed
down, while the mouse is over the HTML element:
Example
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released,
while the mouse is over the HTML element:
Example
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
hover()
The hover() method takes two functions and is a combination of
the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML element, and the
second function is executed when the mouse leaves the HTML element :
Example
$("#p1").hover(function(){
},
function(){
});
<!DOCTYPE html>
<html>
<head>
<script
<script>
$("#p1").hover(function(){
},
function(){
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
<!DOCTYPE html>
<html>
<head>
<script
<script>
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>

Email: <input type="text" name="email">
</body>
</html>
blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
The on() Method

The on() method attaches one or more event handlers for the selected
elements.
Attach a click event to a <p> element:
Example
$("p").on("click", function(){
$(this).hide();
});
<!DOCTYPE html>
<html>
<head>
<script
<script>
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
jQuery Effects
Hide, Show, Toggle, Slide, Fade, and Animate are jquery methods.
jQuery show() and hide()

The jQuery show() method is used to show the selected elements.
With jQuery, you can hide and show HTML elements with
the hide() and show() methods:
Syntax:
1. $(selector).show();
2. $(selector).show(speed, callback);
3. $(selector).show(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible
vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after

completion of show() effect.
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and can
take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after

the hide() or show() method completes .
Example
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Example program:
<!DOCTYPE html>
<html>
<head>
<script
t>
<script>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
jQuery toggle()
You can also toggle between hiding and showing an element with
the toggle() method.
Shown elements are hidden and hidden elements are shown:
Example
$("p").toggle();
});
Syntax:
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or
milliseconds.
The optional callback parameter is a function to be executed

after toggle() completes.
Example program:
<!DOCTYPE html>
<html>
<head>
<script
t>
<script>
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
jQuery slideDown() Method
The jQuery slideDown() method is used to slide down an element.
Syntax:
$(selector).slideDown(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the
following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the sliding

completes.
The following example demonstrates the slideDown() method:
Example
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideToggle() Method

The jQuery slideToggle() method toggles between
the slideDown() and slideUp() methods.
If the elements have been slid down, slideToggle() will slide them up.
If the elements have been slid up, slideToggle() will slide them down.
$(selector).slideToggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast",
milliseconds.
The optional callback parameter is a function to be executed after the sliding

completes.
The following example demonstrates the slideToggle() method:

Example
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery fadeIn() Method

The jQuery fadeIn() method is used to fade in a hidden element.
Syntax:
$(selector).fadeIn(speed,callback);
The optional callback parameter is a function to be executed after the fading

completes.
The following example demonstrates the fadeIn() method with different

parameters:
Example
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() Method

The jQuery fadeOut() method is used to fade out a visible element.
Syntax:
$(selector).fadeOut(speed,callback);

completes.
The following example demonstrates the fadeOut() method with different

parameters:
Example
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() Method

The jQuery fadeToggle() method toggles between
the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in.
If the elements are faded in, fadeToggle() will fade them out.
Syntax:
$(selector).fadeToggle(speed,callback);

completes.
The following example demonstrates the fadeToggle() method with different

parameters:
Example
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() Method

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and
1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the
The required opacity parameter in the fadeTo() method specifies fading to a given
opacity (value between 0 and 1).
The optional callback parameter is a function to be executed after the function

completes.
The following example demonstrates the fadeTo() method with different

parameters:
Example
$("#div1").fadeTo("slow", 0.15);
});
FUNCTIONS IN jQuery like text(),html(),val(),attr(),
css()
 text() - Sets or returns the text content of selected elements
 html() - Sets or returns the content of selected elements (including HTML
markup)
 val() - Sets or returns the value of form fields.
Example:
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#test2").html("<b>Hello world!</b>");
});
$("#test3").val("Dolly Duck");
});
A Callback Function for text(), html(), and val()

All of the three jQuery methods above: text(), html(), and val(), also come with a
callback function. The callback function has two parameters: the index of the
current element in the list of elements selected and the original (old) value. You
then return the string you wish to use as the new value from the function.
The following example demonstrates text() and html() with a callback function:
Example
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
Set Attributes - attr()

The jQuery attr() method is also used to set/change attribute values.
The following example demonstrates how to change (set) the value of the href
attribute in a link:
Example
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
The attr() method also allows you to set multiple attributes at the same time.
The following example demonstrates how to set both the href and title attributes at
the same time:
Example
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
A Callback Function for attr()
The jQuery method attr(), also comes with a callback function. The callback
function has two parameters: the index of the current element in the list of
elements selected and the original (old) attribute value. You then return the string
you wish to use as the new attribute value from the function.
The following example demonstrates attr() with a callback function:
Example
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
jQuery css() Method

The css() method sets or returns one or more style properties for the selected
elements.
Return a CSS Property

To return the value of a specified CSS property, use the following syntax:
Syntax:
css("propertyname");
The following example will return the background-color value of the FIRST
matched element:
Example
$("p").css("background-color");
Set a CSS Property
To set a specified CSS property, use the following syntax:
css("propertyname","value");
The following example will set the background-color value for ALL matched
elements:
Example
$("p").css("background-color", "yellow");
AngularJS
Angular js is an open source Model-View-Controller frame work .
Angular JS is an open source JavaScript framework that is used to build web

applications. It can be freely used, changed and shared by anyone.
ANGULAR JS FOLLOWS MVC ARECHITECTURE
M V C MEANS – MODEL VIEW CONTROLLER
1. Model: It is responsible for managing application data. It responds to the

requests from view and to the instructions from controller to update itself.
2. View: It is responsible for displaying all data or only a portion of data to the
users. It also specifies the data in a particular format triggered by the controller's
decision to present the data. They are script-based template systems such as JSP,
ASP, PHP and very easy to integrate with AJAX technology.
3. Controller: It is responsible to control the relation between models and views. It
responds to user input and performs interactions on the data model objects. The
controller receives input, validates it, and then performs business operations that
modify the state of the data model.
Features of ANGULAR JS
 Data-binding − It is the automatic synchronization of data between model
and view components.
 Model View Whatever − MVW is a design pattern for dividing an
application into different parts called Model, View, and Controller, each
with distinct responsibilities. AngularJS does not implement MVC in the
traditional sense, but rather something closer to MVVM (Model-View-
ViewModel). The Angular JS team refers it humorously as Model View
Whatever.
 Scope − These are objects that refer to the model. They act as a glue between
controller and view.
 Controller − These are JavaScript functions bound to a particular scope.
 Services − AngularJS comes with several built-in services such as $http to
make a XMLHttpRequests. These are singleton objects which are
instantiated only once in app.
 Filters − These select a subset of items from an array and returns a new
array.
AngularJS Directives
 AngularJS lets you extend HTML with new attributes called Directives.
 AngularJS has a set of built-in directives which offers functionality to your

applications.
 AngularJS also lets you define your own directives.
 AngularJS directives are extended HTML attributes with the prefix ng-.
 The ng-app directive initializes an AngularJS application.
 The ng-init directive initializes application data.
 The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.

AJAX

Uploaded by

Copyright:

Available Formats

AJAX

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AJAX

Uploaded by

Copyright:

Available Formats

AJAX

AJAX - Asynchronous JavaScript And XML

AJAX is not a programming language.

AJAX just uses a combination of:

 A browser built-in XMLHttpRequest object (to request data from a web

 AJAX allows web pages to be updated asynchronously by exchanging data

2. An XMLHttpRequest object is created by JavaScript

3. The XMLHttpRequest object sends a request to a web server

4. The server processes the request

5. The server sends a response back to the web page

6. The response is read by JavaScript

7. Proper action (like page update) is performed by JavaScript

steps for designing a web application using ajax

1. Create or find your data source URL. An Ajax web application

4.Use an XMLHttpRequest object inside the event listener's callback

var xmlhttp = new XMLHttpRequest();

5.To detect the response, look for a change in the state of

7.Use the send() method to send the request.

The finished HTML page should look like this:

The keystone of AJAX is the XMLHttpRequest

The XMLHttpRequest Object

The XMLHttpRequest object can be used to exchange data with a

The xmlHttpRequest object is the developers dream, Because you can:

 Update a web page without reloading the page.

XMLHttpRequest Object Methods

new XMLHttpRequest() Creates a new XMLHttpRequest object

abort() Cancels the current request

getAllResponseHeaders() Returns header information

open(method, url, async, user, psw) Specifies the request

method: the request type GET or POST

send() Sends the request to the server

send(string) Sends the request to the server.

setRequestHeader() Adds a label/value pair to the header to be sent

XMLHttpRequest Object Properties

onload Defines a function to be called when the request is recieved (loaded)

the readyState property changes

readyState Holds the status of the XMLHttpRequest.

responseText Returns the response data as a string

responseXML Returns the response data as XML data

status Returns the status-number of a request

statusText Returns the status-text (e.g. "OK" or "Not Found")

The XMLHttpRequest object is used to request data from a server.

Send a Request To a Server

xhttp.open("GET", "ajax_info.txt", true);

open(method, url, async) Specifies the type of request

method: the type of request: GET or POST

send() Sends the request to the server (used for GET)

send(string) Sends the request to the server (used for POST)

xhttp.open("GET", "ajax_info.txt", true);

Var request=new XMLHttoRequest();

The next step is using the open() method of the XMLHttpRequest

Twp parameters typically accepted in the ope() method such as

 jQuery greatly simplifies JavaScript programming.

 jQuery is easy to learn.

 jQuery is a lightweight, "write less, do more", JavaScript library.

 The purpose of jQuery is to make it much easier to use JavaScript on your

The jQuery library contains the following features:

<script type = "text/javascript"

<script src = "jquery.plug-in.js" type = "text/javascript"></script>