Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    73
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Beginner: Am I doing it right?

    Hello,

    I want to learn Ajax to handle forms in a nicer way. So, I started looking on the net for tutorials.

    There are 2 questions I have:
    1. Is this a good way of doing the Ajax thing?
    2. Where to find good tutorials?

    1. Is this a good way of doing the Ajax thing?
    These tests work. They are based on some tutorials I've found. I have changed them to DOM Level 2
    I'd just like to know if I'm doing this correctly and what could be improved.

    Test 1
    The HTML
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Ajax 001</title>
    	<script src="js/script.js"></script>
    </head>
    <body>
    	<H1>Fetching data with Ajax</H1>
    	<form>
    	<input type="button" value="Display Message" id="klik">
    	</form>
    		<div id="targetDiv">
    		<p>The fetched data will go here.</p>
    	</div>
    </body>
    </html>
    The javascript
    Code:
    window.addEventListener('load',init,false);
    
    function init(){
    	document.getElementById("klik").addEventListener('click', process, false);
    
    }
    
    function process(){
    	document.getElementById("klik").disabled = true;
    	var temp= document.getElementById('targetDiv');
    	temp.innerHTML = "<p>Loading...</p>";
    	//setTimeout(getData,3000);
    	getData();
    }
    
    function getData(){
    	var XMLHttpRequestObject = false;
    	if (window.XMLHttpRequest) {
    		XMLHttpRequestObject = new XMLHttpRequest();
    	} else if (window.ActiveXObject) {
    		XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	if(XMLHttpRequestObject) {
    		var obj = document.getElementById('targetDiv');
    		XMLHttpRequestObject.open("GET", 'data.txt');
    		XMLHttpRequestObject.onreadystatechange = function(){
    			if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
    				obj.innerHTML = XMLHttpRequestObject.responseText;
    			}
    		}
    		XMLHttpRequestObject.send(null);
    	}
    }
    Test 2
    The HTML
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script src="js/foodStore.js"></script>
    	</head>
    
    	<body>
    		<h3>Store</h3>
    		Enter the food you would like to buy:
    		<input type="text" id="userInput" />
    		<div id="underInput"></div>
    	</body>
    </html>
    The php
    PHP Code:
    <?php
        header
    ('Content-Type: text/xml');
        echo
    '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

        echo 
    '<response>';
            
    $food $_GET['food'];
            
    $foodArray = array('apple','strawberry','bread');

            if(
    in_array($food$foodArray)){
                echo 
    'We do have '.$food.'!';
            }elseif (
    $food=='') {
                echo 
    'Don\'t leave this empty!';
            }else{
                echo 
    'Sorry, we do not sell '.$food;
            }

        echo 
    '</response>';
    ?>
    The javascript
    Code:
    window.addEventListener('load',init,false);
    var xmlHttp = crateXmlHttpRequestObject();
    
    function init(){
    	document.getElementById('userInput').addEventListener('keyup',verwerk,false);
    }
    
    function verwerk(){
    	setTimeout('process()',1000);
    }
    
    function crateXmlHttpRequestObject(){
    	var xmlHttp;
    
    	if(window.ActiveXObject){
    		try{
    			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    		}catch(e){
    			xmlHttp = false;
    		}
    	}else{
    		try{
    			xmlHttp = new XMLHttpRequest();
    		}catch(e){
    			xmlHttp = false;
    		}
    	}
    
    	if(!xmlHttp){
    		alert("can't create this oject");
    	}else{
    		return xmlHttp;
    	}
    }
    
    function process(){
    	if(xmlHttp.readyState==4 || xmlHttp.readyState == 0){
    		var food = encodeURIComponent(document.getElementById('userInput').value);
    		xmlHttp.open("GET", "ajax/foodStore.php?food="+food, true);
    		xmlHttp.onreadystatechange = handleServerResponse;
    		xmlHttp.send(null);
    	}else{
    		setTimeout('process()',1000);
    	}
    }
    
    function handleServerResponse(){
    	if(xmlHttp.readyState==4){
    		if(xmlHttp.status == 200){
    			var xmlResponse = xmlHttp.responseXML;
    			xmlDocumentElement = xmlResponse.documentElement;
    			var message = xmlDocumentElement.firstChild.data;
    			var theDiv = document.getElementById('underInput');
    			theDiv.style.color = 'blue';
    			theDiv.innerHTML = message;
    		}else{
    			document.getElementById('underInput').innerHTML ='Something went wrong!';
    		}
    	}
    }
    2. Where to find good tutorials?
    I can't seem to find any decent tutorials. A lot of the ones I've found use jQuery. At this point I'd like to use javascript and really learn how these things work.
    I'm also looking for good tutorials that use POST which I presume would be better for handling forms.

    Thank you in advance!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •