Hide
Writing an article is easy - try our reStructured Text demo Join Siafoo Now or Learn More

Basic Ajax HTML Page using Mochikit Atom Feed 0

In Brief A basic entry fields which get submitted via Ajax. The response is displayed in a div at the bottom of the page.
# 's
 1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
5 <title>Ajax Test Page</title>
6 <script src="MochiKit/MochiKit.js"></script>
7 <style type="text/css">
8 .header {background-color: orange; font-weight: bold;}
9 .label {background-color: #00CCFF; font-weight: bold}
10 #results {background-color: LightGrey }
11 </style>
12</head>
13<body>
14 <span class="header">This page allows for testing of the ./blah servlet.</span><p/>
15 <table>
16 <tr>
17 <td class="label">param 1</td>
18 <td>
19 <input id="param1" type="text" value="value1" size="30" />
20 </td>
21 </tr>
22 <tr>
23 <td class="label">param 2</td>
24 <td>
25 <input id="param2" type="text" value="value2" size="10" maxlength="10"/>
26 </td>
27 </tr>
28 <tr>
29 <td class="label">param 3</td>
30 <td>
31 <input id="param3" type="text" value="value3" size="6"/>
32 </td>
33 </tr>
34 <tr>
35 <td class="label">param 4</td>
36 <td>
37 <input id="param4" type="text" size="45"/>
38 </td>
39 </tr>
40 </table><p/>
41 <input id="button" type="button" value="Send" /><p/>
42
43 <div id="results"/>
44
45 <script type="text/javascript">
46 var successCallback = function(result){
47 var html = result.responseText;
48
49 //remove everything before and including the beginning body tag
50 var index = html.indexOf("<body");
51 index = html.indexOf(">", index);
52 html = html.substring(index+1);
53
54 //remove everything after and including the ending body tag
55 index = html.indexOf("</body>");
56 html = html.substring(0, index);
57
58 //insert HTML into page
59 $('results').innerHTML = html;
60 };
61
62 var errorCallback = function(err){
63 $('results').innerHTML = err.number+"<p/>"+err.message;
64 };
65
66 /* Use this if you want to specify the request parameters in the url string
67 function appendValue(key, valueId){
68 var value = $(valueId).value;
69 if (value.length > 1){
70 return '&' + key + '=' + escape(value);
71 }
72 return '';
73 }*/
74
75 //Returns an object containing the request parameters
76 function createParamsObject(){
77 var params = {};
78 params.ServerAddress = $('param1').value;
79 params.MobilePhoneNumber = $('param2').value;
80 params.SiteCode = $('param3').value;
81 params.GpsDisclaimer = $('param4').value;
82
83 return params;
84 }
85
86 var buttonClickHandler = function(evt){
87 $('results').innerHTML = "";
88 //var url = "./blah?"+appendValue('Param1', 'param1')+appendValue('Param2', 'param2')+appendValue('Param3', 'param3')+appendValue('Param4', 'param4');
89 var url = "./blah";
90 var d = doSimpleXMLHttpRequest(url, createParamsObject());
91 d.addCallbacks(successCallback, errorCallback);
92 };
93
94 connect("button", "onclick", buttonClickHandler);
95 </script>
96</body>
97</html>

A basic entry fields which get submitted via Ajax. The response is displayed in a div at the bottom of the page.