My First AJAX – the simplest Asynchronuous JavaScript Server call man can imagine

Lucas Jellema 1
0 0
Read Time:2 Minute, 0 Second

Inspired by Aino’s post AJAX and RIA, I wanted to get my first XMLHttpRequest object based AJAX example getting up and running. It is a standalone HTML page that can be deployed on any webserver (I ran it from inside JDeveloper). When the Submit button is pressed, the page itself is invoked and the returned value (the HTML for the page itself) is stored in the Text Field. You cannot get it any simpler than this. Of course, normally the Request would be a sensible one, to a WebService or a Servlet or even JSP that returns a useful value to the browser.

<html>
  <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"></meta>
    <title>Ajax Try Out</title><SCRIPT language="JavaScript">
    var req;
  function loadXMLDoc(url) {
    document.forms['simpleform'].simplefield.value="sending....";
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send(null);
        }
    }
  }
  function processReqChange()  {
          document.forms['simpleform'].simplefield.value="response received";
         // only if req shows "complete"
        if (req.readyState = = 4) {
          // only if "OK"
          if (req.status = = 200) {
          response  = req.responseText;
          document.forms['simpleform'].simplefield.value=req.responseText; // do something with the response
          }
          else {
          document.forms['simpleform'].simplefield.value="Failed.";
              alert("There was a problem retrieving   the XML data:n" + req.statusText);
          }
      }
   }
        </SCRIPT>
  </head>
  <body>

<H1>This is a very sober demonstration of Ajax</H1>
<P>When you click on the button, a request is sent to the WebServer. After some time, the response is received and used to update the text field. The actual response is created by a Servlet running in the WebServer.</P>
<form name="simpleform">
<input id="field1" value="defaultvalue" type="text" name="simplefield" onblur="loadXMLDoc(document.location.href) ;"/>
</form>
<input type="submit" onclick="loadXMLDoc(document.location.href);" value="Submit"/>
See for more examples:
<a href=”http://www.xml.com/pub/a/2005/02/09/xml-http-request.html”>XML.com Very Dynamic Web Interfaces</a>
</body>
</html>

About Post Author

Lucas Jellema

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

One thought on “My First AJAX – the simplest Asynchronuous JavaScript Server call man can imagine

  1. hello nice code! i have writen ajax code for my application but its working in mozilla only not in internet explorer why? can u explain

Comments are closed.

Next Post

Spring Workshop - Day Four - Rod and Alef on AOP, JMX and Remoting (Spring does EJB??)

Friday I attended the last day of the Spring Workshop. An interesting menu for today’s dinner: Aspect Oriented Programming, JMX support and Remoting. Friday, the last day of the Spring Workshop by core committers Alef Arendsen en Rod Johnson. Another dive into the depths of Spring, markably the Spring AOP […]
%d bloggers like this: