Solved

json example

Posted on 2016-09-23
39
115 Views
Last Modified: 2016-10-17
Hi,

I am trying below example

http://www.w3schools.com/json/json_http.asp

http://www.w3schools.com/json/tryit.asp?filename=tryjson_function

when i change
<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window



above to below

<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id02").innerHTML = out;
}
</script>

</body>
</html>

Open in new window

I wonder why no output is coming.

i basically changed
  document.getElementById("id01").innerHTML = out;
to
  document.getElementById("id02").innerHTML = out;



4: Read the text file with an XMLHttpRequest

Write an XMLHttpRequest to read the text file, and use myFunction() to display the array:

XMLHttpRequest
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    myFunction(myArr);
    }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();
please advise

what is meaning of below line?

xmlhttp.onreadystatechange = function()

how putting in a .txt file example as above different from putting in a .js file example as below.

http://www.w3schools.com/json/json_files.asp

to me both looks same? please advise
0
Comment
Question by:gudii9
  • 17
  • 11
  • 11
39 Comments
 
LVL 32

Expert Comment

by:Big Monty
ID: 41813038
line 5 is still

<div id="id01"></div>

was that a typo or something more?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41813040
to answer your question:

xmlhttp.onreadystatechange = function() just means when you've made a connection back to the server and you're ready to receive back data
0
 
LVL 7

Author Comment

by:gudii9
ID: 41813340
Run »
Result Size: 668 x 489
<!DOCTYPE html>
<html>
<body>

<div id="id02"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id02").innerHTML = out;
}
</script>

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<div id="id02"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id02").innerHTML = out;
}
</script>

</body>
</html>


 

Open in new window


when i change line 5 also as id02 then it worked as above and gave same below output
JavaScript Tutorial
HTML Tutorial
CSS Tutorial


so line 5 just defines div tag id which we are using in line 31?

what is the use of DIV element here?
please advise
0
 
LVL 7

Author Comment

by:gudii9
ID: 41813342
[quote]<div id="id01"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);
[/quote]

Open in new window



what is meaning of below code

<div id="id01"></div>
<script>
var myArray = [

Open in new window

are we saying div element id01 has the script that consist of myArray json array with 3 objects of display with links??
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41813843
what is the use of DIV element here?

id02 is the DIV where the output goes
0
 
LVL 7

Author Comment

by:gudii9
ID: 41813872
id02 is the DIV where the output goes

how it goes to id02 DIV where we are telling it to go?

is it here?

 document.getElementById("id02").innerHTML = out;
}
</script>
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41816620
greetings gudii9, , I will comment here, you are just learning how to use javascript, and the javascript DOM function-method of getElementById( ) is a very very Necessary function to use and understand !
as you can see the w3schools tutorial page for DOM methods at -
         http://www.w3schools.com/js/js_htmldom_methods.asp

here is some Page code that uses the getElementById( ) to change FOUR DOM elements on the HTML page -
<!DOCTYPE html>
<html>
<body>
First div<br>
<div id="div01">First Div Output</div>
Second div<br>
<div id="div02">Second Div Output</div>
First paragraf<br>
<p id="p01">First P Output</p>
<script>

document.getElementById("div01").innerHTML = '<p style="background: #ccf;">This id TOP DIV ad ID -<br>div01<br>with changed Content by Javascript <span id ="span01">?</span></p>';

// above code changes the First <div> content by the element ID "div01"

document.getElementById("span01").innerHTML = "<br>New Span Content, added by Javascript!";
document.getElementById("span01").style.fontSize = "143%";
// above code changes the  <span> content by the element ID "span01"

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    for(var i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("div02").style.backgroundColor = "#fcc";
    document.getElementById("div02").innerHTML = out;
}
// above code changes the Second <div> content by the element ID "div02"

document.getElementById("p01").style.border = "1px solid #0b0";
document.getElementById("p01").innerHTML = 'This is the NEW Javascript CHANGED Content for the P element';
// above code changes the first paragraph <p> content by the element ID "p01"
</script>

</body>
</html>

Open in new window


If you are learning Javascript, it is usually better to use a function-method like  document.getElementById( ) on several Different elements in some different ways ( innerHTML, style ) to see how and why it works.

ALSO, the use of the javascript  AJAX   -
    new XMLHttpRequest();
is a MUCH MORE complicated set of operations involving Browser and Server code and operations, this XMLHttpRequest();  if really NOT for javascript beginners, who try and do "copy and Paste" code, without understanding the complex set of operations needed to do javascript AJAX exchanges with success in browser "AJAX interface" display.
0
 
LVL 7

Author Comment

by:gudii9
ID: 41826497
Here is the actual link making backend function call for data

http://www.w3schools.com/js/js_json_http.asp
0
 
LVL 7

Author Comment

by:gudii9
ID: 41826516
onreadystatechange

is readystatechange of server ie webserver? is it like tomcat here? where is server located?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41826526
yes, it is referring to the web server.
0
 
LVL 7

Author Comment

by:gudii9
ID: 41826566
i do not have webserver on my local machine still below code ran fine. How it ran?
<!DOCTYPE html>
<html>
<body>
First div<br>
<div id="div01">First Div Output</div>
Second div<br>
<div id="div02">Second Div Output</div>
First paragraf<br>
<p id="p01">First P Output</p>
<script>

document.getElementById("div01").innerHTML = '<p style="background: #ccf;">This id TOP DIV ad ID -

<br>div01<br>with changed Content by Javascript <span id ="span01">?</span></p>';

// above code changes the First <div> content by the element ID "div01"

document.getElementById("span01").innerHTML = "<br>New Span Content, added by Javascript!";
document.getElementById("span01").style.fontSize = "143%";
// above code changes the  <span> content by the element ID "span01"

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    for(var i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("div02").style.backgroundColor = "#fcc";
    document.getElementById("div02").innerHTML = out;
}
// above code changes the Second <div> content by the element ID "div02"

document.getElementById("p01").style.border = "1px solid #0b0";
document.getElementById("p01").innerHTML = 'This is the NEW Javascript CHANGED Content for the P element';
// above code changes the first paragraph <p> content by the element ID "p01"
</script>

</body>
</html>

Open in new window

0
 
LVL 7

Author Comment

by:gudii9
ID: 41826569
document.getElementById

is more like
System.out.println in the java language?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41826580
it wouldn't :)

my guess is that you have IIS installed and are running the site through there.

document.getElementById

is more like
System.out.println in the java language

no, document.getElementById gets a reference to any control within the DOM (or page, to simplify things). if you wanted to get a reference to a field in your form that had an ID of "email" you would do:

var myEmailVariable = document.getElementById('email')

and if you wanted to see the value, you would do:

alert( myEmailVariable.value );
0
 
LVL 7

Author Comment

by:gudii9
ID: 41826602
<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window


in above example where are they calling the function with myarr(the array with urls and display) as argument so that it outputs to the text file?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41826617
this line send a request to the server, specifically to the text file defined in the url file
xmlhttp.open("GET", url, true);

this line waits for a successful connection AS WELL AS a response back from the server. In this case, the response is the opening of the text file
if (this.readyState == 4 && this.status == 200) {

this line parses the json response and puts that into a variable (it's an array object).
var myArr = JSON.parse(this.responseText);

this line goes through the array and outputs the data
myFunction(myArr);
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41826631
? ? ? The Page code I posted that you ran comment  ID: 41826566  above is NOT using any AJAX, to use AJAX you must call this -
     new XMLHttpRequest();


which I did NOT do. Because, you are just learning javascript, and the complicated operations of the XMLHttpRequest() will require you to know much more about javascript than you now know.

In that page script, I was just trying to get you to USE the -
        document.getElementById("id");
to show you HOW that  getElementById( ) could be used on a page with javascript. I had hoped that you would CHANGE that page and add a <div> or a paragraph <p> with a different ID -
       <div id="newDiv">

and then place your own javascript code in the page to access that <div> with the -
      getElementById( )
and then change the "Content" inside that <div> with the -
      .innerHTML  
property

In javascript you must know how and why to use the   getElementById( )  before you can try the more advanced and difficult  XMLHttpRequest()
0
 
LVL 7

Author Comment

by:gudii9
ID: 41826633
where they are telling program to output data to
myTutorials.txt??
where would be its location of creation on my local windows laptop.
Lets say i have that file running at below path

C:\testFolder\test.html
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41826719
if you use this as the web location (localhost in your case) of the AJAX conection -
        var url = "myTutorials.txt";

then place this text -
[
  {
  "display": "JavaScript Tutorial",
  "url": "http://www.w3schools.com/js/default.asp"
  },
  {
  "display": "HTML Tutorial",
  "url": "http://www.w3schools.com/html/default.asp"
  },
  {
  "display": "CSS Tutorial",
  "url": "http://www.w3schools.com/css/default.asp"
  }
]

Open in new window

into a plain text file named  -
       myTutorials.txt


and then place that text file in the same folder that you have the html file with the code you have presented here, with the -
       new XMLHttpRequest();

javascript in it.

if you are learning about the AJAX and the XMLHttpRequest()   you should start with an XMLHttpRequest()  that does NOT use any JSON, then when you learn more about the new XMLHttpRequest() , you can change it to do more complex display using the JSON
0
 
LVL 7

Author Comment

by:gudii9
ID: 41826767
if you use this as the web location (localhost in your case) of the AJAX conection -
        var url = "myTutorials.txt";

then place this text

i though program creates that text file and outputs those display , curls into it?
please advise
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 7

Author Comment

by:gudii9
ID: 41826775
C:\testFolder\test.html


<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window

i put muTutorials.txt in same above folder with below content
[
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

Open in new window


when i open the .html file it opens as blank page?

how i need to rename extension ot .json or .js etc instead of .html?
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41826779
You as k -
      "i though program creates that text file"

The answer is NO , it does not create any file for any reason at any time. The text file "myTutorials.txt"  is NOT created by the  XMLHttpRequest()    javascript code, , as far as I know the XMLHttpRequest()  can NOT create a "FILE" anywhere. As I said you may need to learn more about javascript and the AJAX operations that are used for the  XMLHttpRequest()    to know what to do and how to do it in javascript
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41826791
you get a BLANK page because you use such a blank TEXT display, all you have is an empty <div> as -
     <div id="id01"></div>

which will show Nothing , a blank page, unless javascript writes to the page

In the AJAX processes you need to have some form of ERROR CONTROL, so you can see if something does not work, ,

you might change the onreadystatechange   to -

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
    else {
    alert("AJAX return ERROR: as status - "+this.status);
    }
};

Open in new window


be sure to check the spelling for the text file as -
         myTutorials.txt
0
 
LVL 7

Author Comment

by:gudii9
ID: 41832525
<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window


above test.html is not working. just shows blank page? i wonder why?

<!DOCTYPE html>
<html>
<body>
First div<br>
<div id="div01">First Div Output</div>
Second div<br>
<div id="div02">Second Div Output</div>
First paragraf<br>
<p id="p01">First P Output</p>
<script>

document.getElementById("div01").innerHTML = '<p style="background: #ccf;">This id TOP DIV ad ID -<br>div01<br>with changed Content by Javascript <span id ="span01">?</span></p>';

// above code changes the First <div> content by the element ID "div01"

document.getElementById("span01").innerHTML = "<br>New Span Content, added by Javascript!";
document.getElementById("span01").style.fontSize = "143%";
// above code changes the  <span> content by the element ID "span01"

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    for(var i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("div02").style.backgroundColor = "#fcc";
    document.getElementById("div02").innerHTML = out;
}
// above code changes the Second <div> content by the element ID "div02"

document.getElementById("p01").style.border = "1px solid #0b0";
document.getElementById("p01").innerHTML = 'This is the NEW Javascript CHANGED Content for the P element';
// above code changes the first paragraph <p> content by the element ID "p01"
</script>

</body>
</html>

Open in new window


above works fine with 3 links and all of them are leading to correct pages
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41832681
? ? ?
I am trying to help you with this, but in your last comment you have just RE POSTED the same exact code that you have posted BEFORE, no changes at all. . You did not do anything but copy and paste the SAME code, , and you say you got the exact SAME results (one seems to work ,and one seems not to work) that you said in comments you have here before, same code and results. You need to CHANGE this code, by your own understandings of the javascript operations, you can not learn anything by just doing the "COPY and PASTE", without trying to find out what the javascript functions and elements are doing. and how you can change them to have different page display and results.

If you have questions about what the javascript variables, functions, arrays, objects, and methods are for, or what they do or how to change them , then ask questions about that, ask about what you do not understand/ I do not know that to say here you help you, if all you do is paste code.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41834092
Just some information about the javascript  XMLHttpRequest()  object, , it is likely that this XMLHttpRequest() will NOT work on the browser computer file system, the "localhost" as you term it. The XMLHttpRequest() operations usually REQUIRE that the XMLHttpRequest()  .send( ) method is to a URL HTTP server address, in the SAME domain name that the html file has come from. So it is likely that this will not work UNTIL you have a remote WEB SERVER with your test.html   file and the myTutorials.txt  file On that server file system, and you use the remote server for all XMLHttpRequest() transfers.
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41834113
If the OP is accessing the page like

localhost/index. asp

Then it'll work fine as long it's in the same domain (web root). If index. asp is being opened through the file system it will not work. It doesn't matter if it's a remote web server or local one, as long as the relative format is used it'll work
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41834128
@big monty, , in javascript on a windows OS this does NOT work -
    ajax2.open("GET", "localhost/myTutorials.txt", true);

this is in the browser, not in a system console? ?

Although on windows you can set up a local "LAMP" server arrangement, and or a windows server bridge, , but that's not part of this question?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41834138
Works fine for me... You can even simplify it to

    ajax2.open("GET", "myTutorials.txt", true);
0
 
LVL 7

Author Comment

by:gudii9
ID: 41834141
can you post code of the full file?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41834615
If you're using iis,  what you have should work...

What's the exact URL you see when  you open open your browser? This'll tell us if you're using iis or opening it directly from the file explorer
0
 
LVL 7

Author Comment

by:gudii9
ID: 41834627
If you're using iis,  what you have should work...

What's the exact URL you see when  you open open your browser? This'll tell us if you're using iis or opening it directly from the file explorer

i am saving those files as .html files like test.html on my desktop. Then right click on the file and open with chrome etc browser or double click on them to open in default browser
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 41834639
Ok so you're NOT using a web server, so as Slick mentioned earlier, this won't work. You need to set up IIS on your system, assuming you're running Windows, all you should need to do is do Add/Remove options and select it there. A quick Google search will explain it in more details.

Once you have IIS installed it should work
0
 
LVL 7

Author Comment

by:gudii9
ID: 41834645
what is IIS. I am a java developer. no clue what is IIS
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 250 total points
ID: 41834650
Internet Information Services (IJS)  iis the windows version of apache. In other words it's a web server that runs .asp pages.

For more general info: https://www.iis.net/overview

To install: https://msdn.microsoft.com/en-us/library/ms181052(v=vs.80).aspx
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41834689
@gudii9
I have told you before that u are doing things in code work that you do not have the knowledge or experience for. If you are a JAVA developer,  than get a REMOTE SERVER HOST that is a JAVA, with Tomcat LAMP, and then to the extreamly simple  XMLHttpRequest()  example that you gave as a LEARNING code here -
      http://www.w3schools.com/js/js_json_http.asp
using a remote server. The  XMLHttpRequest() is ONLY used for dynamic returns (usually from a database) for PAGE user interactive activities. You are just going around in circles, with your comments here. Please ask about What you are trying to LEARN here, you seem to know little about javascript, and installing a IIS on your machine will probably not teach you what you need to learn. So I ask you now.



WHAT DO YOU NEED TO LEARN? ? ?
0
 
LVL 7

Author Comment

by:gudii9
ID: 41837291
to run which code i need IIS and to run which code i do not need IIS.

I am trying to learn JSON and see why the examples on json from w3school not running with minor tweaks. please advise
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 250 total points
ID: 41837720
To the first question,  javascript that does NOT use external connections, will work on a browser. the code in your  -
<!DOCTYPE html>
<html>
<body>

<div id="id01">NO JSON</div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window

WILL WORK, so will most every other javascript.

BUT in javascript any external connections like AJAX XMLHttpRequest() or the newer WebSocket( )  WILL NOT WORK in a browser, because the XMLHttpRequest() requests a connection to the ajax URL which does not exist in a "File System" environment. So to have ANY javascript with the XMLHttpRequest() you MUST get a windows operating system server "SET UP" to handle web connection request that are use in the XMLHttpRequest() operation.

 = = = = = = = = = = = = = = = = =

If you are trying to learn JavaScript Object Notation JSON, then you should be creating Arrays and Objects in javascript using the symbols for JSON containers, for arrays [ ] , , , , , and for objects { } . . . .

Like this -
var nameARRAY = ["gudii9" , "Slick812" , "Big Monty" , "Expert"];

var colorOBJECT = {blue : "#0000FF" , green : "#00FF00" , red : "#FF0000"}

Open in new window


here are some pages that can show you how to use JSON in javascript -
      http://www.tutorialspoint.com/json/
      https://www.developphp.com/video/JavaScript/JSON-Tutorial-for-Beginners-Learn-How-to-Program
0
 
LVL 7

Author Comment

by:gudii9
ID: 41847464
BUT in javascript any external connections like AJAX XMLHttpRequest() or the newer WebSocket( )  WILL NOT WORK in a browser, because the XMLHttpRequest() requests a connection to the ajax URL which does not exist in a "File System" environment. So to have ANY javascript with the XMLHttpRequest() you MUST get a windows operating system server "SET UP" to handle web connection request that are use in the XMLHttpRequest() operation.

any good end to end examples, links on this?(prefrably using java web servers like tomcat etc rather than .Net engines(actually either is fine)
0
 
LVL 33

Expert Comment

by:Slick812
ID: 41847556
@gudii9 , , , I have never done a JAVA  Apache Tomcat as a local server on a windows machine. I have done a LAMP (for PHP) as a local server on a windows machine. You may should ask this question in the experts exchange category of JAVA, to have people that have actually done this , Apache Tomcat as a local server , to help you with suggestions.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to implement Singleton Design Pattern in Java.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now