views:

109

answers:

1

Thanks, resolved one issue, this is the next. As a novice at this, I am still getting an error and the simple application is not working. I get INVALID_STATE_ERR: DOM Exception 11 when I execute the req.open("Get",url,true); command in the javascript in located in the following index.html file. The simple appl is not working. I get this in chrome in debug mode but the app also does not work on IE8 or FF3. Any ideas?

using Eclipse for J2EE with Java6, Ajax, on WindowsVista.

index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<script type="text/javascript">
    var req;

    function focusIn() {
        //This is how you comment in javascript portion of code
        //I will now demonstrate an alert function that calls a messagebox to the field, very useful for debugging
        //this displays in yoru browser
        alert('Hey dad this is an alert, this function was called by the onload message of the Body');

        //There is even a cooler way,  for instance say you wanted to display values
        var two = 2;
        var one = 1;
        var result = two + one;
        //Display your variable result
        alert(result);

        document.getElementById("key").focus();

    }

    function convertToDecimal(){
        var key = document.getElementById("key");
        var keypressed = document.getElementById("keypressed");
        keypressed.value = key.value;
        // onClick="alert('You clicked the button')"
        var url = "/AjaxResponseServlet?key=" + escape(key.value);
        if (window.XMLHttpRequest){
            req = new XMLHttpRequest();
        }
        else if (window.ActivateXObject){
            req = new ActiveXObject("Microsoft.XMLHTTP")
        }
        req.open("Get",url,true);
        req.onreadystatechange = callback;       
        req.send(null);
    }

    function callback() {
        if (req.readyState==4) {
            if (req.status == 200){
                var decimal = document.getElementById("decimal");
                decimal.value = req.responseText;
            }
        }
        clear();
    }

    function clear() {
        var key = document.getElementById("key");
        key.value="";
    }
</script> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ajax on Java Chapter 2</title>
</head>
<body onload="focusIn();" >
<!-- this is how you comment in HTML Body Portion of the code -->

<h1> AJAX CHARACTER DECODER </h1>
<h2> Press a key to find its value. </h2>
<table>
    <tr>
        <td>
            Enter Key Here --
            <input type="text" id="key" name="key" onkeyup="convertToDecimal();" />
        </td>
    </tr>
 </table>
 <br />
 <table>
    <tr>
        <td colspan="5" style="border-bottom:solid black 1px;">
            Key Pressed:
            <input type="text" readonly="readonly" id="keypressed" />
        </td>
        </tr>
        <tr>
            <td> Decimal </td>
        </tr>
        <tr>
            <td>
                <input type="text" readonly="readonly" id="decimal" />
            </td>
    </tr>
</table>

<!-- this is how you comment in HTML Body Portion of the code -->

<h1> AJAX CHARACTER DECODER </h1>
<h2> Press a key to find its value. </h2>
<table>
    <tr>
        <td>
            Enter Key Here --
            <input type="text" id="key" name="key" onkeyup="convertToDecimal();" />
        </td>
    </tr>
 </table>
 <br />
 <table>
    <tr>
        <td colspan="5" style="border-bottom:solid black 1px;">
            Key Pressed:
            <input type="text" readonly="readonly" id="keypressed" />
        </td>
        </tr>
        <tr>
            <td> Decimal </td>
        </tr>
        <tr>
            <td>
                <input type="text" readonly="readonly" id="decimal" />
            </td>
    </tr>
</table>

My current web.xml is:

<?xml version="1.0" encoding="UTF-8"?>

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> Ajax2 index.html index.htm index.jsp default.html default.htm default.jsp AjaxResponseServlet AjaxResponseServlet com.example.servlets.AjaxResponseServlet AjaxResponseServlet /AjaxResponseServlet JAMES JAMES com.example.servlets.JAMES JAMES /JAMES enter code here

My servlet code is:

package com.example.servlets;

/* * Takes a character and converts it to decimal and sends back the * value in the response. */ // package com.oreilly.ajax.servlet; // causes error, so commented out

import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;

public class AjaxResponseServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest req, HttpServletResponse res)
        throws ServletException, IOException {

    String key = req.getParameter("key");
    if (key != null) {
        // extract the first character from key
        int keyInt = key.charAt(0);
        String decimalString = Integer.toString(keyInt); 
        // setup the response
        res.setContentType("text/xml");
        res.setHeader("Cache-Control", "no-cache");
        // write out the response string
        res.getWriter().write(decimalString);
    }
    else {
        // If key comes back as a null, return a question mark.
        res.setContentType("text/xml");
        res.setHeader("Cache-Control", "no-cache");
        res.getWriter().write("?");
    }
}

}

A: 

The answer to the question is that the DOM exception 11 error occurred when the ajax command was sent to an improper location with the req.open command. This happenned because the servlet was in the root directory of the eclipse created tomcat instance. When the ConvertToDecimal function's req.open("Get",url,true); call value for url was changed to remove the prefixed/character, all worked. The url variable was changed to:var url = "AjaxResponseServlet?key=" + escape(key.value); Alternatively, the url variable also works with:var url = "/Ajax2/AjaxResponseServlet?key=" + escape(key.value); The web.xml file was not changed at all from its current value for servlet-mapping of: AjaxResponseServlet /AjaxResponseServlet `

Note, also, when you get an error on your browser on line 1, column 1 and you are doing ajax communication, very well could be a response not being handled that is not an html file.

Don