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 "";
	 }
	 
	 if($_GET['id'] == 2){
	 	echo "";
	 }
	 
	 if($_GET['id'] == 3){
	 	echo "
	 }
                

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


	

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

59 thoughts on “Ajax (Puro)

  1. 842894 979243The the next occasion Someone said a weblog, Hopefully so it doesnt disappoint me approximately this. What im saying is, I know it was my choice to read, but I truly thought youd have something fascinating to express. All I hear is often several whining about something which you could fix should you werent too busy looking for attention. 815062

  2. pfnqrz,A fascinating discussion is definitely worth comment. I do think that you ought to publish more on this topic, it may not be a taboo xhzylzdgkao,subject but generally folks don’t talk about such subjects. To the next! All the best!!

  3. xbqjxgszmp,Thanks for ones marvelous posting! I actually enjoyed reading it, you will be a great author.I will always bookmark your blog and will suogntnbrk,come back from now on. I want to encourage that you continue your great writing, have a nice afternoon!

  4. madupbwjcef,Are you searching for top class Escort service in Noida and want to enjoy with them, hire sexy girls from top Greater Noida escort service and enjoy full night.

  5. For Sale Free Shipping Macrobid Cheap Overseas Provera (Modus Medroxyprogesterone) Propecia En Madrid [url=http://cialtadalaf.com]cialis without a doctor’s prescription[/url] Amoxicillin And Atenolol

  6. At the time of the heat, the money was invested in the stock market. That experience made the 69-year-old Dario finally become a global macro investor, and used this to shape the understanding of the economy and the market. Dalio believes that capitalism is the most effective mechanism for resource allocation in terms of raising living standards. But to this day, the capitalist system has little or no actual income growth for most people.

  7. Last year, the Giants passed on QBs Sam Darnold, Josh Rosen and Josh Allen and drafted a running back second overall. Even with Saquon Barkley’s Offensive Rookie of the Year performance, New York won only five games with eroding statue Eli Manning behind center, and that appears to be the plan yet again. Daniel Jones played under David Cutcliffe at Duke, and there’s no doubt Cutcliffe’s cozy relationship with the Manning family had plenty to do with the Giants selecting Jones with the No. 6 pick.

  8. “Everything’s always on the table,” Kerr said. “Every playoff game, everything is always on the table. We consider everything. We go over every possibility. We hash it out. We ask the players their opinions on stuff and we make adjustments.

  9. You can definitely see your expertise in the work you write.
    The world hopes for even more passionate writers such as you who are not afraid to
    mention how they believe. At all times follow your heart.

  10. Hey there! I just wanted to ask if you ever have any trouble with hackers?
    My last blog (wordpress) was hacked and I ended up losing
    months of hard work due to no back up. Do you have any methods to protect against hackers?

  11. After I initially left a comment I appear to have clicked on the -Notify me when new comments are
    added- checkbox and from now on whenever a comment is added I recieve four
    emails with the same comment. There has to be a way you can remove me from that service?
    Thanks a lot!

  12. Pretty nice post. I simply stumbled upon your blog and wanted to say that I’ve really enjoyed surfing around your weblog
    posts. After all I’ll be subscribing for your feed and I hope you write again soon!

  13. Hi would you mind stating which blog platform you’re using?

    I’m planning to start my own blog soon but I’m having a tough time
    deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and I’m looking for something completely
    unique. P.S My apologies for being off-topic
    but I had to ask!

  14. Right now it seems like Drupal is the preferred blogging platform available right now.
    (from what I’ve read) Is that what you are using
    on your blog?

  15. I needed to thank you for this good read!! I absolutely loved every bit of it.
    I’ve got you saved as a favorite to check out new things you post…

  16. I have been browsing online more than 3 hours today, yet I never found any interesting
    article like yours. It is pretty worth enough for me. Personally,
    if all web owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

  17. Thanks for every other informative blog. Where else could I
    get that type of information written in such a perfect means?
    I’ve a undertaking that I’m simply now operating on, and I have
    been on the glance out for such info.

  18. This is the right blog for everyone who hopes to find out about this topic.

    You realize so much its almost tough to argue with you (not
    that I really would want to…HaHa). You certainly put a new spin on a subject that’s been written about for decades.
    Wonderful stuff, just excellent!

  19. [url=https://propecia5mg.com/]propecia[/url] [url=https://sildenafilcitrate50.com/]sildenafil citrate 100 mg[/url] [url=https://tadalafil100.com/]tadalafil for women[/url] [url=https://atarax25.com/]atarax tablets[/url] [url=https://cialis50.com/]daily cialis cost[/url] [url=https://tetracyclinerx.com/]buy tetracycline online[/url] [url=https://lisinoprilmed.com/]drug lisinopril[/url] [url=https://furosemide80.com/]furosemide 40 mg tablets[/url] [url=https://cafergotbuy.com/]cafergot online[/url] [url=https://acyclovir200.com/]acyclovir 200[/url] [url=https://vardenafil40.com/]vardenafil hcl[/url] [url=https://ventolinhf.com/]proventil hfa 90 mcg inhaler[/url] [url=https://tadalafilus.com/]online tadalafil[/url] [url=https://acyclovirc.com/]buy acyclovir[/url] [url=https://tadalafilpro.com/]tadalafil[/url] [url=https://prednisolone1.com/]prednisolone[/url] [url=https://cialis60.com/]cialis 60[/url] [url=https://allopurinol300.com/]allopurinol[/url] [url=https://advair250.com/]advair[/url] [url=https://propranolol80.com/]propranolol[/url]

  20. [url=http://cialis50.com/]order cialis by phone[/url] [url=http://amoxicillin250.com/]amoxicillin 250[/url] [url=http://tadalafilus.com/]buy tadalafil online[/url] [url=http://prednisone40.com/]prednisone[/url] [url=http://tetracyclinerx.com/]buy tetracycline online[/url]

Deixe uma resposta

O seu endereço de e-mail não será publicado.