2020-11-17
Nov 18 In-Class Exercise Thread.
Please post your solutions to the Nov 18 In-Class Exercise to this thread.
Best,
Chris
Please post your solutions to the Nov 18 In-Class Exercise to this thread.
Best,
Chris
2020-11-18
tester.html
Tester
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();
dummy1.html
(Edited: 2020-11-18) Hello World
dummy2.html document.write("Hello World
");
<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>
((resource:Capture2.PNG|Resource Description for Capture2.PNG))
<!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>
<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) <!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...
<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) <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>
((resource:inclass.png|Resource Description for inclass.png))
<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>
<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>
<!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>
((resource:cs174.png|Resource Description for cs174.png))
<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.
<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) <!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>
(c) 2025 Yioop - PHP Search Engine