Ajax Program not working same as shown in tutorial.

+1 Altaf Husain Neva · February 17, 2015
I tried ajax program after watching all the tutorials. Here is the code. Nothing happens when i enter text in textbox.

HTML code (bacon.html):






Type any food name...






PHP Code (foodstore.php):




Ajax Code (foodstore.js):

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

return xmlHttp;
}

function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
try{
food = encodeURIComponent(document.getElementById("userInput").value);
xmlHttp.open("GET", "foodstore.php?food=" + food, true);
xmlHttp.readystatechange = handleServerResponse;
xmlHttp.send(null);
}catch(e){
alert( e.toString() );
}
}else{
setTimeout('process()',1000);
}
}

function handleServerResponse {
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
try{
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById("underInput").innerHTML='' + message + '';
setTimeout('process()',1000);
}catch(e){
alert( e.toString() );
}
}else{
alert(xmlHttp.statusText);
}
}
}

Post a Reply

Replies

Oldest  Newest  Rating
0 Ibrahim Tuzlak · March 6, 2015
Are you on localhost? (xampp, wamp)
It appears that it simply won't work that way in many cases, including mine. I realized I wasn't the only one when I looked at the videos' comment section...

There is a reason Bucky decided not to be on localhost for that tutorial; He didn't tell why :D
0 Altaf Husain Neva · March 6, 2015
yeah i was on localhost. I am now using ajax with jQuery thats working fine for me.
0 Jason Knight · March 6, 2015
Here is a function that I wrote a while back, it seems kinda over kill to use Jquery just for AJAX. There's no support for IE's that require active-x, but in theory you shouldn't get many if any visitors that need to use active-x 

  function ajax(args, callback){
              var hr = new XMLHttpRequest(),
                  contentType = (typeof(args.contentType === 'undefined')) ? 'application/x-www-form-urlencoded' : args.contentType;
                hr.open("POST", args.url, true);
       hr.setRequestHeader('Content-type' ,contentType );
                 hr.onreadystatechange = function() {
                    if(hr.readyState === 4 && hr.status === 200) {
   var return_data = hr.responseText;
                        if(return_data){
                            callback.call(this, return_data);
                        }
                    }   
                }; 
            hr.send(args.vars); 
    };

It can be used like so...

ajax({
         url : 'http://localhost/myproj/test.php', // the url you are posting to
         vars : 'action=test' // your post vars
         contentType : 'yourcontenttype' // optional just leave out if you dont need to change the content type     
}, function(data){
  //this is the callback fired of when post is complete
 alert(data);
});
  • 1

PHP

106,980 followers
About

Server-side, HTML embedded scripting language used to create dynamic Web pages.

Links
Moderators