JavaScript AJAX Basics (retiring) AJAX Concepts A Simple AJAX Example

Ming Chi Wong
Ming Chi Wong
1,049 Points

Running Ajax

When I run this example in my text editor, it doesn't seem to work. I don't understand why?

Kevin Gates
Kevin Gates
14,679 Points

This video is 10 minutes long. Can you provide the code snippet you're using? Or share your workspace?

If you add code here, please use the Markdown CheatSheet.

Ming Chi Wong
Ming Chi Wong
1,049 Points

Kevin,

This is the code i'm trying to run.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <title>AJAX with JavaScript</title> <script> var xhr = new XMLHttpRequest(); xhr.open('GET', 'sidebar.html'); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { document.getElementById('ajax').innerHTML = xhr.responseText; } }; xhr.send(); </script> </head> <body> <div class="grid-container centered"> <div class="grid-100"> <div class="contained"> <div class="grid-100"> <h1>Bring on the AJAX</h1> <ul id="ajax">

      </ul>
    </div>
  </div>
</div>

</div> </body> </html>

<section> <h2>Welcome to the wonderful world of AJAX</h2> <p>This content provided to you dynamically by the XMLHTTP Request Object</p> </section>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AJAX Office Status Widget</title> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head> <body> <div class="grid-container centered"> <div class="grid-100"> <div class="contained"> <div class="grid-100"> <div class="heading"> <h1>Corporate Intranet</h1> </div> </div> <section class="grid-70 main"> <h2>Lorem Ipsum Headline</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </section> <aside class="grid-30 list"> <h2>Employee Office Status</h2> <div id="employeeList">

      </div>
    </aside>
    <footer class="grid-100">
      <p>Copyright, The Intranet Corporation</p>
    </footer>
  </div>
</div>

</div> </body> </html>

2 Answers

codyleo77
codyleo77
4,348 Points

AJAX requires the code to be on a server. It will not work if you are trying to run the code locally.

Ming Chi Wong
Ming Chi Wong
1,049 Points

Can you show me how to run the code on a server a please? I have MAMP installed if you thats whats required?

Ming Chi Wong
Ming Chi Wong
1,049 Points

Please can you provide more information, as I cannot still connect my text editor with my local server i.e MAMP.