Solved

Why am I getting an XMLHttpRequest Exception 101 when attempting to use AJAX to retieve a text file in HTML5 page with javascript?

Posted on 2013-01-25
11
1,506 Views
Last Modified: 2013-02-01
Hi:

I'm new to the world of HTML5, Javascript, jquery and AJAX.
I'm trying to recreate a simple example from a tutorial I found online.
The example is supposed to grab the contents from a text file on the local disk
and populate the contents of a div with the text.

I keep running into the following exception:
------------------------------------------------------------
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101

I see the exception occur on the Send().
I'm debugging using the Chrome debugging tools.
I'm breaking on the .send(null) line.
I hit F10.
I wait and nothing happens. I hit F10 again and I see the error.

I've tried setting asynch flag to both true and false on the .open(), but I get the same results.

It's not clear what I'm doing wrong and I have no idea on how to debug this issue.
Is it a permissions thing? I'm attempting to run this in Chrome.

Here is the snippet of javascript:
--------------------------------------------

            var xhrObject = new XMLHttpRequest();
           
            if (window.XMLHttpRequest) {
                xhrObject = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
                xhrObject = new ActiveXObject("Microsoft.XMLHTTP");
            }


            function populateTextContentDiv(){
             
                var externalTextFile = "TextContentSample.txt";
               
                // if we can use AJAX
                 if(xhrObject) {
                 
                    // create a new variable that traverses the DOM and finds the <div> tag we put into our second parameter
                    var pageText = document.getElementById("TextContent");
                   
                    // use AJAX to place a text file we put in our first parameter
                    xhrObject.open("GET", externalTextFile, true);
                   
                    // if our AJAX variable found our data and the server is ready to send it out, bundle our data as a text string
                     xhrObject.onreadystatechange = function () {
                        if(xhrObject.readyState == 4 && xhrObject.status == 200) {
                            pageText.innerHTML = xhrObject.responseText;
                        }
                    }
                     
                    // send our data out
                     xhrObject.send(null);
                 }                
            }
0
Comment
Question by:jxbma
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 1

Author Comment

by:jxbma
ID: 38819570
I forgot to mention that the text file I'm trying to load exists in the same directory where my html page is.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38819639
what is the URL?
0
 
LVL 1

Author Comment

by:jxbma
ID: 38819665
This is the URL of my main page.

file:///C:/Dev%20Projects/Project1/FrontEnd/WebPages/Framework/Project1/index.html#

I'm simply loading this URL into Chrome and working locally.

Thanks,
JohnB
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38819684
OK, you CAN'T use this protocol with ajax.
You can use only http:// or https://
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 38819782
@leakin971 is right, that won't work.  Here's a whole page of reasons why: http://code.google.com/p/browsersec/wiki/Part2

You need to run thru a web server to make that work at all.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Author Comment

by:jxbma
ID: 38819787
Is here an easy way to set that up locally?
I'm pretty green at this...

Thanks,
JohnB
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38819811
0
 
LVL 16

Expert Comment

by:kiranvj
ID: 38821578
If you don't what to run from a webserver, that is not http/https    from file:// protocol just like you were doing

try something like this.

 xhrObject.onreadystatechange = function () {

if((xhrObject.readyState == 4 && xhrObject.status == 200) ||  (xhrObject.status == 200 && document.location.protocol == "file:")) {
                            pageText.innerHTML = xhrObject.responseText;
                        }

Open in new window


hope this helps,
kiranvj
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38822321
You can use xampp to establish a local webserver where you can simulate an ajax call.
0
 
LVL 1

Author Closing Comment

by:jxbma
ID: 38845429
Spot on. I was having Cross Domain issues.<br />I created in instance in IIS and and running though that fine.<br /><br />Thanks,<br />JB
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38845467
You're welcome, thanks for the points.  That article explains a lot of things.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

930 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

10 Experts available now in Live!

Get 1:1 Help Now