-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
208 lines (175 loc) · 8.04 KB
/
index.html
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AjaxTap Development</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
</head>
<body>
<div class="alert" style="background: #6d00d7; color: #fff; border-radius: 6px; padding: 15px;"></div>
<input type="hidden" id="secret" value="Scraped Data">
<div id="test2"></div>
<div id="test3"></div>
<fieldset>
<p>Last Request</p>
<table>
<tr>
<th>Number</th>
<th>Parity</th>
</tr>
<tr>
<td id="lastNumber">none</td>
<td id="lastParity">none</td>
</tr>
</table>
<button id="button1">Perform an Ajax request that returns JSON</button>
<p>This button should update the last number and parity fields above.</p>
</fieldset>
<fieldset>
<button id="button2">An Ajax request that doesn't matter</button>
<p>This button will check if any conditions are met. They won't be. So nothing will happen.</p>
<p>We update a message up top so you know that nothing happened.</p>
</fieldset>
<fieldset>
<button id="button3">An Ajax request that returns HTML</button>
<p>The conditions will be met on this event, and the message up top will update and let you know that you hit an HTML endpoint.</p>
<p>The fire event searches the HTMLDocument and finds a hidden text input called "#secret" and places the value under that message.</p>
</fieldset>
<button id="button4">An Ajax request that returns XML</button>
<button id="button5">An Ajax request that returns Text</button>
<button id="button6">An Ajax request to a trusted API call</button>
<button id="button7">An Ajax request with no content returned</button>
<button id="button8">A fetch request is made</button>
<button id="button9">A fetch request that should return a message to the purple alert.</button>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><!-- for easy testing with ajax -->
<script src="/src/AjaxTap.js"></script>
<script>
(function() {
new AjaxTap()
.addResponseEvent({
trustedMessengers: [ "https://mocki.io", "http://localhost:3003" ],
conditions: function(data) {
if (data.message != null) {
return true;
}
return false;
},
fire: function(data) {
let alert = document.querySelector(".alert");
alert.innerHTML = `<div style="padding: 10px 15px;">${data.message}</div>`;
}
})
.addResponseEvent({
trustedMessengers: [ "http://localhost:3000" ],
conditions: function(data) {
if (data.number != null) {
if (!isNaN(parseInt(data.number))) {
return true;
}
}
return false;
},
fire: function(data) {
let lastNumber = document.querySelector("#lastNumber");
let lastParity = document.querySelector("#lastParity");
lastNumber.innerHTML = data.number;
lastParity.innerHTML = data.parity;
}
})
.addResponseEvent({
conditions: function(data) {
if (data.constructor.name == "HTMLDocument") {
console.log("Found secret in html: " + data.querySelector("#secret"))
return (data.querySelector("#secret") != null);
}
return false;
},
fire: function(data) {
$("#test3").html(data.querySelector("#secret").value);
}
})
.listen();
$("#button1").on("click", function() {
var r = Math.ceil( Math.random() * 2 );
$.get("http://localhost:3000/numbers/" + r)
.done(function() {
console.log("made a request after the user clicked the button.")
})
.fail(function() {
console.log( "error" );
});
});
$("#button2").on("click", function() {
$.get("http://localhost:3000/comments/1")
.done(function() {
$("#test2").html("Made a network request. But it wasn't important.");
})
});
$("#button3").on("click", function() {
$.get("http://localhost:3001/index.html")
.done(function() {
console.log("Added text to the page 'HTML'.");
$("#test2").html("Made a network request. It should be HTML.");
})
});
$("#button4").on("click", function() {
$.get("http://localhost:3001/test.xml")
.done(function() {
console.log("Added text to the page 'XML'.");
$("#test2").html("Made a network request. It should be XML.");
})
});
$("#button5").on("click", function() {
$.get("http://localhost:3001/test.txt")
.done(function() {
console.log("Added text to the page 'Text'.");
$("#test2").html("Made a network request. It should be text.");
})
});
$("#button6").on("click", function() {
$.get("https://mocki.io/v1/d41d398c-dbcd-492e-b779-b564369ab31d");
});
$("#button7").on("click", function() {
$.get("http://localhost:3003/nothing");
});
$("#button8").on("click", function() {
fetch('http://localhost:3001/index.html')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.text(); // Or response.json() for JSON responses
})
.then(data => {
console.log('Data received:', data);
// You can do something with the received data here
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
})
$("#button9").on("click", function() {
fetch('https://mocki.io/v1/d41d398c-dbcd-492e-b779-b564369ab31d')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
//return response.json(); // Or response.json() for JSON responses
})
.then(data => {
//console.log('Data received:', data);
// You can do something with the received data here
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
})
})();
if (window.location.href.includes("127.0.0.1")) {
alert("You are going to want to test on 'localhost', rather than '127.0.0.1'.");
}
</script>
</body>
</html>