AJAX request crashing

[JasonDavis]

Hi all,

 

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

http://www.jasonrobertdavis.net/ajax1/

 

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!

[falkencreative]

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?)

[dianikol85]

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

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

instead of

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

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

[JasonDavis]

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.

[BeeDev]

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.