Blogroll

photoshop cs6 html 5 css php seo backlinks

adsense

Wednesday, 26 February 2014

How to use AJAX XMLHTTP RequesT?

AJAX uses the XMLHttp Request Object
To get or send information from/to a database or a file on the server with tradi-tional JavaScript, you will have to make an HTML form. A user will have to click the Submit button to send/get the information and wait for the server to respond.
Then a new page will load with the results. Because the server returns a new page
each time the user submits input, traditional Web applications can run slowly and
tend to be less user friendly.
With AJAX, your JavaScript communicates directly with the server through the
JavaScript XMLHttpRequest object.
With the XMLHttpRequest object, a Web page can make a request to, and get a
response from a Web server—without reloading the page. The user will stay on the
same page, and he will not notice that scripts request pages or send data to a server
in the background.
The XMLHttpRequest Object
By using the XMLHttpRequest object, a Web developer can update a page with
data from the server after the page has loaded!

AJAX was made popular in 2005 by Google (with Google Suggest).
Google Suggest is using the XMLHttpRequest object to create a very dynamic Web
interface: When you start typing in Google’s search box, a JavaScript sends the let-ters off to a server, and the server returns a list of suggestions.
The XMLHttpRequest object is supported in all major browsers (Internet Explorer,
Firefox, Chrome, Opera, and Safari).
Your First AJAX Application
To understand how AJAX works, we will create a small AJAX application.
We will create an AJAX application from scratch. The application will use two
click buttons to fetch data from a server and display the information in a Web page
without reloading the page itself.
First, create a small HTML page with a short <div> section. The <div> section
will be used to display alternative information requested from a server.
To identify the <div> section, we use an id=”test” attribute:
<html>
<body>
<div id="test">
<h2>Clickto let AJAX change this text</h2>
</div>
<body>
</html>
Then we add two simple <buttons>. When they are clicked the buttons will call
a function loadXMLDoc():
<button type="button" onclick="loadXMLDoc(‘test1.txt’)">Click
Me</button>
<button type="button" onclick="loadXMLDoc(‘test2.txt’)">Click
Me</button>
Finally, we add a <script> to the page’s <head> section to contain the loadXML
Doc() function:
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{

.... Your AJAX script goes here ...
}
</script>
</head>
The next chapters explain the script (using AJAX) and how to make the
application work.
Try it yourself >>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById(‘test’).innerHTML=xmlhttp.response-Text;
}
</script>
</head>
<body>
<div id="test">
<h2>Clickto let AJAX change this text</h2>

</div>
<button type="button" onclick="loadXMLDoc(‘test1.txt’)">Click
Me</button>
<button type="button" onclick="loadXMLDoc(‘test2.txt’)">Click
Me</button>
</body>
</html>

0 comments:

Post a Comment