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.
Related
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
I'm trying a very simple test for Ajax - changing a title.
But instead of changing the title with the desired text from DoSomthing.php file, the ajax modifying the title with all my main.php file content.
The main file is a php file, but for the testing, no php code is needed.
<!DOCTYPE html>
<html>
<head>
<script>
//-----------------------------------------------------------
function myFunction2()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Title").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","DoSomething.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="Title">What do you say? :)</p>
<button type="button" onclick="myFunction2()">Try Ajax</button>
</body>
</html>
The new title is given by php file that exists in the same folder as the main php file.
Here is the DoSomthing.php file that is called by Ajax for modifying the title.
<?php
echo "Hellooo there!";
?>
btw, No errors are reported in the debug console.
So I don't understand what's going here, and didn't find any similar problem in the web.
Thanks
Have you tried renaming the <p id="Title">...</p>
Ok, got it!
The problem was caused by the cache mechanism of the chrome browser.
While developing the code, the chrome kept some of the old code in the cache so when I tried the example given in this question, the overall results were based on new code with old code that was cached.
Pressing F5 for refreshing the page solve it all.
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 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!!!!
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