CodesJava

Easy learning with example program codes

ajax hello world program


Ajax refers to asynchronous java script and xml. It is not a not a programming language. Ajax is of Asynchronous type. It normally uses XML, plain text or JSON to communicate with server i.e. for data transfer.

Note: Ajax is technology independent.

Example

<!DOCTYPE html>
<html>
<body>
 
<h2>AJAX Hello World</h2>
 
<p id="demo">Update content using ajax.</p>
 
<button type="button" onclick="loadDocument()">Update Content</button>
 
<script>
function loadDocument() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "test.txt", true);
  xhttp.send();
}
</script>
 
</body>
</html>

Example explanation

We have used here two files AjaxHelloWorld.html and test.txt. Keep these two files in same folder.

  1. When you open html file in browser. We will be able to see Update Content button.
  2. When we click Update Content button, it will call loadDocument() method.
  3. We creates an XMLHttpRequest object which is used for communication between client and server.
  4. The XMLHttpRequest object invokes open method to open the connection for a request to test.txt file. In open method, we use true for async parameter which means Asynchronous data transfer will be activated.
  5. The send method will send the request.
  6. The server processes the request.
  7. When server sends a response back to the web page, onreadystatechange = function()executes and updates the page content.
Posted in Ajax   
Sign Up/ Sign In
Ask a Question


Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki