Jump to content

AJAX request crashing


Recommended Posts

Hi all,


I'm trying to learn how to perform an AJAX request. Here's my sample project:



There are three files: index.html, ajax.js, and ajax.txt.


I'm just trying to load some text from ajax.txt. I added an alert dialog box that says "see this?" to troubleshoot - and it's popping up several times. I would expect it to pop up just once as the mrAjax onreadystatechange function runs and replaces my div text.


Also when running this on my local browser I get this error:

XMLHttpRequest cannot load file://(shortened)/ajax.txt. Cross origin requests are only supported for HTTP.

ajax.js:30Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101


Not sure what I'm doing wrong.. Thanks!

Link to comment
Share on other sites

I haven't done much with AJAX, but...


The alert happens five times, which I believe means that mrAjax.onreadystatechange is being called 5 times (uninitialized/open/sent/receiving/loaded). If you want the alert to only be called once, I think you have to put the alert line within the "if(mrAjax.readyState == 4..." section.


The thing that confuses me why your


document.getElementById("changeme").innerHTML = mrAjax.responseText;

line is above


mrAjax.open("GET", "ajax.txt", true); 

Just based on logic, I would expect that you need to get the text file before you can change any elements on the page. But again, I don't have that much AJAX experience just yet.


Are you following any tutorials on this? (if so, can you provide a link for reference?)

Link to comment
Share on other sites

This is the old school ajax procedure.


That's why the line

mrAjax.open("GET", "ajax.txt", true); 


is there. I guess it's the routine.


One thing i notice is that in the ajax.js you have



instead of


About that alert box I think Ben is right putting it in if(mrAjax.readyState == 4..." section.




Anyway i would suggest you learn ajax by using a library like jquery. It's so much easier

Link to comment
Share on other sites

Hey Ben, thanks for always answering!


The tutorial is here: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first


I used their code in place of mine, and it works: http://www.jasonrobertdavis.net/ajax2/

I must have been making a syntax error. I agree the placement of the GET doesn't make sense, but I attributed it to me not knowing what I was doing yet..


Even after using their code it doesn't work locally on Chrome and FF - only when I upload it to my server. And IE throws an ActiveX warning. I'm going to abandon using Ajax for the site I wanted to use it on - if I can't develop locally and have to worry about IE users getting errors, forget it.


Dianikol85 - I don't know jQuery, I'm still a noob at this. But if you have a suggestion on how to use jQuery to dynamically load parts of a page I'd love to see a resource! I'm hitting Google right now.


Thanks again, guys.

Link to comment
Share on other sites

Judging by the error message: XMLHttpRequest cannot load file://(shortened)/ajax.txt. Cross origin requests are only supported for HTTP.


Seems like you're not using a web-server program for your local testing. You should use a web-server. Either IIS (Internet Information Services - Comes with MS Windows), or WAMPServer (www.wampserver.com - WAMP = Windows Apache MySQL PHP), XAMPP server (http://www.apachefriends.org/en/xampp.html) any of these 3 will do good. I personally use WAMP and I recommend it, once you have installed it, just drop your files in: X:\wamp\www\ folder where X is the drive you installed wamp on. Then all you need to do is turn on WAMP, wait for the taskbar icon to turn green, then open your browser and type http://localhost/ and you got your local server. Good luck.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...