Nov 18 In-Class Exercise Thread .
Please post your solutions to the Nov 18 In-Class Exercise to this thread.
Best,
Chris
<nowiki> tester.html <!DOCTYPE html> <head> <title>Tester</title> </head> <body> <div id="dummy1"> </div> <div id="dummy2"> </div> <div id="yahoo"> </div> <script> request1 = new XMLHttpRequest(); request1.onreadystatechange = function() { switch(request1.readyState) { case 4: document.getElementById("dummy1").innerHTML = request1.responseText; break; } } request1.open("GET", "dummy1.html", true); request1.send();
request2 = new XMLHttpRequest(); request2.onreadystatechange = function() { switch(request2.readyState) { case 4: document.getElementById("dummy2").innerHTML = request2.responseText; break; } } request2.open("GET", "dummy2.html", true); request2.send();
request3 = new XMLHttpRequest(); request3.onreadystatechange = function() { switch(request3.readyState) { case 4: document.getElementById("yahoo").innerHTML = request3.responseText; break; } } request3.open("GET", "www.yahoo.com", true); request3.send(); </script> </body> </html>
dummy1.html <p>Hello World</p>
dummy2.html
<script>
document.write("<p>Hello World</p>");
</script>
</nowiki>
<!DOCTYPE html> <html> <head> </head> <body>
<div id="dummy1"></div> <div id="dummy2"></div> <div id="yahoo"></div>
<script> request = new XMLHttpRequest(); request.onreadystatechange = function() { switch(request.readyState) { case 4: document.getElementById("dummy1").innerHTML = request.responseText; break; } } request.open("GET", "./dummy1.html", true); request.send(); request = new XMLHttpRequest(); request.onreadystatechange = function() { switch(request.readyState) { case 4: document.getElementById("dummy2").innerHTML = request.responseText; break; } } request.open("GET", "./dummy2.html", true); request.send();
request = new XMLHttpRequest();
request.onreadystatechange = function()
{
switch(request.readyState) {
case 4:
document.getElementById("yahoo").innerHTML = request.responseText;
break;
}
}
request.open("GET", "https://www.yahoo.com", true);
request.send();</script>
</body> </html>
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>Hello world</p> </body> </html>
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>dummy2</title> </head> <body> <script> document.write(("<p>Hello World</p>")); </script> </body> </html>
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>tester</title> </head> <body> <p>This is what we get 1...</p> <div id="demo1"> </div> <p>This is what we get 2...</p> <div id="demo2"> </div> <p>This is what we from root...</p> <div id="demo2"> </div> <script> var request1 = new XMLHttpRequest(); request1.onreadystatechange = function() { if(request1.readyState == 4) { document.getElementById("demo1").innerHTML = this.responseText; } }; request1.open("GET", "dummy1.html", true); request1.send(); var request2 = new XMLHttpRequest(); request2.onreadystatechange = function() { if(request2.readyState == 4) { document.getElementById("demo2").innerHTML = this.responseText; } }; request2.open("GET", "dummy1.html", true); request2.send(); var request3 = new XMLHttpRequest(); request3.onreadystatechange = function() { if(request3.readyState == 4) { document.getElementById("demo3").innerHTML = this.responseText; } }; request3.open("GET", "https://www.google.com", true); request3.send(); </script> </body> </html>
This is what we get 1...
Hello world
This is what we get 2...
Hello world
This is what we from root...
(Edited: 2020-11-18)<pre> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tester</title> </head> <body> <div id="dummy1">
</div>
<div id="dummy2">
</div>
<div id="yahoo">
</div>
</body>
</html>
<script>
request1 = new XMLHttpRequest();
request1.onreadystatechange = function()
{
switch(request1.readyState){
case 4:
document.getElementById("dummy1").innerHTML = request1.responseText;
break;
}
}
request1.open("GET", "dummy1.html", true);
request1.send();
request2 = new XMLHttpRequest();
request2.onreadystatechange = function()
{
switch(request2.readyState){
case 4:
document.getElementById("dummy2").innerHTML = request2.responseText;
break;
}
}
request2.open("GET", "dummy2.html", true);
request2.send();
request3 = new XMLHttpRequest();
request3.onreadystatechange = function()
{
switch(request3.readyState){
case 4:
document.getElementById("yahoo").innerHTML = request3.responseText;
break;
}
}
request3.open("GET", "https://www.yahoo.com", true);
request3.send();</script>Only Hello World from dummy1.html shows up <pre>
(Edited: 2020-11-18)
<html> <body>
<div id="Dummy1"></div> <div id='Dummy2'></div> <div id='yahoo'></div>
<script>
function loadDoc() { var arr = ['dummy1', 'dummy2', 'dummy2']; var xhttp = new XMLHttpRequest(); for (let i = 0; i < 2; i++) { xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementByTagName(arr[i]).innerHTML = this.responseText; } }; xhttp.open("GET", arr[i]+ ".html", true); xhttp.send(); } }
</script>
</body> </html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tester</title>
</head>
<body>
<div id="dummy1"></div>
<div id="dummy2"></div>
<div id="yahoo"></div>
<script>
request1 = new XMLHttpRequest();
request2 = new XMLHttpRequest();
request3 = new XMLHttpRequest();
request1.onreadystatechange = function ()
{
switch(request1.readyState)
{
case 4:
document.getElementById("dummy1").innerHTML = request1.responseText;
break;
}
}
request2.onreadystatechange = function ()
{
switch(request2.readyState)
{
case 4:
document.getElementById("dummy2").innerHTML = request2.responseText;
break;
}
}
request3.onreadystatechange = function ()
{
switch(request3.readyState)
{
case 4:
document.getElementById("yahoo").innerHTML = request3.responseText;
break;
}
}
request1.open("GET", "dummy1.html", true);
request1.send();
request2.open("GET", "dummy2.html", true);
request2.send(); // dummy2 does not write anything to the page, javascript won't be executed
request3.open("GET", "www.yahoo.com", true);
request3.send(); // third party sites cannot be accessed
</script>
</body>
</html>
<div id = "dummy1"></div> <div id = "dummy2"></div> <div id = "yahoo"></div>
<script type="text/javascript"> request = new XMLHttpRequest(); request.open("GET", "dummy1.html", true); request.onreadystatechange = function() { switch(request.readyState) { case 4: document.getElementById("dummy1").innerHTML = request.responseText; break; } } request.send();
request2 = new XMLHttpRequest(); request2.open("GET", "dummy2.html", true); request2.onreadystatechange = function() { switch(request2.readyState) { case 4: document.getElementById("dummy2").innerHTML = request2.responseText; break; } } request2.send();
request3 = new XMLHttpRequest(); request3.open("GET", "www.yahoo.com", true); request3.onreadystatechange = function() { switch(request3.readyState) { case 4: document.getElementById("yahoo").innerHTML = request3.responseText; break; } } request3.send(); </script>
My code looks correct, but I don't get any output. My console says that the connection has been denied due to "CORS policy" for all three requests.
<!DOCTYPE html> <html> <head> </head>
<body> <div id="dummy1"></div> <div id="dummy2"></div> <div id="yahoo"></div> <script> function get(URL, recive) { let xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState === XMLHttpRequest.DONE) { recive(this.response) } } xhttp.open("GET", URL, true); xhttp.send(); }
get("http://127.0.0.1/dummy1.html",(data)=>{ document.getElementById("dummy1").innerHTML = data; })
get("http://127.0.0.1/dummy2.html",(data)=>{ document.getElementById("dummy2").innerHTML = data; })
get("https://www.yahoo.com/",(data)=>{ document.getElementById("yahoo").innerHTML = data; })
</script> </body> </html>
(Edited: 2020-11-18)