I am learning ajax but I have a problem even just trying the example given in w3 tutorial.
When I click the Button there is no change on my page. I don't know what is missing to make it work. Do I need put on my mamp server?
Thank you for your help
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","ajax_info.html",false);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
To run the above code there is no need to start your server.
First check if you have created ajax_info.html file or not.
Place ajax_info.html in the same folder where the present code file is placed.
Maybe try a "GET" instead of a "POST" xmlhttp.open("GET","ajax_info.html",false);. Also W3School's example is NOT IDEAL and scales VERY POORLY once you add more AJAX calls. I recommend switching to a simpler library such as jQuery or AngularJS (bit more advanced) ASAP in order to handle your AJAX calls
Related
I've been trying to figure out why the content in my very simple ajax file isn't working for the past hour or so.
I'm using wamp server, so I deployed my file under the www folder and ran it from the localhost, no results. I also tried to run it as an independent html file, no results as well.
I'm using Google chrome. I ran an example code from the web (it was embedded in the webpage), it worked perfectly, but after copy-pasting it, didn't work. Why?
Are there any settings I should make sure of in either my browser or server?
Please help! I can't seem to find the problem
here's the code:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
Your code has no issues.
just add a div with id myDiv inisde the body tag
<div id="myDiv"></div>
then make sure the ajax target page exists. (ajax_info.txt)
then invoke the loadXMLDoc function onload of the page
<body onload="loadXMLDoc()">
the resultant code might look like this.
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body onload="loadXMLDoc()">
<div id="myDiv"></div>
</body>
</html>
if still myDiv doesnt get the ajax response, check the firebug/chrome inspector console for any errors.
I think my question is odd… I’m learning here, and would like to use AJAX & JSP to display some other JSP pages in order.
i.e. click button: page1.jsp displayed, click button again: page2.jsp displayed, …
I got the JSP to add the ‘1’ after page and JSP does increment the variable. But it does not change the value past page 1…
It increments correctly in the function if I do a location.reload(), but that of course brings me back to page one…
I’m sure there are other ways to do this, but I simply want this to work using JSP… Any ideas
<!DOCTYPE html>
<html>
<head>
<%! int n = 0;%>
<script>
function loadDoc() {
<% n = n+1; %>
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","page<%=n%>.jsp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Using AJAX to display next page</h2></div>
<button type="button" onclick="loadDoc()">Change Page</button>
</body>
</html>
n is 0 each time. You need to save n. Try using a
<input type="hidden" value="0" id="countvariable" />
in your html somewhere.
Then inside loadDoc() put
var n = 1 + parseInt(document.getElementById("countvariable").value);
document.getElementById("countvariable").value = n;
This should hold your variable. Also, the parseInt is a must otherwise javascript will append the 2 together and you will get 10 as n instead of 1.
Updated: If you want to go back after a certain amount of pages then add this to the end.
if(n == 2)
{
document.getElementById("countvariable").value = 0;
}
I copied the example from http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first and saved it locally to test.html on my computer. Yes I did make an ajax_info.txt file too, but when I click the button nothing happens, and on w3schools works fine. Any ideas?
Here is the copied code:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Is your machine \ environment setup to serve that text file over HTTP i.e. when you press the button the client - i.e. your browser will do a GET HTTP to a server i.e. you localmachine running a web server (iis/apache etc) or remote box if configured
Does your ajax_info.txt file have the contents of:
< p>AJAX is not a new programming language.< /p>
< p>AJAX is a technique for creating fast and dynamic web pages.< /p>
There is no space in < p> and < /p>. I put it in just for formatting purpuses.
Side note: when you learn the fundamentals of ajax, you will find it much easier to work with jQuery's versions of it. Much simpler!!!!
I want to use a yahoo api for place finding and I want to write something like that:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://where.yahooapis.com/geocode?location=701+First+Ave,+Sunnyvale,+CA&appid=yourappid",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
the yahoo link works properly as you can see here:
http://where.yahooapis.com/geocode?location=701+First+Ave,+Sunnyvale,+CA&appid=yourappid
and the ajax format works if I open a local txt file (this is a w3 example) instead of external link.
but when running this code like that it won't work.
i get:
xmlhttp.status==0
when
xmlhttp.readyState==4
and as i found out in another question here it's due to security reasons.
so how do i work around the problem to get the same result?
thanks.
To access an external domain you would usually have to do the query on the server and let your ajax call go to your own domain. The server script will query yahoo and return the values for you. How exactly depends on your environment.
You can proxy the response. On your own server, set up a script that simply loads a page from another server and query the page on your server instead of the remote server.
here is my code:
...
<script type="text/javascript">
function ajaxcall(div, page)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(div).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",page,true);
xmlhttp.send();
}
</script>
</head>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="309" valign="top">
<div width="309" height="270" id="menu"></div>
<script type="text/javascript">ajaxcall('menu', 'map2.php')</script>
....
i want when the page loads it does the ajax and attach to the div "menu! the map2.php but it doesnt, what im doing wrong?
Things to check:
Its the DOM you are using available when the script is called?
The function has to be called in order to do the request. And more importantly the dom elements used in the function must exist. To make sure the node exists place the your function call after the div has closed in an inline script tag, or attach an event handler to window load event or use a js framework domready/domloaded/ready ( same thing different names ) event
Its the request being sent?
Use Firefox with Firebug extension to fugure it out
Are they any error/exceptions not allowing the js run?
Use firebug to check for errors
Hope this helps
PS: xhhtrequest.onerror should be called in the event of a bad request, if you cannot use firebug attach a function to alert for errors