Ajax (Puro)

Este artigo vou falar sobre Ajax com javascript ‘Puro’, sem usar nenhuma library.
primeiro passo: vamos fazer um arquivo .php, por exemplo: ajax.php
com o Codigo Abaixo:

      /**
      *  Quando é feito aquisição
      *  para o ajax.php com a seguinte URL ajax.php?id="+value
      *  e passado por $_GET o id, aqui abaixo coloquei
      *  um jeito simples de entender se a id for igual á 1
      *  ele faz o select
      * */
	 if($_GET['id'] == 1){
	 	echo "
	 	         Debian 
	 	         Fedora 
	 	         Suse 
                         Ubunto 
                        ";
	 }
	 if($_GET['id'] == 2){
	 	echo "
	 	         Seven 
                         XP 
	 	         98 
        	 	";
	 }
	 if($_GET['id'] == 3){
	 	echo "
	 	         Mac OS 
         	 	 Snow Leopard 
	        	
	 }

Após feito o arquivo ajax.php citado acima iremos fazer o html
nomeando o mesmo de index.html

		Selecione o SO
		Linux
		Windows
		Apple
	
	

	    

e Finalmente chegamos na parte mais legal Javascript aonde será feito a requisição ajax

function buscaOs(value)
    {
        if(value != ''){
        	// Instancia o XMLHttpRequest
            var http = new XMLHttpRequest();
        	// Aqui sera passado o Metodo para onde sera direcionado a aquisição
            http.open("GET","ajax.php?id="+value, true);
        	// Cabeçalho
            http.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
        	// Estações do Ajax Lembrando que são 4
            http.onreadystatechange = function() {
        		// Primeira Estação Carregando a solicitação
                if(http.readyState == 1){
                	// Gif de Loading
                    document.getElementById('distOs').innerHTML = ''
                }
        		// 4 estação já concluida e o status 200 como tudo OK 404 erro
                if(http.readyState == 4 && http.status == 200) {
                	// tira o none do display CSS
                    document.getElementById('distOs').style.display='block';
                	// Faz um innerHTML para a resposta que veio da requesição ajax.php
                    document.getElementById('distOs').innerHTML = http.responseText;
                }
            }
            http.send(null);
        } else {
        	// Se estiver vazio propriedade css NONE
            document.getElementById('distOs').style.display='none';
        }
    }

Abaixo segue um exemplo do tutorial
Download do Arquivo
Espero que tenham gostado
GOD BLESS YOU