Advertisement

AJAX AND SERVER-SIDE TECHNOLOGIES

Ajax is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. Author explains how the client-side code can be easily altered to interact with ANY server-side technology, whether it is servlet or JSP or PHP or ASP.NET.


AJAX has become a popular technology from 2005 onwards. AJAX stands for Asynchronous JavaScript and XML.

It is a technique for getting data from a webserver without   clicking the 'submit' button. It is like an underground' operation.

    In a normal web application like Servlet/JSP  & PHP/PERL, the user fills up data in the form and then submits the form to the webserver. The JSP/PHP /ASP program in the webserver, collects this data from the form, does the required business logic using this data and then returns the result to the user through the browser.

It is not necessary to retain the GUI of the form. (ASP.net is special, because it retains the Gui by 'view state').

It is possible to write server side code in a servlet, to 're-create' the form and populate it. But, it is very tedious.

   Consider a form in which there is a combo showing various countries. The user selects his country and clicks the 'submit' button. The requirement is that a list should be populated with the names of the states in that country. So, the servlet will 'dynamically' create another form with a list and populate it. But, the combo will not be seen. If we want the combo and list to be seen, it becomes more difficult.

If we had used an applet as a frontend to connect to served, it would have been so easy! But, applet is not supported nowadays. It is in such conditions that AJAX becomes a good solution.

 In AJAX, the GUI is retained because we are not submitting the page but sending a small data to the server program and getting its reply without clicking the submit button. Thus, the combo, list1, list2 etc will always be there in the screen. As if it is a frame program.   The user need to submit the form only in the final stage. Thus, the user experience is better.

       But JavaScript is not implemented identically in all the browsers. Six years back, (2005), Internet Explorer was the leading browser. But today, in Feb-2011, there are so many browsers like Firefox, Opera, Chrome, and Safari etc.
There may be slight difference in JavaScript implementation by each of these browsers. (ECMA script standard is there but each browser always give special features). It is to solve such problems, ready-made Ajax kits have been developed and they are numerous.  Some of the famous Ajax kits are   Google Web Toolkit, Rico, Dojo, DWR, Prototype, Scriptaculous, etc. 

   Sometimes, it is easier to write Ajax code ourselves, without using these kits.   My aim is to develop Ajax concepts step-by-step and show how the client-side code can be easily altered to interact with ANY server-side technology, whether it is servlet or JSP or PHP or ASP.NET. For illustration, I will try with echo first and then access database table in server side and provide quick suggestion about names beginning with a letter typed as in gmail (like google suggest).

   So, let us begin.
I am using Internet Explorer. For convenience, I am placing all my Ajax html files in e:\tomcat5\webapps\root\ajaxpages folder, created by me.

   We can develop our examples along the following lines.
1) How to display by Ajax a static text file available in server side.
2) How to display a static XML file available in server-side, by Ajax.
3) How to get dynamically generated text from server and display it in browser. This is our 'echo' program.
a)   using servlet
b)   using JSP
c)   using  PHP
d)   using ASP.net

-----
4) In the next stage, we will send the first letter of a name search and get the full data for that name by using query in the server side.

      This I will do for
a)   servlet
b)   JSP
C)   PHP
d)   ASP.net

------

Nowadays, XML webservice is the standard. So, I will explore how I can use AJAX to utilise a webservice.
The webservice could have been created by using
a)   APACHE AXIS   (j2ee)
or
b) ASP.net using C#
====
Thus, we get good understanding about all the popular webserver technologies today.

For the demos, I will be using Tomcat5..
I have created a text file names.txt and placed it in tomcat5\webapps\root\ajaxpages.

It just contains a few names.
====================================
Here is the AJAX html page to access and display the names.txt file in the browser.
--
This AJAX html page is named as ajaxtext.htm and placed in e:\tomcat5\webapps\root\ajaxpages.

// EX-1 ( static text)
=======
<html>
<body    bgcolor=lightblue>

<form     name='form1'>
<input    type=button   value='click'   onclick='job1()'  >
<br>
<span   id='span1'    style=                    "background:cyan;color:blue;
left:300;
top:300;
position:absolute;"    />

 

</form>
<script   language='javascript'>

function   job1()
{
ob  = new ActiveXObject("Microsoft.XMLHTTP")

 if(ob)

url=      "http://localhost:8080/ajaxpages/
names.txt"
ob.open("GET",url,true);

  ob.onreadystatechange=job2
ob.send();
}
}  

function  job2()
{         
if(ob.readyState ==  4)
{
if(ob.status ==  200)
{
a = ob.responseText;
span1.innerText +=    a;    
}
}         
}

</script>
</body>
</html>

=========

  Start tomcat5 server and go to the browser window and type the url as

http://localhost:8080/ajaxpages/
ajaxtext.htm

when we click the button it displays the contents of names.txt file in span. 
(result shown in screen-1) 

  I will explain the code briefly later.
But the only difference in the various cases will be the URL. All the other things will be almost the same.
************************************
 If we use a different browser like Firefox etc, the syntax for getting the ajax-object is different.
ob = false;

if (window.XMLHttpRequest)
{
ob= new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
ob = new ActiveXObject(“Microsoft.XMLHTTP”);
}
*************************************

 

//  EX-2    ( static xml file)

 

  Let me now give an example of static XML from the server. An important point is that it cannot be displayed as XML in span. So we use a textarea and display the XML there.

  I have created   xml file books.xml and placed it in tomcat5\webapps\root\ajaxpages.
This AJAX html page is named as ajaxxmlplain.htm and placed in
e:\tomcat5\webapps\root\ajaxpages.

======

We will use the same html and JavaScript as before but omit the span and use textarea. (Because, span will not display xml correctly because of default parsing by the browser).

<textarea     name='area1'   rows='20'   cols='30' >
</textarea>

//................
In each of the examples, the important point is the URL.All the other things will be almost same.

 url=
"http://localhost:8080/ajaxpages/
books.xml" 

//to display a xml file in textarea.
if(ob.readyState ==  4)
{
if(ob.status ==  200)
{
s = ob.responseText;
form1.area1.value=s;         
}
}

when we run on the browser and click  the button it displays the contents of books.xml file in textarea.  
( result shown in screen-2)


Carefully note that though we are getting xml, we are using ob.responseText.  This is enough for most cases. 
==================================

EX-3 (servlet)

 I will now take up the case of dynamic text. Let us do it with a servlet.

This needs a servlet java file and AJAX html file. The servlet java file is named as echoservlet.java
-----------------------------------
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class echoservlet  extends HttpServlet
{

public void doGet
(HttpServletRequest   request,
HttpServletResponse  response)
throws ServletException,IOException
{
response.setContentType                                                     ("text/html");
PrintWriter  out = response.getWriter();

String  a = request.getParameter("text1");  
out.println(a);

}
}

======================================
Give path as d:\windows\system32;
c:\jdk1.5\bin
give classpath to e:\tomcat5\common\lib\servlet-api.jar

compile. copy the class file to
e:\tomcat5\webapps\root\web-inf\classes.

make entry in web.xml under web-inf as follows.
( substitute echoservlet=demo)

<servlet>
<servlet-name>demo</servlet-name>
<servlet-class>demo</servlet-class>
<servlet>
<servlet-mapping>
<servlet-name>demo</servlet-name>
<url-pattern>/servlet/demo</url-pattern>
</servlet-mapping>
====================================  

Now we create an AJAX html page named    ajaxechoservlet.htm and place in
e:\tomcat5\webapps\root\ajaxpages

//.............
The name that we type in text1 is collected by javascript .
s = form1.text1.value;
The URL  for this program
url="http://localhost:8080/servlet/
echoservlet?text1=" +escape(s)

  The same html and javascript is used but we  display the result in textbox2.

if(ob.readyState ==  4)
{
if(ob.status ==  200)
{
a = ob.responseText;
form1.text2.value=a;
}
}
//...............

   Shutdown and Restart the tomcat server if you have already started because we have made changes in the WEB-INF\classes folder.

   Go to the browser window and run the ajaxechoservlet.htm program.Type any name in first textbox and click the button 'echothis'.It will display  that name in second textbox.
(result shown in screen-3)

===========

EX-4 ( jsp)
====
Let us now do the same experiment using JSP. It is so very easy because, we need not compile anything. I think that you noticed that I used doGet method of the servlet. Ajax code works neatly if we use GET method rather than Post method.  See the URL in our Ajax htm file. In all our examples, I will use GET method only. In the case of servlet, PHP, ASP.NET, the code in server side will be different for post method and get method. But JSP does
not care.(see echojsp.jsp given below).

<%
String   a = request.getParameter("text1");
out.println("welcome!..."+a);
%>

Note that there is no <html><body>
tag when we use JSP for Ajax-client.

The corresponding Ajax-html file is
ajaxechojsp.htm  and the URL for Ajax will be

 "http://localhost:8080/
echojsp.jsp?text1=" +escape(s)

----------------------------------
// ajaxechojsp.htm
<html>
<body    bgcolor=lightblue>

<form     name='form1'>
<input   type=text   name='text1'   id='text1'    >
<input    type=button   value='click'   onclick='job1()'  >
<input   type=text   name='text2'   id='text2'  >
</form>
<span   id='span1'/>

<script   language='javascript'>

function   job1()
{
s = form1.text1.value

ob  = new ActiveXObject("Microsoft.XMLHTTP")

if(ob)
{
url=
"http://localhost:8080/
echojsp.jsp?text1=" +escape(s)

 span1.innerHTML  +=  " ";// clear
span1.innerHTML  +=  url;

 ob.open("GET",url,true);

 

 ob.onreadystatechange=job2

   ob.send();
}
}

    function  job2()
{
if(ob.readyState ==  4)
{
if(ob.status ==  200)
{
a = ob.responseText;
form1.text2.value=a;
}
}
}
</script>
</body>
</html>
---------------------------------
I have given the full code here. Note that I have provided a span. I am using it to check if the correct URL has been formed. It is useful to know from where the data is coming! The result is shown in screen-4
-------------------------------------

 

EX-5  ( dynamic text..PHP)

  PHP is a very popular technology nowadays. For SME ( Small and Medium Enterprise ) segment, it is used. The standard combination is LAMP. ( Linux, Apache web server, MySql data base, PHP scripting engine). All these are free and so small and medium eompanies use this .For Windows platform , we can use WAMP  or XAMPP. I am using XAMPP because, it gives support for PHP and PERL also.I have installed XAMPP. The root folder is C:\XAMPP\HTDOCS.
I place my files in mydemos folder under htdocs. I start XAMPP from start menu .It starts apache as well as MySql.

Let us now see how the php file is written.(c:\xampp\htdocs\mydemos\..)
// echoget.php

  <?php

   $a   = $_GET["text1"];
$r  = "hello!....,$a,...how are you?";
print   $r;

   ?>

Carefully note that we are not using the plus sign for string concatenation but just a comma.

 I am not giving the Ajax code here as it is identical to the previous JSP client version except for the URL.
The URL is:
"http://localhost/mydemos/
echoget.php?text1="+escape(s)

This file is named ajaxechophp.htm and is placed in e:\tomcat5\webapps\root\ajaxpages.

Now tomcat is already running and just see 'http://localhost:8080/ajaxpages/
ajaxechophp.htm'.
We will get correct result. As shown in screen-5.
---------------------------------------

EX-6  ( dynamic text..ASP.Net using C#).

  ASP.net is a fine technology. As I said earlier, it retains the GUI . In standard ASP.net, the method is POST. As we are using it in AJAX style, we need to use a different code as shown below.

I am using Microsoft ASP.Net WebMatrix. It is open-source and free. My root folder is G:\MATRIX\ROOT.

   If we use a html form with POST method to give data to asp.net, the syntax is:
String  a = Request.Form["text1"];

But, for GET method, it is,
String   a = Request.QueryString["text1"];
---
This is important point.

So, here is my asp.net file.
It is named ajaxecho.aspx and placed in g:\matrix\root

<%@    page    language='c#'    debug='true'  %>
<%
String    a  =
Request.QueryString["text1"];
String    r   =
"how are you?......"+a;

    Response.Write(r);
%>
-------------------------------
The corresponding ajax-htm file is
dotnetechoajax.htm  placed in
e:\tomcat5\webapps\root\ajaxpages.

The only difference is the URL which is:
"http://localhost:8000/ajaxecho.aspx?text1=" +escape(s)
Remember to start WebMatrix server from the start menu. Type the address in browser as http://localhost:8080/ajaxpages/dotnetechoajax.htm
We get correct result as expected.
see screen-6
----------------------------------------


 
======================================================

 I   will now show how to implement a program like google suggest
by a combination of Ajax and other technologies like servlet, jsp, php and asp.net.

Let me begin with the servlet for this purpose.

EX-7  name-suggest(servlet)

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;

public class ajaxqueryservlet  extends HttpServlet
{
public   void doGet(HttpServletRequest   request,
HttpServletResponse   response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter  out = response.getWriter();
//---------------

 

    String  a = request.getParameter("text1");
String  a1 = a+"%";
String   sql = "select * from table1 where name like '"+a1+"' ";
String r=" ";

    try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url="jdbc:odbc:contacts";

        Connection connection= DriverManager.getConnection(url);
Statement statement=connection.createStatement();
ResultSet rs = statement.executeQuery(sql);

 

        while(rs.next())
{
r=r+rs.getString(2)+"......"+rs.getString(3)+"<br>";
}
out.println(r);
}
catch(Exception e){ out.println( " " +e);  }
}

}

==============
Compile this file as in the case of echoservlet and deploy as before.

The ajax-htm page is ajaxqueryservlet.htm in e:\tomcat5\webapps\root\ajaxpages .
The relevant section is given below.
-----------
function   job1()
{
s = form1.text1.value;

ob  = new ActiveXObject("Microsoft.XMLHTTP");

if(ob)
{
span1.innerHTML  ="";

      url=
"http://localhost:8080/servlet/ajaxqueryservlet?text1=" +escape(s)

 

 ob.open("GET",url,true);

 ob.onreadystatechange=job2

   ob.send();
}
}
-----
Start tomcat5 and type the address in browser as
http://localhost:8080/ajaxpages/ajaxqueryservlet.htm
Type the first letter of the name being searched in text1. We get the name/names in span1.
( see screen-7A and screen-7B).


=======================================

EX-8   ( suggest name...JSP).

  In a JSP, it is always essential to use a bean for functionality. But we need to have a package. My package name is 'mypack'.
So, I am giving the jspbean here.

// ajaxquerybean.java

package   mypack;

import java.sql.*;

public class ajaxquerybean
{
public String   getrecords(String  a)
{
String  a1 = a+"%";
String   sql =
"select * from table1 where name like '"+a1+"' ";

    System.out.println(sql);
String r=" ";

    try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url="jdbc:odbc:keynameplace";
Connection connection= DriverManager.getConnection(url);
Statement statement=connection.createStatement();
ResultSet rs = statement.executeQuery(sql);
while(rs.next())
{
r=r+rs.getString(1)+"......"+
rs.getString(2)+"...."+
rs.getString(3)+"<br>";
}

        } 
catch(Exception   e1){ r= " " +e1;  }

        return   r;
}
}

========================================
Compile this file and place the class file in e:\tomcat5\webapps\root\web-inf\classes\mypack

We can now write the JSP which uses this bean.
====================================
// queryjspajax.jsp
<jsp:useBean    id='bean1'   class='mypack.ajaxquerybean'  />

      <%
String   a  =
request.getParameter("text1");
String   r  = bean1.getrecords(a);
out.println(r);

      %>
=================================

The ajax page ( queryjspajax.htm)uses the url as
"http://localhost:8080/ajaxpages/queryjspajax.jsp?text1="+escape(s)
====
As before, we restart tomcat and type the address in browser as
http://localhost:8080/ajaxpages/queryjspajax.htm
Type the first letter and we get the names in span1. as shown in screen-8A and screen-8B .

 

***************************************

EX-9   ( name suggest....PHP).

 PHP works nicely with MySql. XAMPP contains MySql also. It will be already running .
we have created the database table in MySql for our experiment.
c:\xampp\mysqlbin
We will get mysql prompt.
give command as:
mysql  -u root
>create database ourcontacts;
>show databases;
>use ourcontacts;
we  created table1 there having three fields ( id, name, place).
Just checkup.
>select * from table1;
we get the records displayed.
---

Now to the php.

Our php file suitable for Ajax  is in
c:\xampp\htdocs\mydemos\ajax and is named as queryphpajax.php
as given below.

<?php

    $db=mysql_connect("localhost","root","");

     mysql_select_db("ourcontacts");

     $a   =   $_GET['text1'];

     $sql =
"select * from table1 where
name like '$a%'  ";

     $result=mysql_query($sql);
$n =    mysql_num_rows($result);

if ( $n  == 0) { print "no records ";}

        for($j=0;   $j<$n; $j++)
{
$row=mysql_fetch_array($result);

        echo $row[0];
echo "<br>";

        echo $row[1];
echo "<br>";

        echo $row[2];
echo "<br>";

        echo "-----------";
echo "<br>";

 

        }

?>
----------------------------------------
The ajax-htm for this php differs just in the url.
the url is:
"http://localhost/mydemos/ajax/queryphpajax.php?text1=" escape(s)

Check up that both the APACHE server and Tomact are running and if the address is typed as
http://localhost:8080/ajaxpages/
queryphpajax.htm  and we type a letter , we get the names in span1 as shown in screen-9.

****************************************

EX-10  ( suggest name ) ( asp.net)

Just as we used a bean in jsp, here also
it is good practice to use a component in asp.net. It is known as DLL in asp.net.
I am now in g:\ajax  folder.
I create  ajaxquerybean.cs  here as shown.

using    System;
using   System.Data.OleDb;
using   System.Data;

 

public   class ajaxquerybean
{
public     String     getresult(String   a)
{
String s1=
"Provider=Microsoft.JET.OLEDB.4.0;data source=g:\\contacts";

   OleDbConnection con=new OleDbConnection(s1);

   con.Open();
String     s = a+"%";

   String   sql=  "select  *  from table1 where name like '"+s+"'  ";

   OleDbCommand command=
new OleDbCommand(sql,con);

   OleDbDataReader reader=command.ExecuteReader();

           String   r="";

   while(reader.Read())
{
r = r+reader[0].ToString()+"<br>"+
reader[1].ToString()+"<br>"+
reader[2].ToString()+"<br>"+
"------------------"+"<br>";
}

    return   r;

  }
}

We must compile this as a component.
So the command is:
>csc /t:library  ajaxquerybean.cs

This will create ajaxquerybean.dll

Copy this dll to the matrix server/root/bin
==
Now, this component can be used by any program in matrix server root.


Now, I create the aspx file to use this bean but suitable for ajax style GET.

// ajaxquerybeanuser.aspx

<%@     page   language='c#'    debug='true'  %>

    <%
String      a     = Request.QueryString["text1"];
ajaxquerybean  bean1 =
new    ajaxquerybean();
String       r    = bean1.getresult(a);
Response.Write(r);
%>

This file is placed in
g:\matrix\root\adonet.aspx

ajaxquerybeanuser.htm is in e:\tomcat5\webapps\root\ajaxpages
And the ajax-url is 
"http://localhost:8000/adonet/
ajaxquerybeanuser.aspx?text1="+escape(s)

Start the webmatrix server from the start menu. Access the address
http://localhost:8080/ajaxpages/
ajaxquerybeanuser.htm

We get correct result as shown in screen-10.

*************************************

 AJAX-CLIENT FOR WEB-SERVICE PROGRAMS

XML WebService is a modern technology. It enables J2EE, ASP.NET, C#, PHP, PYTHON AND RUBY programs to expose their service and any other platform/language program can use it. XML is a public standard not owned by any commercial company but by W3C ( World-wide Web Consortium). So, all the companies have accepted this standard.
Secondly, XML parsers are available in all platforms like Windows, MAC, Linux and Unix and so inter-operability is easy.
The greatest advantage of XML WebService over the previous techmologies like CORBA and COM+  is that it can pass through firewalls and so the service is always available.
There are 3 important technologies connected with   XML webservice.
They are SOAP, WSDL and UDDI.

SOAP  is Simple Object Access Protiocaol
WSDL is Webservice Description language.
UDDI is Universal Discovery and  terface.

   Creating XML WEBSERVICE in Java is very easy if we use a software from Apache known as Axis.The latest version is Axis2 but I am using Axis1.1.

There are 2 methods of using Axis1.1.
One method is known as Drop-in Deployment. It is easiest and I am following that.

The other method  makes use of deployment file.When we unzip axis.zip, we get axis . When we explore, we have webapps folder. Inside that we have axis folder.Just place this folder in e:\tomcat5\webapps and start tomcat.It has a built-in directory structure.

  we create a simple querybean.java program and place it in a axis folder as querybean.jws.( jws stands for java web service).
====================================
import java.sql.*;

public   class   querybean
{
public   String 
getrecords(String   a)
{
String     r = "";

String  s1= a+"%";
String  sql=
"select * from table1 where name like '"+s1+"'  ";

       try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String    url = "jdbc:odbc:keynameplace";
Connection connection= DriverManager.getConnection(url);
Statement    statement = connection.createStatement();
ResultSet     rs       = statement.executeQuery(sql);

          while(rs.next())
{
r = r + rs.getString(1) + "<br>"
+ rs.getString(2) + "<br>"
+ rs.getString(3) + "<br>"
+"..............."+ "<br>";
}

       } 
catch(Exception e1) { r = ""+e1 ;   }

 

       return     r;

    }
}

Start tomcat5 server.Go to the browser window and type the url as http://localhost:8080/axis/
querybean.jws?wsdl

   Then we get wsdl file and save it as querybean.wsdl in F drive. Now, we act as a client.   In DotNet, what we call 'stub' in RMI is knows as 'proxy' and what is 'skeleton' in RMI is 'stub'.
So, we have to generate the proxy from the wsdl file.

 

 we give the command as
wsdl querybean.wsdl

Now we get a c# source file as querybeanService.cs


To get a dll file, use the following command
csc /t:library querybeanService.cs

Then we get a querybeanService.dll

 copy it to g:\matrix\root\bin.

Now create  querybeanServiceuserget.aspx which uses the dll  in
g:\matrix\root\webservice folder.
======================================
//querybeanServiceuserget.aspx
<%@   page   language='c#'   debug='true'   %>

   <%
String   a =
Request.QueryString["text1"];

   querybeanService     service =
new    querybeanService();
String   r     = service.getrecords(a);

    Response.Write(r);
%>
========================================

Start the matrix server. 

As we want to provide an ajax client, we must use separate html file with 'GET' method.
place the html file in
g:\matrix\root\webservice.
==================================

<html>
<body   bgcolor=yellow>

<form   method=get
action="querybeanServiceuserget.aspx">

<input   type=text  name='text1'>
<br>
<input   type=submit>

</form>

</body>
</html>
======================================

Type the first letter of the name wanted. You will get the details.
After satisfying ourselves that the code is woking, we can write the usual ajax file and just mention the url as
"http://localhost:8000/webservice/
querybeanServiceuserajax.aspx?text1="+
escape(a)

. This file is mnamed
'querybeanServiceuserajax.htm' and is placed in e:\tomcat5\webapps\root\ajaxpages

Thus, we have provided ajax client for java webservice through asp.net but invoked in ajax style.

===============================

Now, I want to share with you, a very elegant method by using PHP.

I am using XAMPP.
I am using javawsqueryclient.php and javawsqueryclient.htm  in htdocs/phpws folder.

<html>
<body bgcolor=GOLD>
<form method="GET"
action="javawsqueryclient.php">
TYPE THE FIRST LETTER HERE
<BR>
<input type="text" name="text1" >
<input type="submit" >
</form>
</body>
</html>
========================================

<?php
$a = $_GET["text1"];
echo   $a;
echo "<br>";
$client =    new SoapClient("http://localhost:8080/axis/
querybean.jws?wsdl");

      $r=$client->getrecords($a);
echo  $r;

?>
========================================

Start Apache server of XAMPP.
tomcat is already running.
just type the address as
'http://localhost/phpws/
javawsqueryclient.htm'
Type one letter.
We get correct result.

You can thus see that PHP provides easiest client-side access to java webservice.

 It is a very simple matter now to use this with an ajax client as shown below.
This file is placed in e:\tomcat5\webapps\root\ajaxpages.
It is named as
javawsqueryclientajax.htm

The address should be typed as
'http://localhost:8080/ajaxpages/
javawsqueryclientajax.htm'

The result is shown in screen-12

 


--------------------------------------

<html>
<body    bgcolor=orange>
<h2>
type the first letter
<br>
this is ajax-access of java webservice
</h2>

<form     name='form1'>

<input   type=text   name='text1'   >
<BR>
<input   type=button  value="find"
onclick="job1()"  >
<BR>

</form>
<span    id='span1'  />

<script   language='javascript'>

function   job1()
{

s = form1.text1.value;

ob  = new ActiveXObject("Microsoft.XMLHTTP");

if(ob)
{
url=
"http://localhost/phpws/javawsqueryclient.php?text1=" +escape(s)

 

 ob.open("GET",url,true);
ob.onreadystatechange=job2
ob.send();
}
}

          function  job2()
{
if(ob.readyState ==  4)
{
if(ob.status ==  200)
{

                a = ob.responseText;

               span1.innerHTML  +=   a;

                }
}
}
//----------------
</script>
</body>
</html>

****************************************
I hope that students and learners find this article useful. You can send your comments about this to our editor.

Author is studying as second Year MCA at ACCET, Karaikkudi (Tamilnadu)








Added on January 20, 2012 Comment

Comments

#1

omarakash commented, on January 25, 2012 at 4:50 p.m.:

hi
I have completed Master in computer science and i am interested in doing PHD in a field that i can interact with the results. i am confused about the Computer graphics "medical imaging" , the HCI
and the augumented reality. would you plz help me in finding a nice topic to write my proposal and start my phd
y email: omarakash2002@yahoo.com
thanks in advance

Post a comment