![ The user wants to see more articles, so he or she clicks on the target button. This
event triggers an AJAX call.
A request is sent to the server. Along with the request, different data may be
passed. The request can point to a static file (e.g. example.json ) which is stored on the
server. Alternatively, it’s possible to execute a dynamic script (e.g. functions.php ) at
which point the script talks to the database (or other system) to retrieve data.
The database sends back the requested articles to the server. Next, the server
sends them to the browser.
JavaScript parses the response and updates specific parts of the DOM (the page
structure). Here, for instance, only the sidebar is being updated. The other parts of the
page don’t change.
With this in mind, you can understand why AJAX is an important concept for modern web. By
developing AJAX-powered applications, we’re able to control the amount of data that is
downloaded from the server.
Ajax First Program with Explanation
Firstprogram.html
<html>
<head>
<script type="text/javascript">
function fun1()
{
var a;
if (window.XMLHttpRequest)
{// If the browser if IE7+[or]Firefox[or]Chrome[or]Opera[or]Safari
a=new XMLHttpRequest();
}
else
{//If browser is IE6, IE5
a=new ActiveXObject("Microsoft.XMLHTTP");
}
a.onreadystatechange=function()
{
if (a.readyState==4 && a.status==200)
{](https://image.slidesharecdn.com/ajax-180324175631/85/Ajax-pdf-2-320.jpg)
![document.getElementById("myDiv").innerHTML=a.responseText;
}
}
a.open("POST","Sample.txt",true);
a.send();
} // fun1() close
</script>
</head>
<body>
<div id="myDiv" style="width: 300px; height: 30px;">Click on the button below</div>
<button type="button" onclick="fun1()">Change Content</button>
</body>
</html>
Sample.txt
Welcome to IT Department.
Explanation
Once the document loaded then immediately we will be able to see one button Change
Content , and see i have been given onclick=”fun1()” [ line number 33 ] means once we click
on this button controller will go to line number 4 and will starts execute that fun1()
At line number 6, i have taken one variable with name a
For any ajax program, we must create one request object to send our ajax request to the server,
that ajax object is nothing but XMLHttpRequest object
See line number 8, i have written window.XMLHttpRequest means am checking whether my
browser supports XMLHttpRequest object or not, if yes assigning XMLHttpRequest object into
a [ a=new XMLHttpRequest(); ] else i mean if our web browser doesnt
supports XMLHttpRequest object then we can assign ActiveXObject [ which supports old web
browsers ] into our variable a [ a=new ActiveXObject(“Microsoft.XMLHTTP”); ]
So from line numbers 8 -15 request object creation work been done](https://image.slidesharecdn.com/ajax-180324175631/85/Ajax-pdf-3-320.jpg)
Ajax.pdf
- 1. Ajax What is AJAX? AJAX stands for “Asynchronous Javascript and XML”. It isn’t a single, nor a new technology. In fact, it is a group of existing technologies (i.e. HTML, CSS, Javascript, XML, etc.) which come together to build modern web applications. With AJAX, a client (i.e. browser) communicates with a web server and asks for data. Then, it processes the server’s response and make changes to the page without fully reloading it. Let’s break down the AJAX acronym: “Asynchronous” means that when a client requests data from a web server, it doesn’t freeze until the server replies. On the contrary, the user can still navigate the pages. As soon as the server returns a response, a relevant function manipulates the returned data behind the scenes. “Javascript” is the language which instantiates an AJAX request, parses the corresponding AJAX response, and finally updates the DOM. A client uses the XMLHttpRequest or XHR API to make a request to a server. Think of the API (Application Programming Interface) as a set of methods which specify the rules of communication between the two interested parties. However, note that the incoming data from an AJAX request can be in any format and not only in XML format. How AJAX Works To get an initial idea of how AJAX works, take a look at the following visualization: This visualization describes a typical AJAX-driven scenario:
- 2. The user wants to see more articles, so he or she clicks on the target button. This event triggers an AJAX call. A request is sent to the server. Along with the request, different data may be passed. The request can point to a static file (e.g. example.json ) which is stored on the server. Alternatively, it’s possible to execute a dynamic script (e.g. functions.php ) at which point the script talks to the database (or other system) to retrieve data. The database sends back the requested articles to the server. Next, the server sends them to the browser. JavaScript parses the response and updates specific parts of the DOM (the page structure). Here, for instance, only the sidebar is being updated. The other parts of the page don’t change. With this in mind, you can understand why AJAX is an important concept for modern web. By developing AJAX-powered applications, we’re able to control the amount of data that is downloaded from the server. Ajax First Program with Explanation Firstprogram.html <html> <head> <script type="text/javascript"> function fun1() { var a; if (window.XMLHttpRequest) {// If the browser if IE7+[or]Firefox[or]Chrome[or]Opera[or]Safari a=new XMLHttpRequest(); } else {//If browser is IE6, IE5 a=new ActiveXObject("Microsoft.XMLHTTP"); } a.onreadystatechange=function() { if (a.readyState==4 && a.status==200) {
- 3. document.getElementById("myDiv").innerHTML=a.responseText; } } a.open("POST","Sample.txt",true); a.send(); } // fun1() close </script> </head> <body> <div id="myDiv" style="width: 300px; height: 30px;">Click on the button below</div> <button type="button" onclick="fun1()">Change Content</button> </body> </html> Sample.txt Welcome to IT Department. Explanation Once the document loaded then immediately we will be able to see one button Change Content , and see i have been given onclick=”fun1()” [ line number 33 ] means once we click on this button controller will go to line number 4 and will starts execute that fun1() At line number 6, i have taken one variable with name a For any ajax program, we must create one request object to send our ajax request to the server, that ajax object is nothing but XMLHttpRequest object See line number 8, i have written window.XMLHttpRequest means am checking whether my browser supports XMLHttpRequest object or not, if yes assigning XMLHttpRequest object into a [ a=new XMLHttpRequest(); ] else i mean if our web browser doesnt supports XMLHttpRequest object then we can assign ActiveXObject [ which supports old web browsers ] into our variable a [ a=new ActiveXObject(“Microsoft.XMLHTTP”); ] So from line numbers 8 -15 request object creation work been done
- 4. Now controller directly jumps to line number 25, and opens the connection and send the request to sample.txt (this is my notepad file), see actually the 3rd parameter i have given as true means Asynchronous data transfer will be activated Finally request will be sent in line number 26, that’s it. If server sends the response back to our application then controller will automatically execute from line number 17 – 23, you may get one doubt like why its not executed initially… ? there is a reason actually this a.onreadystatechange=function() executes only when we get the response from the server.