yesoda
/
JSON-Lab-2
派生自 Cohort4.2/JSON-Lab-2


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="./css/style.css" type="text/css" rel="stylesheet">
    <title>Import Local JSON Data | Zipcode Wilmington</title>
</head>
<body>

    <header class="main-header group">
        <div class="title"><h1>Zipcode Wilmington<br>Javascript Lab - Fall 2015</h1></div>
        <div class="lesson-link"><img src="./images/logos/js_logo.png" alt="Javascript"/></div>
        <div class="zip-link"><img src="./images/logos/zip_logo.jpg" alt="Zipcode Wilmington"/></div>
    </header>

    <article>
        <h1>Instructions</h1>
        <p>Us the <code>XMLHttpRequest()</code> to receive the remote json feed from the following website<br>
        https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD
        </p>

        <p>The json feed list movies made in San Francisco</p>

        <p>Write the following info for each movie to the webpage:
            <ul>
                <li>movie title</li>
                <li>release year</li>
                <li>production company</li>
            </ul>
        </p>

        <p>Only list movies that were made at the Golden Gate Bridge</p>

        <p>Use <code>document.getElementById('result').innerHTML += <i>your_output</i>;</code> to write the movie's info to the page.</p>
        <p>Append <code>"&ltbr&gt"</code> to output code to create a new line</p>
        <button id="save" onclick=fun() >
        </button>
    </article>

    <section>
    	<h1>Movie Information</h1>
    	<div id="result">
            </div>
            </section>

</body>
<script type=" text/javascript">

var httpClient=function(){
  var movies;
  //this.get=function(eUrl,eCallback);{
  //var onHttpRequest=new XMLHttpRequest({mozSystem: true});
  var onHttpRequest=new XMLHttpRequest();
  onHttpRequest.onreadystatechange=function(){
  if(onHttpRequest.readyState==4 &&onHttpRequest.status ==200)
  {

    movies=JSON.parse(onHttpRequest.responseText);
    for(var i=0;i<movies.data.length;i++){
      var movie=movies.data[i];
      if(movie[10] == "Golden Gate Bridge"){
      //  document.getElementById('result').innerHTML +=(movie[8]+ " "+movie[9]+" "+movie[12])  + "<br>";
      document.getElementById('result').innerHTML +=(movie[8] + " " + movie[9] + " " + movie[12]) + "<br>";
      }
    }
  }
  // onHttpRequest.open('GET',eUrl,true);
  // onHttpRequest.send();
}

var  theurl='https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD';
// var client=new HttpClient();
// client.get(theurl,function(response) ){
//   var response1=JSON.parse(response);
// });
onHttpRequest.open("GET",theurl,true);
onHttpRequest.setRequestHeader("Content-Type","text/plain");
onHttpRequest.send();
return movies;
}
httpClient();
</script>

</html>