JaiswalTraining

Get the online training



Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com





Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven








Ajax: Handling Different Server Data Formats


Handling Text Data

Returning Text

The responseText Property

  • The responseText property tries to represent the information returned
    by the server as a text string
  • If the XMLHTTPRequest call fails with an error, or has not yet been sent,
    responseText will have a value null.
  • The responseText property contains a character string.
  • The value of which you can assign to a JavaScript variable via a simple assignment statement:
var mytext = http.responseText;


A Basic Ajax Application Using the responseText Property

  • In this Example we are fetching the text from a text file.
  • When the user click on the fetch the message button, the message will be shown on the
    particular portion mentioned in the example as shown below.
index.html
<html>
<head>
<title>An Ajax Dmo</title>
<script language="javascript">
  var xmlhttpobject=false ;

  if (window.XMLHttpRequest)
    xmlhttpobject=new  XMLHttpRequest();
  else if (window.ActiveXObject)
    xmlhttpobject=new  ActiveXObject("Microsoft.XMLHTTP");
  

  function getData(datasource,divId)
  {
    if (xmlhttpobject)
    {
      var obj=document.getElementById(divId);
      xmlhttpobject.open("GET",datasource);

      xmlhttpobject.onreadystatechange=function()
      {
        if (xmlhttpobject.readyState == && xmlhttpobject.status == 200)
          obj.innerHTML=xmlhttpobject.responseText;
      }
    }
    xmlhttpobject.send(null );
  }
</script>
</head>

<body>
<h1>responseText Demo</h1>
<form>
<input type="button" value="Fetch the Message" onclick="getData('data.txt','targetDiv')">
</form>

<div id ="targetDiv">
<p>The Text message will appear Here</p>
</div>

</body>
</html>

data.text
Here is the Text Message:- "A JAVASCRIPT EXAMPLE."


Output:-
  • When the user click on the button , the text below button will get replaced by the
    text that will be fetched from text file.





Download Zip file

Example:-

  • In this example we r using the jsp file instead of text file.
  • Here the result of jsp file will be shown into html file.
  • As shown below.
array.html
<HTML>
<HEAD>
<TITLE>Display an array element</TITLE>

<script language="javascript">
  var xmlhttpobject=false ;

  if (window.XMLHttpRequest)
    xmlhttpobject=new  XMLHttpRequest();
  else if (window.ActiveXObject)
    xmlhttpobject=new  ActiveXObject("Microsoft.XMLHTTP");

  function getData(datasource,divID)
  {
    if (xmlhttpobject)
    {
      var obj=document.getElementById(divID);
      xmlhttpobject.open("GET",datasource+"?index="+escape
(
document.getElementById("index").value));

      xmlhttpobject.onreadystatechange=function()
      {
        if (xmlhttpobject.readyState == && xmlhttpobject.status == 200)
          obj.innerHTML=xmlhttpobject.responseText;
      }
    }
    xmlhttpobject.send(null );
  }
</script>
</HEAD>
<BODY>
<h3>DISPLAY AN ARRAY ELEMENT</h3>
<form>
WHICH ARRAY ELEMENT DO YOU WANT?
<input type="text" name="index"><br><br>
<input type="button" value="DISPLAY THE ELEMENT"
 
onclick="getData('index.jsp','targetDiv')">
</form>

<div id ="targetDiv" >
<p>THE FETCHED DATA WILL GO HERE..</p>
</div>

</BODY>
</HTML>

index.jsp
<%@page language="java" %>
<%
  String [] array={"One","Two","Three"};
  int  index=Integer.parseInt(request.getParameter("index"));
  out.println("THE ARRAY ELEMENT IS ");
  out.println(array[index]);

%>

Output:
  • We are using an array of length 3 in jsp file.
  • When the user provide the required index element, it will be fetched and shown.
  • As shown below.


  • The element On index 1 is  "Two".



Download Zip code



Handling XML Data

Returning XML

The responseXML Property

  • responseXML property does not contain just a string that forms
    a text representation of the XML document as was the case with the responseText property.
  • The entire data and hierarchical structure of the XML document has been stored
    as a DOM-compatible object.
Basic task
  • Getting the raw XML data
    • var xmlDocument = request.responseXML;
    • Instead of request.responseText
  • Finding array of XML elements
    • xmlDocument.getElementsByTagName(xmlElementName);
    • For example, if XML is
      <a><b>foo</b>
      <c>bar</c>
      <b>baz</b>
      </a>
      Then getElementsByTagName("b") returns a two-
      element array containing objects representing the two b
      tags and their contents
  • Finding the text between start and end tags
    • someElement.childNodes[0].nodeValue
    • Elements containing text are treated as having a hidden
      sub-element called a text node, and it is that sub-
      element's value that is the text you want
    • If XML is
      <a><b>foo</b
      <c>bar</c>
      <b>baz</b>
      </a>
    • Then the following makes value be "foo"
      • var elementArray = xmlDocument.getElementsByTagName("b");
    • var value = elementArray[0].childNodes[0].nodeValue;

Some JavaScript DOM Properties and Methods


Example:-

indexxml.html
<html>
<head>
<title>An Ajax Dmo</title>
<script language="javascript">
  var xmlhttpobject=false ;
  var xml;
  var index;

  if (window.XMLHttpRequest)
    xmlhttpobject=new  XMLHttpRequest();
  else if (window.ActiveXObject)
    xmlhttpobject=new  ActiveXObject("Microsoft.XMLHTTP");
  
  function getData(datasource,divId)
  {
    if (xmlhttpobject)
    {
      var obj=document.getElementById(divId);
      xmlhttpobject.open("GET",datasource);

      xmlhttpobject.onreadystatechange=function()
      {
      var obj=document.getElementById(divId);
        if (xmlhttpobject.readyState == && xmlhttpobject.status == 200)
        {
          xml=xmlhttpobject.responseXML;
          var xmldata=xml.documentElement;
        for (index=0;index<xml.length;index++)
          obj.innerHTML=xml[index].firstChild.data;
        }
      }
    }
    xmlhttpobject.send(null );
  }
</script>
</head>

<body>
<h1>An Ajax Demo</h1>
<form>
<input type="button" value="Fetch the Message"
onclick=
"getData('data.xml','targetDiv')">
</form>

<div id ="targetDiv">
<p>The fetched message will appear Here</p>
</div>

</body>
</html>

data.xml
<menu>
<menuitem>Gold</menuitem>
<menuitem>Silver</menuitem>
<menuitem>Platinum</menuitem>
<menuitem>Pearl</menuitem>
</menu>


Output:







Download Zip code

Another Example of responseText:

Example:--
  • In this example we are using three images.
  • Images descriptions is given in thier correspondent text file.
  • When the user move the mouse over accoss the images the correspondent
    image text will be fetched and shown to user.
  • As shown below.

shop.html
<html>
<head>
<title>AJAX Application</title>
<script language = "javascript">
      var XMLHttpRequestObject = false ;

      if  (window.XMLHttpRequest) {
        XMLHttpRequestObject = new  XMLHttpRequest();
      else if  (window.ActiveXObject) {
        XMLHttpRequestObject = new
          ActiveXObject("Microsoft.XMLHTTP");
      }

      function getData(dataSource, divID)
      {
        if (XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource,true);

          XMLHttpRequestObject.onreadystatechange = function()
          {
            if  (XMLHttpRequestObject.readyState == &&
              XMLHttpRequestObject.status == 200) {
                obj.innerHTML =
                  XMLHttpRequestObject.responseText;
            }
          }

          XMLHttpRequestObject.send(null );
        }
      }
</script>
</head>
<body>
<H3>OnMouseOver Application using Ajax</H3>
<img src="image1.jpg" width="150" height="150"
onmouseover = "getData('shirts.txt','targetDiv')">
<img src="image2.jpg" width="150" height="150"
onmouseover = "getData('jeans.txt','targetDiv')">
<img src="image3.jpg" width="150" height="150"
onmouseover = "getData('shoes.txt','targetDiv')">
<div id="targetDiv">
<h3>Welcome to my delux Showroom!</h3>
</div>
</body>
</HTML>

shirts.txt
shirts: Amazing shirts with wonderful designing.<br>
short shirts
long shirts
party shirts
casual shirts


jeans.txt
The all kind of jeans.
and paints & trausers are also available.<br>
Narrow bottom
Pencil type<br>
The jeans and Trausers are also desinged according to your choice.

shoes.txt
We offer too many shoes to list!<br>
sports shoes<br>
official shoes<br>


Directory Structure



Output:
  • Run the shop.html file.
  • The following page will be shown.


  • When the user move the mouse over across the images, the text will be shown according to images.
  • As shown below.
  • when the user move to shirts image, the shirt's description  is appeared from shirts.text file..


  • when the user move to jeans image, the jean's description  is appeared from jeans.text file..

  • when the user move to shoe image, the shoe's description  is appeared from shoes.text file..


Download Zip code