AJAX :S

XML, Perl, Python, and other languages can be discussed here, even if it isn't PHP (We might forgive you).

Moderator: General Moderators

Post Reply
BETA
Forum Commoner
Posts: 47
Joined: Fri Jul 25, 2008 3:21 am

AJAX :S

Post by BETA »

Hi!
im here again... i wanted to learn AJAX and after a long time i decided to do so now that i have free time but what do i found:
i made a simple ajax script based on others i have seen... but i don't know why it is not working. It only works when i test it on my local server and with the send method GET and running on firefox not on IE... but when i upload it to my host it doesn't work in any way... Nor post neither get and it tells me Method not allowed i don't know why, i know the server supports ajax cause i have tried another downloaded ajax examples and they did work... :banghead: :dubious:
Here is my xhtml:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/* Simple AjaxLib
*Original autor: BETA.
*Please beware of stealing.
*Licensed under a Creative Commons by-nc-nd license.
*/
 
function createAjax(){
    try{
        // Firefox, Safari, Opera, recent versions of IE
        xmlhttp = new XMLHttpRequest();
            }catch(err){
                try{
                //Internet explorer
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(err){
                    try{
                    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
                    }catch(err){
                    alert('Your browser does not support AJAX!');
                    return false;
                    }
                }
            }
    return xmlhttp;
}
 
function useAjax(obj,url,vars,method){
 
            var ajax = createAjax();
            var objid = document.getElementById(obj);
            
    if(method.toUpperCase() == "POST"){
            ajax.open("POST", url, true);
            ajax.onreadystatechange = function(){
                if (ajax.readyState == 1){
                    objid.innerHTML = "Loading...";
                    }else if (ajax.readyState == 4){
                        if(ajax.status == 200){
                                objid.innerHTML = ajax.responseText;
                               }else if(ajax.status == 404){
                                    objid.innerHTML = "URL does not exist!";
                                }else{
                                    objid.innerHTML = "Error: ".ajax.status;
                                }
                    }
                }
            ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            ajax.send(vars);
            return;
        }else{
            ajax.open("GET", url, true);
            ajax.onreadystatechange = function(){
                if (ajax.readyState == 1){
                    objid.innerHTML = "Loading...";
                    }else if (ajax.readyState == 4){
                        if(ajax.status == 200){
                                objid.innerHTML = ajax.responseText;
                               }else if(ajax.status == 404){
                                    objid.innerHTML = "URL does not exist!";
                                }else{
                                    objid.innerHTML = "Error: ".ajax.status;
                                }
                    }
                }
            ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            ajax.send(null);
            return;
        }
}
 
</script>
</head>
<body>
<form name="usrform" method="GET" onsubmit="useAjax('divy','ajax.php?txt='+document.getElementById('txt').value,'', 'get')" action="#" enctype="multipart/form-data">
    <input id="txt" type="text"/>
    <input type="submit" value="Send!"/>
</form>
<div id="divy">
</div>
                    
</body>
</html>
Here is my php:

Code: Select all

<?php
  header('Content-type: text/xml');
  print_r($_GET);
  print_r($_POST);
?>
i change:

Code: Select all

<form name="usrform" method="GET" onsubmit="useAjax('divy','ajax.php?txt='+document.getElementById('txt').value,'', 'get')" action="#" enctype="multipart/form-data">
to this:

Code: Select all

<form name="usrform" method="POST" onsubmit="useAjax('divy','ajax.php',document.getElementById('txt').value, 'post')" action="#" enctype="multipart/form-data">
for POST method...
any ideas??
thx in advance!
BETA
Forum Commoner
Posts: 47
Joined: Fri Jul 25, 2008 3:21 am

Re: AJAX :S

Post by BETA »

okay almost as always... i figured it out by myself...
i leave the solution here it was a silly mistake. In stead of using onsubmit event in the form and a submit button i should have done this:

Code: Select all

<input type="button" onclick="useAjax('divy','ajax.php?txt='+document.getElementById('txt').value, '', 'get')" value="Mostrar"/>
now it works perfectly with both POST, GET and in all ajax-capable browsers (i think :lol:)!
thx anyway! :roll:
Bye!
Glycerine
Forum Commoner
Posts: 39
Joined: Wed May 07, 2008 2:11 pm

Re: AJAX :S

Post by Glycerine »

Just to note, to fix any caching problems you'll ever come across - try sending a unique variable as you send your ajax request.

I IE - if a request is the same as a previous request, it may cache the result. As such - you'll receive a previous result that you may not be expecting. I've always found sending the time tends to fix it.

Had a look at a javascript library such as prototype.js? They do all the hard work for you which is cross platform safe.
BETA
Forum Commoner
Posts: 47
Joined: Fri Jul 25, 2008 3:21 am

Re: AJAX :S

Post by BETA »

thx for the info man ^^
anyways im trying to write my own cross-browser library now... :D
let's see how it turns out... maybe some day ill come here announcing it :lol:
Glycerine
Forum Commoner
Posts: 39
Joined: Wed May 07, 2008 2:11 pm

Re: AJAX :S

Post by Glycerine »

no probs dude.

I made this simple bridging function to help.

To call it:

Code: Select all

 
ProtoAjaxFun('/user/update_status.php', "username=" + username + "&status=" + status, status_return);
 
function status_return(returned_data){
var data = returned_data.responseText // Note this... Information returned is the raw ajax request
$('status_div').innerHTML = data;
}
 
function ProtoAjaxFun(url, params, Function_Return){
    var ajax = new Ajax.Request(
            url, 
            {
                method: 'get', 
                parameters: params, 
                onComplete: Function_Return,
                onFailure: reportError
            });
}
simple..
Post Reply