Forum:

Servlets

Servlet Response Help

Greenhorn

Posts: 2

posted 9 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi I am new to this so please forgive me for my lack of understanding. I am working with google maps and I have a maps page that I want to populate with multiple markers. I have created a servlet that connects to a MYSQL DB and pulls out all of the information I need to generate the markers. Now how can I call this servlet from a HTML5/JSP page? I need to pass all of this info to an array so that I can loop through it and generate the pins. Right now I have been successful in pulling the data and writing to console in Netbeans IDE.

/STEP 1. Import required packages
import java.sql.*;
import java.sql.DriverManager;
import java.sql.Connection;
import java.sql.SQLException;

public class JDBCExample1 {
   // JDBC driver name and database URL
   static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";  
   static final String DB_URL = "jdbc:mysql://localhost/maps";

//  Database credentials
   static final String USER = "dk1";
   static final String PASS = "root1";

public static void main(String[] args) {
   Connection conn = null;
   Statement stmt = null;
   try{
      //STEP 2: Register JDBC driver
      Class.forName("com.mysql.jdbc.Driver");

//STEP 3: Open a connection
      System.out.println("Connecting to a selected database...");
      conn = DriverManager
              .getConnection("jdbc:mysql://localhost:3306/maps","dk1", "root1");
      System.out.println("Connected database successfully...");

//STEP 4: Execute a query
      System.out.println("Creating statement...");
      stmt = conn.createStatement();

String sql = "SELECT locname,latitude,longitude FROM locations";
      ResultSet rs = stmt.executeQuery(sql);
      //STEP 5: Extract data from result set
      while(rs.next()){
         //Retrieve by column name
         double latitude  = rs.getDouble("latitude");
         double longitude = rs.getDouble("longitude");
         String locname = rs.getString("locname");

//Display values
         System.out.println("Latitude:"+latitude+"<br>");
         System.out.println("Longitude"+longitude+"<br>");
         System.out.println("Locname"+locname+"<br>");

}
      rs.close();
   }catch(SQLException se){
      //Handle errors for JDBC
      se.printStackTrace();
   }catch(Exception e){
      //Handle errors for Class.forName
      e.printStackTrace();
   }finally{
      //finally block used to close resources
      try{
         if(stmt!=null)
            conn.close();
      }catch(SQLException se){
      }// do nothing
      try{
         if(conn!=null)
            conn.close();
      }catch(SQLException se){
         se.printStackTrace();
      }//end finally try
   }//end try
   System.out.println("Goodbye!");
}//end main
}//end JDBCExample1

Now here is the thing. I have already done a version of this page in PHP where I echo through an XML file. I want to do the same thing but using a Java servlet. Here is my page

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>index</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

var map;

function initialize() {
       map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(39.833333,-98.583333),
        zoom: 10,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
      downloadUrl("maps_xml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("state");
          var address = markers[i].getAttribute("locCode");
          var type = markers[i].getAttribute("zip");
          var city = markers[i].getAttribute("city");
          var value = markers[i].getAttribute("value");
          var contents = markers[i].getAttribute("contents");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>"+'City: '+city+"<br>"+'State: '+name +"<b><br/>" +'Location Code: '+ address+ "<b><br/>"+'ZIP: ' +type+"<b><br/>"+'Building Value: '+ value+"<b><br/>"+'Content Value: '+contents ;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

request.open('GET', url, true);
      request.send(null);
    }

function doNothing() {}

function toggleLayers(i)

{

if(layers[i].getMap()==null) {
                layers[i].setMap(map);
            }
            else {
                layers[i].setMap(null);
            }
            document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
        }
    //]]>
  </script>
  </head>
</body>

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 9 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Welcome to the Ranch.

Please be sure to UseCodeTags for code, not quote tags. Not sure why you did that for the second code segment.

I fixed it for you.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 9 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

You are already using Ajax in the page so I assume you know how to make requests using Ajax.

Also recommend using jQuery to vastly simplify your code.

[Asking smart questions] [About Bear] [Books by Bear]

Nikolas Verbinsky

Greenhorn

Posts: 2

posted 9 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:You are already using Ajax in the page so I assume you know how to make requests using Ajax.

Also recommend using jQuery to vastly simplify your code.

Hi this code was assembled using the tutorial found here

and with sample code that I got from Maps API sample code. So I am not a 100% sure exactly how it works. I tried to follow another tutorial on how to import a JSON object but I was not successful. How would AJAX calls exactly work?

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 9 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

My advice: remove all code that you did not personally write. Examples are fine to look at, but copying them verbatim means you end up with code that's a mystery.

Start from the basics and add code that does what you want one step at a time. Do not proceed to the next step until the previous step is working and tested.

[Asking smart questions] [About Bear] [Books by Bear]

Mahtab Alam

Ranch Hand

Posts: 391

I like...

posted 9 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I agree with Bear on using code taken from internet. I also do that while learning, a lot of times I used code taken from web .
And ultimately I have to change it , to make it as I want. I liked this advice

Start from the basics and add code that does what you want one step at a time. Do not proceed to the next step until the previous step is working and tested.

Tea Addict, Oracle Java Programmer , Oracle SQL Expert , Oracle Java Web Component Developer, Oracle Web Service Developer

Did you see how Paul cut 87% off of his electric heat bill with 82 watts of micro heaters?