• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Servlet and Ajax

 
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have a very simple Servlet that prints a string to response.out.



Running this from the browser directly returns the expected string above, but from a sample JavaScript file, courtesy of W3Schools, I get nothing:



--------

This is probably something super simple I'm missing.

I'm not, for example, exactly sure what the "mydiv" is doing, but, regardless, either Firefox or Safari remain blank when I press the button.

Suggestions would be appreciated.

Thanks,

- mike
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This code:searches for an element with the id myDiv which doesn't exist. So, yeah, nothing happens.

You also need to be consistent with variable names.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Once you have that working, if you are interested, I have other comments on your code.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:This code:searches for an element with the id myDiv which doesn't exist. So, yeah, nothing happens.

You also need to be consistent with variable names.



Yes, you're right, but I corrected the div back to this...



And it's still the same blank page.

BTW, this was just test code from W3Schools for testing only.

Would appreciate ideas why I just get a blank page after clicking the button. I put an alert() inside the function but it doesn't do anything, either.

Thanks Bear.

- mike
 
Bartender
Posts: 1210
25
Android Python PHP C++ Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I notice you areyour code is missing some closing braces. Is it like that in actual code, or just a mistake made here while posting?
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Karthik Shiraly wrote:I notice you areyour code is missing some closing braces. Is it like that in actual code, or just a mistake made here while posting?



Wow, nice catch. However, I still get a blank page when I click the button.

I'm clearly doing something wrong. This JS code is hitting a standard Java Servlet which works fine with a testing JSP page.

I've tried to run the code below remotely and on the server. Not sure if it has to be on the server or not, but it doesn't do anything....still.

Any ideas?

Thanks,

- mike

 
Karthik Shiraly
Bartender
Posts: 1210
25
Android Python PHP C++ Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The brace placement is incorrect, because it's changed the logic. Now it's trying to send the XHR from inside the XHR state change function, but that function will never get called until a XHR is sent.
Your previous version seems mostly correct, except for the one missing brace for the if statement.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Check. Your. Variable. Names.

Again.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Karthik Shiraly wrote:The brace placement is incorrect, because it's changed the logic. Now it's trying to send the XHR from inside the XHR state change function, but that function will never get called until a XHR is sent.
Your previous version seems mostly correct, except for the one missing brace for the if statement.



OK,, thanks. However, it still does nothing if I run it locally:



(I got the basic code sample from: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first)

Thanks,

- mike
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Last time I am going to post: check your variable names!
 
Rancher
Posts: 4801
50
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Learn to use the debugger of whatever browser you are using (Chrome has a good one, IMO).
Guessing at what the error is is rarely productive when you can place a breakpoint and see what things actually are.

And also do what Bear suggests...
 
Ranch Hand
Posts: 171
Hibernate Spring Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Bear has clearly told whats wrong...check variable names, how about changing xmlhttp to xhttp? Also if the issue is solved, then a small message like "it worked" would be great
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Anurag Verma wrote:Bear has clearly told whats wrong...check variable names, how about changing xmlhttp to xhttp? Also if the issue is solved, then a small message like "it worked" would be great



OK, but no difference in result.

it has a Status=0 in the else block I added.

(now running code on server, hence localhost:8080)

???

Thanks,

- mike

 
Karthik Shiraly
Bartender
Posts: 1210
25
Android Python PHP C++ Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
An ajax request goes through multiple states, and the onreadystatechange handler is called on each state change.
You'll see multiple alerts, until state is 4 ("DONE").

One problem of using the 'alert' function is that it pauses all code - including ajax callbacks - until you click the alert dialog button. This can affect any timing sensitive behaviour, including ajax requests.
I suggest you use "console.log('<your debug message>')" instead of alert(), and watch the messages in the browser's console window ( Ctrl+Shift+J in Chrome, Ctrl+Shift+K in Firefox, F12 - I think - in IE).
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Dave Tolls wrote:Learn to use the debugger of whatever browser you are using (Chrome has a good one, IMO).


This. Do it now. Immediately. Before you write a single more line of code.

Otherwise, you are wasting your time.

Then, set a breakpoint in the handler. is it even being called?

And then, stop the madness and use jQuery for your Ajax.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:

Dave Tolls wrote:Learn to use the debugger of whatever browser you are using (Chrome has a good one, IMO).


This. Do it now. Immediately. Before you write a single more line of code.

Otherwise, you are wasting your time.

Then, set a breakpoint in the handler. is it even being called?

And then, stop the madness and use jQuery for your Ajax.



Yes, the code is being called. Got two Status=0s in the callback.

Was already using Firebug, Bear.

The URL is to a Servlet, which should just return a String.

- mike
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
OK, so at the breakpoint, you can examine the results of the various expressions that you are using.

Does the call to fetch the element return what you expect? Does the reference to the response text contain what you expect?
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:OK, so at the breakpoint, you can examine the results of the various expressions that you are using.

Does the call to fetch the element return what you expect? Does the reference to the response text contain what you expect?



Hi Bear,

Yes and No.

The GetReadyState does go to 4 after three callbacks, but the status, per my reply above, stays at zero. Thus, not what I expected.

Thus, the responseText never gets filled in.

Thanks,

- mke
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
OK, so now look at the network section of the debugger to see what's going wrong.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:OK, so now look at the network section of the debugger to see what's going wrong.



Not sure what could be going wrong since the code is on the server and I'm accessing the Servlet GET and POST methods with no issues from either a JSP or from an external client program.

I was trying to whip up a quick JS example of Ajax, but this is anything but.

I'll come back to this later.

Appreciate your help.

Thanks Bear,

- mke
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You're doing it the hard way -- no one does that.

In this day and age, you should be using jQuery or some other library.

In jQuery, this is a single line of code.

What does the debugger say about your request?
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:You're doing it the hard way -- no one does that.

In this day and age, you should be using jQuery or some other library.

In jQuery, this is a single line of code.

What does the debugger say about your request?



Right, JQuery is next!

Just trying to make sure I can do it in regular JS first.

I got the GET part working locally and across to the server.

If I change GET to POST in the HTML file, then it stops working.

From Firebug:
----------------

POST http://localhost:8080/AjaxSvr/ajax?name=Jim 403 Forbidden 6ms

Message: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://<SERVER>:8080/AjaxSvr/ajax. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

I added the basic CORS stuff to the WEB.XML of the app, and redeployed but maybe I need to re-examine this tomorrow.

Will check back here in the morning.

Thanks for hanging in there with me, Bear!

- mike



 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It sounds like your page is doing from the servlet's server, why the need for CORS?

But, yes, jQuery. Doing it the hard way isn't a useful exercise, in my opinion.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:It sounds like your page is doing from the servlet's server, why the need for CORS?

But, yes, jQuery. Doing it the hard way isn't a useful exercise, in my opinion.



No idea why CORS message is coming up.

I think I'll just try JQuery tomorrow. Probably something simple like $.Ajax(...).

Thanks again.

-- mike
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
For the type of thing you are trying to do (just stuff the response into the DOM), you'd want to use the load() method.

Make sure you are using server-relative URLs for your requests.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:For the type of thing you are trying to do (just stuff the response into the DOM), you'd want to use the load() method.

Make sure you are using server-relative URLs for your requests.



I'm not sure why I'm getting a: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/AjaxSvr/ajax. (Reason: CORS header 'Access-Control-Allow-Origin' missing)."

when all I'm doing is a call like this:

xhttp.open("POST", "http://localhost:8080/AjaxSvr/ajax", true);

I've tried....

1. Two Browsers

2. Four Tomcat versions

3. Adding the header response. response.setHeader("Access-Control-Allow-Origin","*");

-----

For whatever reason the GET request works fine, but the POST gives 403 with the error above.

There seems to be some talk about setting a Tomcat filter. Seriously? For the same machine? Not sure how to do this filter set up.

What the heck?

Look forward to hearing back.

- mike

P.S The following JQuery program, I adapted from the W3Schools sample, also returns a blank page with nothing in the Firebug display:

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Mike London wrote:
when all I'm doing is a call like this:

xhttp.open("POST", "http://localhost:8080/AjaxSvr/ajax", true);



I'm beginning to think that you don't even read my posts.

Use server-relative URLs when requesting back to the same server.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:

Mike London wrote:
when all I'm doing is a call like this:

xhttp.open("POST", "http://localhost:8080/AjaxSvr/ajax", true);



I'm beginning to think that you don't even read my posts.

Use server-relative URLs when requesting back to the same server.



Hi Bear,

It's not that I don't "read" your postings, I do. You're a serious expert.

It's just that you often say "what" to do, but not "how" to do it or give a simple example.

Case in point: Since I need to tell the server I'm using Tomcat, etc., I'm puzzled how I would convert a http://localhost:8080/AjaxSrv/ajax into a server relative path.

I'm sure it's clear as a sunny day in your mind, but a quick example would always be appreciated.

I've done several searches, but the examples are always pointing to files like gif files.

I have also experimented, but thus far am getting 404 errors (for example ./AjaxSvr/ajax does not work).

Thanks,

-- mike

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Mike London wrote:
It's just that you often say "what" to do, but not "how" to do it or give a simple example.



Yup. You'll learn more that way. If there's not enough detail to move forward; ask. But I'm not going to just give you the code.

Case in point: Since I need to tell the server I'm using Tomcat, etc., I'm puzzled how I would convert a http://localhost:8080/AjaxSrv/ajax into a server relative path.


This has nothing to do with Tomcat. A server-relative path, described in the JspFaq, is simply the part of the URL as relative to the server. In other words, drop the path to the server and just leave what's relevant to within the server. In the case of Java web apps, that begins with the context path; in this case /AjaxSvr.

I have also experimented, but thus far am getting 404 errors (for example ./AjaxSvr/ajax does not work).


Anything that starts with a dot is page-relative, and you never want to use that. You'll start with the context path.

 
Mike London
Bartender
Posts: 1971
17
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:

Mike London wrote:
It's just that you often say "what" to do, but not "how" to do it or give a simple example.



Yup. You'll learn more that way. If there's not enough detail to move forward; ask. But I'm not going to just give you the code.

Case in point: Since I need to tell the server I'm using Tomcat, etc., I'm puzzled how I would convert a http://localhost:8080/AjaxSrv/ajax into a server relative path.


This has nothing to do with Tomcat. A server-relative path, described in the JspFaq, is simply the part of the URL as relative to the server. In other words, drop the path to the server and just leave what's relevant to within the server. In the case of Java web apps, that begins with the context path; in this case /AjaxSvr.

I have also experimented, but thus far am getting 404 errors (for example ./AjaxSvr/ajax does not work).


Anything that starts with a dot is page-relative, and you never want to use that. You'll start with the context path.



Sun of a gun..... It works!

Hello from Ajax Server! (**POST**)

Correct path was just "/AjaxSvr/ajax" since AjaxSvr was at the public_html (www) level.

I'm normally server side so this tripping though the tulips, if you'll pardon my mangled Tiny Tim metaphor, has been illuminating!

Thanks Bear! You're the best.

- mike

P.S. I guess i need to read more on Ajax since that Ajax code still doesn't do anything with the adjusted path, but I do get a 200. Thanks again.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Cool, you might still want to read through the JspFaq entires about paths to make sure you understand when to use what type of path.

Does the response now return the expected text?
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Cool, you might still want to read through the JspFaq entires about paths to make sure you understand when to use what type of path.

Does the response now return the expected text?



Thanks, will do.

Yes, it does. it was strange that GET was OK, but POST wasn't.

In any case, it's all good now.

Thanks a million, Bear.

- mike
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Why would POST act like a GET? You shouldn't expect it to (and shouldn't code it to do so).
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Why would POST act like a GET? You shouldn't expect it to (and shouldn't code it to do so).



My comment was only in the context of the error message displayed using POST when GET worked fine.

Thanks,

- mike
 
Marshal
Posts: 28193
95
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
POST gives you the 403 return code because your servlet only supports GET. That's what the doGet() method does, it supports the GET method. I leave it to you to figure out how to support POST, but as already pointed out you shouldn't be changing to POST just because you think using GET might be the problem, or (worse) because you want to make a random change to see if it fixes your problem.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Paul Clapham wrote:POST gives you the 403 return code because your servlet only supports GET. That's what the doGet() method does, it supports the GET method. I leave it to you to figure out how to support POST, but as already pointed out you shouldn't be changing to POST just because you think using GET might be the problem, or (worse) because you want to make a random change to see if it fixes your problem.



Actually, my servlet overrides both doGet() and doPost().

I appreciate your reply.

Thanks to Bear's endless patience, I got everything working! :)

- mike
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic