2

after searching the internet I was unable to find an answer as to why my AJAX code is not working. My assignment is to retrieve a text file and display it to the browser using AJAX but the ready state stops at 1. an example file is canada.txt and is located in the directory http://157.201.194.254/~ercanbracks. The .html and .js files are below:

HTML file: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AJAX</title>
<link rel="stylesheet" type="text/css" href="assign09.css" />
<script type="text/javascript" src="assign09.js"></script>
</head>
<body>
    <h1>Ten Largest Cities</h1>
    <h3>Select a Country:</h3>
    <form action="">
        <select id="country">
            <option value="canada">Canada</option>
            <option value="mexico">Mexico</option>
            <option value="russia">Russia</option>
            <option value="usa">USA</option>
        </select>
        <input type="submit" value="Submit" 
            onclick="makeRequest(document.getElementById('country').value)" />
        <div id="error"> </div>
    </form>

    <h3>Cities:</h3>
    <div id="cities">
    <pre>
City               Population
------------------ ---------------
<span id="cityList"></span>
    </pre>
    </div>
</body>
</html>

.js file:

var httpRequest;
var countryOption;

function makeRequest(option)
{
    countryOption = option;
    if (window.XMLHttpRequest) // Modern Browsers
    {
        httpRequest = new XMLHttpRequest();
    }
    else // older IE browsers
    {
        try
        {
            httpRequest = new ActiveXObject("Msxm12.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert('ERROR - Unable to make XMLHttpRequest');
            }
        }
    }

    if (!httpRequest)
    {
        alert('ERROR: httpRequest failed -- try a different browser');
        return false;
    }

    else
    {
        var url = "http://157.201.194.254/~ercanbracks/" + option + ".txt";
        alert('Ready State = ' + httpRequest.readyState);
        httpRequest.onreadystatechange = getCities;
        httpRequest.open("GET", url, true)
        httpRequest.send(null);
    }
}

function getCities()
{
    alert('Ready State = ' + httpRequest.readyState);
    if (httpRequest.readyState == 4)
    {
        alert('Ready State = ' + httpRequest.readyState);
        if (httpRequest.status == 200)
        {
            var response = httpRequest.responseText;
            document.getElementById("cities").innerHTML = response;
        }
        else
        {
            alert('problem with request');
            alert('Ready State = ' + httpRequest.statusText);
        }
    }
}
Brandon Burr
  • 21
  • 1
  • possible duplicate? http://stackoverflow.com/questions/751269/ajax-wont-get-past-readystate-1-why – DanC Mar 13 '13 at 03:19
  • Check your JS console. I have a feeling that your request is cross-origin and is being blocked by the browser. – Blender Mar 13 '13 at 03:21
  • I looked at [link](http://stackoverflow.com/questions/751269/ajax-wont-get-past-readystate-1-why) and it I tried the workaround by using onload instead but that didn't even get me to readyState 1. And It appears that that onload was for firefox only which I am not using. – Brandon Burr Mar 13 '13 at 03:23

0 Answers0