Almost as Easy as Hello World # 3- Ajax : Ajax - html

Experts Exchange

	[x] Posted via EE Mobile
	Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.6

Almost as Easy as Hello World # 3- Ajax

Asked by gazdzid in Hypertext Markup Language (HTML), JavaScript, Asynchronous Javascript and XML (AJAX)

Tags: Ajax - html - javascript

Working with ajax I am excited because my javascript can call my server code. however the response returned is not correct as the responce is the first three chrtrs of the jave file and probably for good reason. the reason may be due to the url in the java script, which is
var url = "http://localhost:8080/kdb_eldb/cfobeldb/JavaSource/AjaxResponseServlet.java";
SomehowI believe I would need to include something like:
?key=" + escape(key.value); but not sure how.

I am developing my first ajax aplication the that makes a request to the server. The Ajax project that I am trying to work on should evaluate a keystroke and convert it to a decimal value.

The app;ication should work as follows the user types a letter the letter in the field. The letter is passed to a javascript at which point a call to the server is made and a response is given, which is the decimal value of the key stroke.

Found below in the doc is appicture of my directory and screen shot

Please let me know if you need to see the web xml.

Found below is the code to my project and screenshot of my results.

Please Help!!

View the Solution FREE for 30 Days

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:

           
           
             var req; 
  function convertToDecimal(){ 
 
    var key = document.getElementById("key"); 
    var keypressed = document.getElementById("keypressed"); 
    keypressed.value = key.value; 
 
 
var url = "http://localhost:8080/kdb_eldb/cfobeldb/JavaSource/AjaxResponseServlet.java";
 
 
   if (window.XMLHttpRequest){ 
      req = new XMLHttpRequest(); 
      //var x=1;
    } 
    else if (window.ActiveXObject){ 
      req = new ActiveXObject("Microsoft.XMLHTTP"); 
     // var x=2;
    } 
 
    alert (url)
    alert (callback)
    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; 
      } 
       alert("status is " + req.status);
      
    }
    clear();
  } 
  function clear(){ 
 
    var key = document.getElementById("key"); 
   
    key.value=""; 
  }
  function focusIn(){ 
 
    document.getElementById("key").focus();
  }
 
 
 
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="t_ajax.css">
    
	<script language="JavaScript" src="includes/ajax.js"></script>
    <title>Ajax On Java, Chapter 2 Example</title>
  </head>
  <body onload="focusIn();">
    <h1> AJAX CHARACTER DECODER </h1>
    <h2> Press a key to find its value. </h2>
      <table>
        <tr>
          <td>
            eEnter Key Here 
            <input type="text" id="key" name="key" onkeyup="convertToDecimal();">
          </td>
      </table> 
      <br />
      <table>
        <tr>
          <td colspan="5" style="border-bottom:solid black 1px;">
            Key Pressed:
            <input type="text" readonly id="keypressed">
          </td>
        </tr>
        <tr>
          <td> Decimal </td>
        </tr>
        <tr>
          <td> <input type="text" readonly id="decimal"> </td>
        </tr>
      </table>
  </body>
</html>
 
 
Server Code
 
 
/*
 * sTakes a character and converts it to decimal and sends back the 
 * value in the response.
 */
//package com.oreilly.ajax.servlet;
 //package imported_classes.JavaSource;
//package JavaSource.java;
 
 
 
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("?");
        }
    }
}

           
         

Attachments:

ajax-screenshot.doc (76 KB) (File Type Details)

AJAX Sreenshot

20091118-EE-VQP-93 - Hierarchy / EE_QW_3_20080625

Hall of Fame

1. Kravimir471,504
2. mplungjan245,461
3. jason1178154,258
4. kadaba143,932
5. hielo143,096
6. abel132,332
7. HonorGod112,728
8. cxr106,203
9. myderrick100,309
10. dachusa100,043
11. Ray_Pas...99,575
12. LZ197,931
13. b0lsc0tt92,219
14. s8web80,486
15. qwerty76,562
16. renazonse73,430
17. x_com73,050
18. fsze8872,714
19. erikTsomik72,117
20. alien10962,697
21. scrathcyboy60,734
22. MuraliKanth58,691
23. HainKurt54,900
24. therealteune54,721
25. v2Media54,655

1. hielo917,663
2. Kravimir795,091
3. mplungjan658,866
4. b0lsc0tt616,644
5. seanpow...576,367
6. scrathcyboy561,773
7. COBOLdi...554,132
8. Steggs421,008
9. jason1178411,747
10. TName363,192
11. VirusMinus315,430
12. GrandSch...306,425
13. Roonaan279,388
14. gamebits260,056
15. Zyloch259,849
16. Batalf227,032
17. Ray_Pas...218,099
18. knightEkni...203,399
19. DreamMa...189,227
20. Eternal_S...184,012
21. Zvonko177,229
22. cxr157,243
23. jessegivy151,877
24. kadaba143,932
25. dorward143,523

Almost as Easy as Hello World # 3- Ajax

Asked by gazdzid in Hypertext Markup Language (HTML), JavaScript, Asynchronous Javascript and XML (AJAX)

Tags: Ajax - html - javascript

About this solution