-
Notifications
You must be signed in to change notification settings - Fork 56
/
browser.htm
88 lines (85 loc) · 3.21 KB
/
browser.htm
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>PowerDale's Postman</title>
<style>
html, body {
height: 100%;
}
body {
background-color: beige;
display: flex;
flex-direction: column;
}
input, textarea {
font: inherit;
}
textarea {
width: 100%;
flex-grow: 1;
font-family: monospace;
}
textarea[id='response'] {
flex-grow: 2;
}
label {
font-weight: bold;
}
.ok {
color: green;
}
.err {
color: red;
}
</style>
</head>
<body>
<h1>Hello Browser user,</h1>
<p>We at PowerDale have got you covered. Just enter the request you want to send below and click the button to get the response.</p>
<label for="path">Request URL:</label>
<div><span id="host">http://www.example.com/</span><input id="path" type="text" placeholder="path/to/request" /><input type="button" value="reset" onclick="reset()" /></div>
<label for="request">Request Payload:</label>
<textarea id="request" autofocus="autofocus" placeholder="{ "message": "put your request payload here..." }"></textarea>
<div><input type="button" value="Send GET Request" onclick="send()" /><input type="button" value="Send POST Request" onclick="post()" /></div>
<p>Server returned with HTTP Status <span id="status"></span></p>
<label for="response">Response:</label>
<textarea id="response" placeholder="{ "message": "here will be your answer..." }"></textarea>
<script type="text/javascript">
function server() {
return window.location.protocol + '//' + window.location.host
}
function reset() {
document.getElementById('host').innerText = server();
document.getElementById('path').value = window.location.pathname;
}
function post() {
send(document.getElementById('request').value)
}
function respond(target, status) {
document.getElementById('status').className = (target.status === 200) ? 'ok' : 'err';
document.getElementById('status').innerText = status || (target.status + ' - ' + target.statusText);
document.getElementById('response').value = target.response;
var contentType = target.getResponseHeader('Content-Type');
if (contentType && contentType.includes('application/json')) {
var jsonResponse = JSON.parse(target.response);
var prettyJson = JSON.stringify(jsonResponse, null, 2);
document.getElementById('response').value = prettyJson;
}
}
function send(data) {
var XHR = new XMLHttpRequest();
XHR.addEventListener('load', function(event) {
respond(event.target);
});
XHR.addEventListener('error', function(event) {
respond(event.target, 'error in request');
});
XHR.open(data !== undefined ? 'POST' : 'GET', server() + document.getElementById('path').value);
XHR.setRequestHeader('Content-Type', 'application/json');
XHR.setRequestHeader('Accept', 'application/json');
XHR.send(data);
}
reset();
</script>
</body>
</html>