[SOLVED] AJAX call to a servlet

[pesho318i]

Hi all,

I try to asynchronously pass a request to a servlet using the XMLHttpRequestObject.

When I use method GET in open(), the request seems to be sent, but the servlet receives an empty(null) request and it returns a default response (not the required one).

When I use method POST, I also try to set the request header using:
XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
However, in this case the XMLHttpRequestObject.status = 405. Hence, I'm afraid the request header is not set properly - maybe I set it the wrong way.

When I try to display the response headers using: document.write("Get All Response Headers: " + XMLHttpRequestObject.getAllResponseHeaders);
...the output is:
Get All Response Headers: function getAllResponseHeaders() { [native code] }

If I try to display the changes in the XMLHttpRequestObject status, I get the following output:

OPENED state (1)
HEADERS RECEIVED state (2)
LOADING state (3)
DONE state (4)
state: 1
HEADERS RECEIVED state (2)
LOADING state (3)
DONE state (4)
state: 2
LOADING state (3)
DONE state (4)
state: 3
LOADING state (3)
DONE state (4)
state: 3
LOADING state (3)
DONE state (4)
state: 3
LOADING state (3)
DONE state (4)
state: 3
LOADING state (3)
DONE state (4)
state: 3
LOADING state (3)
DONE state (4)
state: 3
DONE state (4)
state: 4


I read the XMLHttpRequestObject documentation: http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest, but I still cannot figure out what the problem is.


I'll be happy if you could give me any hint about what could be wrong or how I can continue debugging. I already ran out of ideas.

Thanks,
Pesho

[Rakuli]

Okay can you show the code you are using? It seems that you are doing the right thing

All 405 errors can be traced to configuration of the Web server and security governing access to the content of the Web site, so should easily be explained by your ISP....

[pesho318i]

thanks Rakuli,
ok, here is my javascript code:

Code: Select all

var controllerServlet = "/myApplication/myServletName";


function ajaxCall() {
            
    var XMLHttpRequestObject = false;
    
    if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        XMLHttpObject("Microsoft.XMLHTTP");
    }
    
    if (XMLHttpRequestObject) {
        
        //if POST method is used, uncomment the second line
        XMLHttpRequestObject.open("GET", controllerServlet, true);
        //XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                
        XMLHttpRequestObject.onreadystatechange = function() {
            
            if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                //handle response from server
                
                document.write("Get All Response Headers: " + XMLHttpRequestObject.getAllResponseHeaders);   //this prints: "Get All Response Headers: function getAllResponseHeaders() {     [native code] }"   which means that there is certainly something wrong with the headers
                document.getElementById('targetDiv').innerHTML = XMLHttpRequestObject.responseText;
                //window.location.reload(true);   //by the way I'm not sure how to refresh the DOM tree in Internet Explorer, it doesn't refresh after the request
            }
        }
 
        var newURL = "fh_params=fh_reffacet%3Dcategories%26fh_eds%3D%25c3%259f%26fh_refview%3Dsummary%26fh_refpath%3Dfacet_1%26fh_location%3D%252f%252fcatalog01%252fen_US%252fcategories%253c%257bcatalog01_15000%257d%252fcategories%253c%257bcatalog01_15000_15085%257d%252fcategories%253c%257bcatalog01_15000_15085_15894%257d%26fh_start_index%3D10";
 
        XMLHttpRequestObject.send(newURL);
        
    }

}

!!! However, as I already said, when I use GET method the servlet gets an empty request. When I use the POST method, there is some problem with the request headers, because HTTP status of the returned page is 405.

How can I exactly trace the HTTP 405 error? I'm using a local Tomcat container on Windows.


Thanks

[Rakuli]

I'm sorry I don't know anything about Tomcat So I am unsure why it isn't accepting POST requests -- maybe if you try their help area or wait for somehere who knows a bit about it.

As for the GET request -- you have your query string escaped... Is there a reaso for this? It looks like a query string with = reaplaced -- if you want to set GET string you need to unescape the = and & characters otherwise it is just read as a long string.

eg..

XMLHttpRequestObject.send(decodeURI(newURL));


Is there reason you are sending it as a long string or do you actually want there to be numerous variables.

[pesho318i]

As for the GET request -- you have your query string escaped... Is there a reaso for this? It looks like a query string with = reaplaced -- if you want to set GET string you need to unescape the = and & characters otherwise it is just read as a long string.

Well, this same URL is usually a normal hyperlink and it works well with the servlet. However, now I want to send it ONCLICK as an input to the ajax function. But the server returns a default response, because it seems to receive a null request. (with POST it doesn't return anything at all)

After your advice, I tried to simplify the URI to: key1=value1&key2=value2&key3=value3
In turn, I output the query string from the servlet as follows:

Code: Select all

System.out.println("value1Parameter= "+request.getParameter("value1"));
                System.out.println("QueryString= " + request.getQueryString());
                System.out.println("content type: " + request.getContentType());

the output in the logs is:

value1Parameter= null
QueryString= null
content type: null


no idea what is going on!

[Rakuli]

Okay, I just realised what is wrong with the script..

Try this

Code: Select all

var controllerServlet = "/myApplication/myServletName";


function ajaxCall() {
            
var newURL = "fh_params=fh_reffacet%3Dcategories%26fh_eds%3D%25c3%259f%26fh_refview%3Dsummary%26fh_refpath%3Dfacet_1%26fh_location%3D%252f%252fcatalog01%252fen_US%252fcategories%253c%257bcatalog01_15000%257d%252fcategories%253c%257bcatalog01_15000_15085%257d%252fcategories%253c%257bcatalog01_15000_15085_15894%257d%26fh_start_index%3D10";

    var XMLHttpRequestObject = false;
    
    if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        XMLHttpObject("Microsoft.XMLHTTP");
    }
    
    if (XMLHttpRequestObject) {
        
        //if POST method is used, uncomment the second line
        XMLHttpRequestObject.open("GET", controllerServlet + newUrl, true);
        //XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                
        XMLHttpRequestObject.onreadystatechange = function() {
            
            if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                //handle response from server
                
                document.write("Get All Response Headers: " + XMLHttpRequestObject.getAllResponseHeaders);   //this prints: "Get All Response Headers: function getAllResponseHeaders() {     [native code] }"   which means that there is certainly something wrong with the headers
                document.getElementById('targetDiv').innerHTML = XMLHttpRequestObject.responseText;
                //window.location.reload(true);   //by the way I'm not sure how to refresh the DOM tree in Internet Explorer, it doesn't refresh after the request
            }
        }
 
         
        XMLHttpRequestObject.send("");
        
    }

}

When you are using GET you need to send it the query string in the call to XML.open and just send an empty string.

Cheers

[pesho318i]

hey Rakuli,

I can't find words to thank you ! ! ! ! ! ! !
Yes, that was the problem indeed! I was so stupid not to pay attention to this detail. My brain was already in a BLOCKED state


can I ask you one more thing. Now it's working as expected, but only with a hardcoded URL. When I pass a dynamic URL to the JavaScript function I get errors.

Here you can see the difference between the hardcoded URL, which works OK, and the one I get ONCLICK as a parameter of the function:

hardcoded URL(works as expected):
pageasset=centercontent&fh_params=fh_reffacet%3Dca tegories%26fh_eds%3D%25c3%259f%26fh_refview%3Dsumm ary%26fh_refpath%3Dfacet_1%26fh_location%3D%252f%2 52fcatalog01%252fen_US%252fcategories%253c%257bcat alog01_15000%257d%252fcategories%253c%257bcatalog0 1_15000_15085%257d%252fcategories%253c%257bcatalog 01_15000_15085_15894%257d%26fh_start_index%3D10

dynamic URL, taken ONCLICK:
pageasset=centercontent&fh_params=fh_reffacet=cate gories&fh_eds=%c3%9f&fh_refview=summary&fh_refpath =facet_1&fh_location=%2f%2fcatalog01%2fen_US%2fcat egories%3c%7bcatalog01_15000%7d%2fcategories%3c%7b catalog01_15000_15085%7d%2fcategories%3c%7bcatalog 01_15000_15085_15894%7d&fh_start_index=20


obviously, the fh_params value should be encoded as in the first URL. Can you tell me how to do it in JavaScript?



THANKS again!!!
Pesho

[Rakuli]

yes, encode with encodeURIcomponent.. so if you are building the link, pass the string that needs to be sent encoded using encodeURIcomponent

Code: Select all

ajaxCall('pageasset=centercontent&fh_params=' + encodeURIcomponent('fh_reffacet=cate gories&fh_eds=%c3%9f&fh_refview=summary&fh_refpath =facet_1&fh_location=%2f%2fcatalog01%2fen_US%2fcat egories%3c%7bcatalog01_15000%7d%2fcategories%3c%7b catalog01_15000_15085%7d%2fcategories%3c%7bcatalog 01_15000_15085_15894%7d') + '&fh_start_index=20');

[pesho318i]

respect man!

encodeURIcomponent didn't actually work for me, but I used escape(). Anyway, thank you for the hint.

Now I only have to handle a problem with IE - it doesn't refresh the page after the response is received. But I'll try to resolve this problem...


Thank you once again !
Best,
Pesho

[Rakuli]

No problems... Have fun with it -- I love ajax