can't get ajax to work with jsp

Question

Ok, so I'm learning web design as a co-op at a company. However, the department I'm in is lacking in knowledgeable people in web design. So here we go...

Building a site that will allow the department to manage PTO. I want to implement ajax b/c the main page will have a calendar system so the manager can view the PTO week by week. As a precursor to that, I'm attempting to implement ajax with the "add Employee" page for practice. However, I can't seem to figure out what I'm missing (aka, why it's not doing anything)

This page just needs to add the new employee to the database. No display needed.

The main page just has 4 text fields and I get the information from those fields in javascript like so

    var firstName = document.getElementById("firstNameField");
var lastName = document.getElementById("lastNameField");
var manager = document.getElementById("managerField");
var networkID = document.getElementById("networkIDField");

Simple enough so far.

So I set up the ajax code like so, (this is gathered from what I've read.

 var url = "addEmpJSP.jsp?firstNameField=" +   escape(firstName)+"&lastNameField="+escape(lastName)+"&managerField="+escape(manager)+"&networkIDField="+escape(networkID);
  xmlhttp.open("POST",url,true);
  xmlhttp.onreadystatechange=dummy;
  xmlhttp.send(null);

This is the part where I'm assuming it's correct as I'm still learning ajax and how it works. I don't think I need to handle a response as I simply want the called jsp file to automatically do whats needed. (if that's possible).

The jsp file looks like this

<%

ResultSet rsEmpl;
Connection connection1 = getDBConnection();
Statement statment1=connection1.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_UPDATABLE);

String fName = request.getParameter("firstNameField");
String lName = request.getParameter("lastNameField");
String manager = request.getParameter("managerField");
String networkID = request.getParameter("networkIDField");
Int empId = 0;

String EditEmplSQL = "select * from PTO_employee";
rsEmpl=statment1.executeQuery(EditEmplSQL);


rsEmpl.last();
empId = rsEmpl.getRow() - 1;


statement1.execute("INSERT INTO PTO_employee VALUES ("+empID+","+lName+","+fName+","+0+","+2+","+networkID);

%>

I have a button on the page that executes the javascript function that contains the ajax info. I'm avoiding jquery atm b/c I'm trying to understand this stuff and how it works before I attempt to use "shortcuts" like jquery. I'm working towards a degree in Software Engineering so understanding this stuff is my priority, not getting it done.(that's just a bonus) If you need anymore information I can provide it. Sorry for my lack of knowledge and if this is completely off base then :(

BalusC · Accepted Answer · 2012-03-07T16:56:16.253

1

The main page just has 4 text fields and I get the information from those fields in javascript like so
var firstName = document.getElementById("firstNameField");
var lastName = document.getElementById("lastNameField");
var manager = document.getElementById("managerField");
var networkID = document.getElementById("networkIDField");

That gives you whole HTML DOM elements back, not the values of those elements. HTML DOM elements are like Java classes, having properties, methods and so on. Assuming that it are HTML input elements like <input>, then use their value property instead to get the value. So:

var firstName = document.getElementById("firstNameField").value;
var lastName = document.getElementById("lastNameField").value;
var manager = document.getElementById("managerField").value;
var networkID = document.getElementById("networkIDField").value;

So I set up the ajax code like so, (this is gathered from what I've read.

var url = "addEmpJSP.jsp?firstNameField=" +   escape(firstName)+"&lastNameField="+escape(lastName)+"&managerField="+escape(manager)+"&networkIDField="+escape(networkID);
xmlhttp.open("POST",url,true);
xmlhttp.onreadystatechange=dummy;
xmlhttp.send(null);

The escape() is the wrong function. It escapes JS syntax, it does not encode URI components. You should be using encodeURIComponent() function instead.

The jsp file looks like this
...
Int empId = 0;
...

This doesn't compile. It should be int instead.

...
String EditEmplSQL = "select * from PTO_employee";
rsEmpl=statment1.executeQuery(EditEmplSQL);
rsEmpl.last();
empId = rsEmpl.getRow() - 1;
...

Unnecessarily overcomplicated. Learn how to use DB builtin sequences/autoincrement IDs. Refer the DB specific manual or ask DB admin for help.

...
statement1.execute("INSERT INTO PTO_employee VALUES ("+empID+","+lName+","+fName+","+0+","+2+","+networkID);
...

You should put quotes around string values in the SQL query. Assuming that lName, fName and networkID are strings, not numbers, then it should look like this:

statement1.execute("INSERT INTO PTO_employee VALUES (" + empID + ",'" + lName + "','" + fName + "'," + 0 + "," + 2 + ",'" + networkID + "'");

But you have there a huge SQL injection attack hole and you also don't seem to close DB resources at all after use, so they may leak away and cause your webapp to crash sooner or later because the DB runs out of resources. Use PreparedStatement to create a parameterized SQL query and use its setters to set the values. Close the resources in finally block.

After all, reading the server logs should provide you information about compile errors and any server exceptions. Reading the ajax response should provide you information about the response status and body. Your core problem was that you ignored it and thus didn't have any chance to understand what is happening.

edited Mar 07 '12 at 16:56

answered Mar 07 '12 at 16:51

BalusC

1,082,665
372
3,610
3,555

"Unnecessarily overcomplicated. Learn how to use DB builtin sequences/autoincrement IDs." Resource for learning this? – cphilpot Mar 07 '12 at 16:58
"Should work fine, but you have there a huge SQL injection attack hole " I'm new to this, explanation of why? – cphilpot Mar 07 '12 at 16:59
"That gives you whole HTML DOM elements back, not the values of those elements. Assuming that it are input elements, use their value property instead." Oversite, thanks. – cphilpot Mar 07 '12 at 17:01
1) Read DB specific manual. 2) Read [Wikipedia](http://en.wikipedia.org/wiki/SQL_injection) and [JDBC tutorial](http://docs.oracle.com/javase/tutorial/jdbc/basics/prepared.html). Press F5 to see updated answer about incorrect SQL query syntax. – BalusC Mar 07 '12 at 17:02
"Reading the ajax response should provide you information about the response status and body." Ok, so in all the tutorials I've read, I've still been unclear on exactly how to send a response from the jsp file, or how to handle it. If I could figure this out then your assumption of that being my core problem could be corrected. Thanks for the help! – cphilpot Mar 07 '12 at 17:06
The Java code in your JSP has undoubtely caused an exception. This detail is available in the response. Last but not least, if you want more points for your work, put that Java code in a Servlet class instead of following a bad practice which is discouraged over a decade. See also http://stackoverflow.com/questions/3177733/how-to-avoid-java-code-in-jsp-files and http://stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax – BalusC Mar 07 '12 at 17:07
Thank you very much, my "server" admin isn't exactly a source of information. In fact, he does that on the side and knows less than I do about this stuff. So when I hit a road block I'm left to figure it out. Hopefully with this information I can proceed forward. I'll try and set up a try catch and see if I can't get a reason for the lack of update. Thanks again. – cphilpot Mar 07 '12 at 17:13
Last Question: Ajax sends the request, executes the jsp, and then returns to the javascript (in this case dummy). What is the response? How do I specify the response and how to I retrieve the response in javascript? – cphilpot Mar 07 '12 at 17:46
The response is whatever the JSP prints. I.e. everything outside `<% %>` or everything written by `out.print()` inside them. If you don't print anything, the response body is empty. However, in case of exceptions, the server will automatically print it to the response. In JavaScript, you can read the response in the `onreadystatechange` handler like as shown in chapter 1 of every basic Ajax tutorial. – BalusC Mar 07 '12 at 17:49
ok so any out.println(//stuff here) will be added to the response? That answers A LOT. However, if I have multiple prints, how is the response stored? String array? an object? object array? – cphilpot Mar 07 '12 at 17:52
It's basically just one large String. You can of course also format it in a specific manner like JSON or XML so that it's easier parseable by JavaScript. Again, JSP is the wrong tool for this. – BalusC Mar 07 '12 at 17:52
what do you recommend then? Asp? php? Frankly, I'm tired of dealing with jsp's and apparently I'm doing it "badly". So maybe I just need to redo the whole script from scratch. – cphilpot Mar 07 '12 at 18:03
As said before, a Servlet class. I've even supplied 2 links along it. Here's [one more](http://stackoverflow.com/tags/servlets/info). JSP is merely a HTML code generator. If you aren't generating HTML with JSP, or are writing raw Java code inside JSP, then you're doing it wrong. PHP/ASP are completely different languages and not an option if you only have a Java servlet container. – BalusC Mar 07 '12 at 18:10

can't get ajax to work with jsp

1 Answers1