NEWS: Total Picture Views: 147068 | Total Article Views: 155684 | Top 5 Most Popular Article: 1. Am I Stuck Algorithm with Becker Robot | 2. How to read a JSON and work with it | 3. PickUpThings with Becker Robot | 4. Encrypted Data GUI (Download .Zip) | 5. Create Wall and Things with Becker

Ajax Example Javascript

Description:

In this example the Ajax function will replace the content of h1 with the content in the sample.txt

You can view the example here: Example

Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax Example</title>
    <script src="//jmdev.ca/sheridan/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function loadAjax(){
            xml = new XMLHttpRequest();
            xml.onreadystatechange = function(){
              if((xml.readyState == 4) && (xml.status == 200)){
                  $("h1").css("background","red").css("color","yellow");
                  document.getElementById("h1").innerHTML = xml.responseText;
              }
            };
            xml.open("GET",'sample.txt',true);
            xml.send();
        }
    </script>
</head>
<body>
    <h1 id="h1">This is not Ajax programming</h1>
    <button onclick="loadAjax()">Load Ajax</button>
</body>
</html>
Attachments: None

Tags: innerHTML css Ajax

Total Views: 812

My name is Jean-Mathieu

I created this website so other people could enjoy finding useful stuff easier. If you have any question do not hesitate to contact me.

jean8mathieuCreated on 03/09/15 and updated on 03/09/15


affiliate_link

Disclosure: We are a website that needs compensation to operate like any other website on the internet.
We may receive consideration for our reviews but we are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not.