I am a beginner at Ajax, and I have this html code that is meant to change the inner content of a div by using xmlhttprequest to request different html addresses and put their contents in a div. What am I doing wrong? Here is the code:
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
var xmlhttp= null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
alert("You must be using a different browser.");
}
function makeRequest(serverPage,objID){
var obj = document.getElementById(objID);
xmlhttp.open("GET",serverPage);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 100){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
</head>
<body onload="makeRequest ('content1.html','hw')">
<div align="center">
<h1>My Webpage</h1>
Page1 | Page2 | Page3 | Page4
<div id = "hw"></div>
</body>
Generally, this looks OK to me.
However the xmlhttp.status == 100 check looks suspicious.
100 is an unusual HTTP status code. Typically web servers return 200 ("OK") on a successful request.
Try replacing the status == 100 check with status == 200.
For reference,please see: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
change xmlhttp.status == 100 to xmlhttp.status == 200 check if this resolves your issue
and if you are try to run the page in IE try to add this line
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Test for xmlhttp.status == 200 instead of 100.
http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp
I guess it should be:
function makeRequest(serverPage,objID){
xmlhttp.open("GET",serverPage);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(objID).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
function AjaxGet(url,helm)
{
if (xmlhttp == null)
{ 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)
{ if ( (xmlhttp.status==200) || (xmlhttp.status==304) )
{ document.getElementById(helm).innerHTML = xmlhttp.responseText; }
else { document.getElementById(helm).innerHTML = xmlhttp.status + " " +xmlhttp.statusText; }
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
Related
Problem is that i have dynamic changing script for mysql query
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
I need to get str from this code to php.
from the html point of view i get string from
<select name="users" onchange="showUser(this.value)">
adn in the other file getuser.php I have
$q = $_GET['q'];
$sql="SELECT * FROM articles WHERE type = '".$q."'";
The biggest problem is that i put onchange this parameters so i can get values to my page without refreshing it. But now i cant get value from combobox to php.
How can i do this ???
Thanks in advance
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","destination_get.php?q="+str,true);
xmlhttp.send();
}
}
</script>
TypeError: document.getElementById(...) is null document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
Please help
The error contains all the information you need here:
TypeError: document.getElementById(...) is null document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
Your JS thinks there is no element with id="txtHint" in the document, therefore document.getElementById returns null, and null is not an object with the property innerHTML.
I'm trying to familiarize myself with Ajax as I will need to use it continually for work. I'm working through the W3Schools tutorial trying things with my Apache2 server. I have a file called ajax_info.txt on the server (under /var/www (ubuntu)). I'm making a call to it and with Firebug I see I get a good response (4 & 200) but it isn't outputting the contents of the file to the DOM. Here's the code:
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
var url = "http://192.168.0.5/ajax_info.txt";
function loadXMLDoc(url, cfunc) {
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 = cfunc;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myFunction() {
loadXMLDoc(url, function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv">
<h2>Let AJAX change this text</h2>
</div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>
I'm not exactly sure what it is I'm doing wrong. The w3schools tutorial isn't exhaustive by any stretch. I plan on buying a book, but I'd love to learn these simple GET calls as it will get me headed in the proper direction. Any suggestions would be greatly appreciated.
function ajax(x) {
var a;
if (window.XMLHttpRequest) {
a = new XMLHttpRequest();
} else if (window.ActiveXObject) {
a = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Browser Dosent Support Ajax! ^_^");
}
if (a !== null) {
a.onreadystatechange = function() {
if (a.readyState < 4) {
//document.getElementById('cnt').innerHTML = "Progress";
} else if (a.readyState === 4) {
//respoce recived
var res = a.responseText;
document.getElementById('center_scrolling_div').innerHTML = res;
eval(document.getElementById('center_scrolling_div').innerHTML);
}
};
a.open("GET", x, true);
a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
a.send();
}
}
function ajax_request(destination_full_url) {
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) {
alert("response: \n" + xmlhttp.responseText);
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", destination_full_url, true);
xmlhttp.send();
}
function third_party_function(obj) {
var response
response = ajax_request("info.php?keyword=obj.value");
alert(response);
}
<textarea onkeypress="third_party_function(this);"></textarea>
First comes off message box "underfined" one second after comes off message box with ajax request.
Question is why it runs alert(response); before finishing the previous step and how i make it wait untill ajax_request() function finished before going to next line?
because ajax is asynchronous and runs in background by default, you can make it synchronous by changing from
xmlhttp.open("GET", destination_full_url, true);
to
xmlhttp.open("GET", destination_full_url, false);
=== update ===
function ajax_request(destination_full_url, callback){
.....
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("response: \n" + xmlhttp.responseText);
callback(xmlhttp.responseText);
}
}
...
}
....
function third_party_function(obj) {
ajax_request("info.php?keyword=obj.value", function(response){alert(response) });
}
Hello I want to get xml from Google Weather
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.open("GET", "http://www.google.com/ig/api?weather=london&hl=en", true);
xmlhttp.send(null);
xmlDoc=xmlhttp.responseXML;
It`s not working . Thanks
XMLHttpRequest is asynchronous. You need to use a callback. If you don't want to use a full-fledged library, I recommend using Quirksmode's XHR wrapper:
function callback(xhr)
{
xmlDoc = xhr.responseXML;
// further XML processing here
}
sendRequest('http://www.google.com/ig/api?weather=london&hl=en', callback);
If you absolutely insist on implementing this yourself:
// callback is the same as above
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://www.google.com/ig/api?weather=london&hl=en", true);
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState != 4) return;
if (xmlhttp.status != 200 && xmlhttp.status != 304) return;
callback(xmlhttp);
};
xmlhttp.send(null);
Edit
As #remi commented:
I think you'll get a cross domain access exception : you can't make an ajax request to an other domain than your page's. no ?
Which is (for the most part) correct. You'll need to use a server-side proxy, or whatever API that Google provides, instead of a regular XHR.
You can't do this via javascript to to it being a cross-domain request. You'd have to do this server-side.
In PHP you'd use CURL.
What you are trying to do can't be done with Javascript.
Ok here is the code :
<html>
<body>
<script type="text/javascript">
var xmlhttp;
var xmlDoc;
function callback(xhr)
{
xmlDoc = xhr.responseXML;
// further XML processing here
}
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://www.google.com/ig/api?weather=london&hl=en", true);
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState != 4) return;
if (xmlhttp.status != 200 && xmlhttp.status != 304) return;
callback(xmlhttp);
};
xmlhttp.send(null);
alert(xmlDoc);
</script>
</body>
</html>
It doesn`t returns any errors but alert returns undefined.