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
|
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
|
-
+
-
+
-
-
+
+
-
+
-
-
-
-
+
+
+
+
-
+
-
+
-
-
-
+
+
+
-
+
-
+
|
# This script demonstrates how to send form data from the client browser
# back up to the server using an XMLHttpRequest with
# application/x-www-form-urlencoded content.
#
package require wapp
package require w3
# The default page paints a form to be submitted.
# The default content-security-policy of Wapp restricts the use
# The default content-security-policy of W3 restricts the use
# of in-line javascript, so the script content must be returned by
# a separate resource.
#
proc wapp-default {} {
wapp-trim {
proc w3-default {} {
w3-trim {
<h1>Example Of Sending application/x-www-form-urlencoded Using AJAX</h1>
<form id="nameForm">
<table border="0">
<tr><td align="right"><label for="firstName">First name:</label> </td>
<td><input type="text" id="firstName" width="20">
<tr><td align="right"><label for="lastName">Last name:</label> </td>
<td><input type="text" id="lastName" width="20">
<tr><td align="right"><label for="age">Age:</label> </td>
<td><input type="text" id="age" width="6">
<tr><td><td><input type="submit" value="Send">
</table>
</form>
<script src='%url([wapp-param SCRIPT_NAME]/script.js)'></script>
<script src='%url([w3-param SCRIPT_NAME]/script.js)'></script>
}
}
# This is the javascript that takes control of the form and causes form
# submissions to be send using XMLHttpRequest with urlencoded content.
#
proc wapp-page-script.js {} {
wapp-mimetype text/javascript
wapp-cache-control max-age=3600
wapp-trim {
proc w3-page-script.js {} {
w3-mimetype text/javascript
w3-cache-control max-age=3600
w3-trim {
document.getElementById("nameForm").onsubmit = function(){
function val(id){
return encodeURIComponent(document.getElementById(id).value)
}
var jx = "firstname="+val("firstName")+
"&lastname="+val("lastName")+
"&age="+val("age");
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "%string([wapp-param SCRIPT_NAME])/acceptajax", true);
xhttp.open("POST", "%string([w3-param SCRIPT_NAME])/acceptajax", true);
xhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhttp.send(jx);
return false
}
}
}
# This page accepts a form submission and prints it on standard output.
# A real server would do something useful with the data.
#
proc wapp-page-acceptajax {} {
proc w3-page-acceptajax {} {
puts "Accept Callback"
puts "mimetype: [list [wapp-param CONTENT_TYPE]]"
puts "content: [list [wapp-param CONTENT]]"
foreach var [lsort [wapp-param-list]] {
puts "mimetype: [list [w3-param CONTENT_TYPE]]"
puts "content: [list [w3-param CONTENT]]"
foreach var [lsort [w3-param-list]] {
if {![regexp {^[a-z]} $var]} continue
puts "$var = [list [wapp-param $var]]"
puts "$var = [list [w3-param $var]]"
}
}
wapp-start $argv
w3-start $argv
|