HTML Ajax

Asynchronous JavaScript and XML(AJAX) is a collection of Web technologies to develop more interactive Web applications or websites. It helps you to create interactive Web application by retrieving a small amount of data from a Web server and then showing it on the applications. In addition, you do not need to refresh the entire Web application or Web page while retrieving the data.

How AJAX Work : – 

AJAX works by creating an instance of the XMLHttpRequest object and sending and HttpRequest request. This request passes over the Internet to a Web server. The server process the HttpRequest request, creates a response, and sends the data back to the Web browser over the Internet.

  •  Creating an instance of the XMLHttpRequest object to send an HttpRequest from a client to a server. All modern browsers, such as Internet Explorer7+, Firefox, chrome, Safari, and Opera, support the XMLHttpRequest object.                                                              Example :-                                                                                            variable =new XMLHttpRequest();
  • Creating a request to a server by using the open() method of the XMLHttpRequest object.
  • The open (method, url, async) method creates a request by using the following parameters :

             (1). method()  – Specifies the type of request, which an be GET              or    POST.

            (2). url  – Specifies the location of a file on the server

            (3) Specifies that whether the request is handled or not.

<!DOCTYPE HTML>
<head>
<title> Ajax Examle</title>
<script>
var XMLHttpRequestObj=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObj=new XMLHttpRequest();

}
else if(window.ActiveXObject){
XMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
function loadXMLDoc(dataSource, divID)
{
if(XMLHttpRequestObj)
{
var obj=document.getElementById(divID);
XMLHttpRequestObj.open("GET",dataSource);
XMLHttpRequestObj.onreadystatechange=function()
{
if(XMLHttpRequestObj.readyState==4 && XMLHttpRequestObj.status==200)
{
obj.innerHTML=XMLHttpRequestObj.responseText;
}
}
XMLHttpRequestObj.send(null);
}
}
</script>
</head>
<body>
<div id=myDiv"><h2>Let Ajax change this text</h2></div>
<button type="button" onClick="loadXMLDoc('abc.xml','myDiv')">
Change the content
</body>
</html>

 code for the abc.xml file :- 

 

<?xml version=“1.0” encoding=“UTF-8”?>

<Msge>

<Msg> welcome in xml</Msg>

</Msge>

In the Above Example, when you click on the button, the div section show the content of xml file from the server.  The information is stored in the abc.xml file, . The button calls a function, loadXMLDoc(), to display the data of the abc.xml file.




Follow Us

Contact Us

tutorialworldin@yahoo.com

Back to Top