Scripturi Ajax. Exemple Ajax în JavaScript. Trimiterea datelor către server

În acest articol vom vorbi despre interacțiunea ajax cu php. Cum se conectează activitatea unui script Ajax și a unui cod php? Cum se utilizează ajax în dezvoltarea web? Dacă sunteți interesat de astfel de întrebări, veți găsi răspunsuri la ele în articolul nostru. Precum și exemple de cod php ajax.

Folosind ajax + php

Pentru a înțelege dacă avem nevoie de ajax cu PHP, să ne dăm seama pentru ce poate fi util. Utilizarea ajax+ php poate fi variată, singurul lucru este că nu puteți construi elemente de pagină folosind această tehnologie care sunt relevante pentru motoarele de căutare. Deoarece ajax încarcă elementele paginii după ce este încărcat atunci când sunt apelate evenimente js, dar după cum știm, motoarele de căutare nu pot citi codul javascript, așa că trebuie să alegeți cu atenție unde aveți nevoie și unde nu trebuie să utilizați ajax cu php.

Unde pot folosi ajax + php?

1. Adăugarea unui nou comentariu

4. Organizarea unei căutări pe site (completare automată)

5. Înregistrarea utilizatorului pas cu pas pe site

6. Abonați-vă la e-mail

7. Vizualizați fotografii

Si altele...

După cum puteți vedea, există o mulțime de opțiuni pentru utilizarea ajax + php. Adică poate fi folosit acolo unde reîncărcarea paginii nu ar fi adecvată, acolo unde trebuie doar să faci schimb de date cu serverul.

Unde nu ar trebui să utilizați ajax + php

Părerea mea este obiectivă, poate gândiți altfel, dar pe baza experienței mele voi spune că ajax + php nu trebuie folosit:

1. Pentru a implementa meniul

2. Implementarea filelor pe pagină (De exemplu: când într-un magazin online pe pagina unui produs vedeți o recenzie, informații, comentarii, fotografii, videoclipuri... nu este nevoie să încărcați date atunci când comutați aceste file.)

Și alte exemple negative care pot dăuna unei poziții mai bune a paginii tale.

Interacțiunea ajax cu php

De fapt, tehnologia ajax nu poate exista fără scripturi PHP, deoarece ajax trimite doar date către server și primește un răspuns returnat, fără a reîncărca paginile. Prin urmare, este mai corect să puneți întrebarea cum să conectați munca ajax și php. Dar despre asta vom vorbi în următorul paragraf al articolului (exemplu ajax php), iar acum vom înțelege specificul modului în care funcționează ajax.

Pentru a trimite date către server, trebuie să creați un obiect XMLHTTPRequest. Folosind-o, deschideți url-ul (scriptul php), trimiteți-i date (metoda POST sau GET), primiți un răspuns și, folosind cunoștințele limbajului js, afișați răspunsul serverului primit pe monitor (răspunsul poate fi orice fragment sau element al paginii site-ului).

Pentru clarificare, priviți diagrama de mai jos care ilustrează interacțiunea ajax cu php.


Exemplu Ajax + php

Pentru un exemplu de interacțiune ajax cu php, să creăm două fișiere:

1. ajax_page.html

2. get_ajax.php

Mai întâi, să ne uităm la partea de utilizator a aplicației, adică pagina ajax_. html:

Ajax + PHP: exemplu | funcția site-ului XmlHttp() ( var xmlhttp; încercați (xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");) catch(e) ( încercați (xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"));) catch (E) (xmlhttp = false;) ) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp ) function ajax(param) ( if (window.XMLHttpRequest) req = noua metoda XmlHttp(); =(!param.method ? "POST" : param.method.toUpperCase()); if(method=="GET") ( send=null; param.url=param.url+"&ajax=true"; ) else ( send=""; pentru (var i în param.data) send+= i+"="+param.data[i]+"&"; send=send+"ajax=true"; url, true); if(param.statbox)document.getElementById(param.statbox).innerHTML = " "; req.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); req.send(send); req.onreadystatechange = function() (daca (req.readyState == 4 && req .status == 200) //dacă răspunsul este pozitiv ( if(param.success)param.success(req.responseText); ) ) ) Aici vom primi rapoarte despre funcționarea aplicației ajax și răspunsul serverului.

Câmpul de intrare 1

Introduceți textul dvs.!

Câmpul de intrare 2

Text liber... Sunt obsedat de acest articol și vreau să mă abonez la RSS ca să pot citi mai des articole ca acesta!!!

ajax_page.html:


Să ne uităm la partea javascript a acestui exemplu:

XmlHttp() este o funcție care creează un obiect XMLHttpRequest() care este scris cât mai compact și pe mai multe browsere.

ajax(param) – handlerul nostru la apelarea evenimentelor (onclick), primește datele necesare în matricea param:

url – unde se trimit datele, și poate fi sub următoarea formă: pagina. php? parameter= value , adică informațiile pot fi transmise folosind metoda GET.

statbox – id-ul blocului html care va primi rezultatele aplicației ajax + php.

metoda – metoda de trimitere a datelor, poate fi POST sau GET. În exemplul nostru, folosim metoda POST, dar, în același timp, informațiile pot fi transmise prin url folosind metoda GET.

date – matrice de date transmise. În exemplul nostru, datele sunt preluate automat din câmpurile 1 și 2, deși puteți scrie pur și simplu date: (nume: „valoare”).

succes – numele funcției sau funcția însăși care va procesa datele primite (text).

Apelul funcției ajax, după cum puteți vedea, este efectuat de evenimentul onclick=ajax().

Acum să ne uităm la partea de server a aplicației ajax + php, adică get_ ajax. php:

Totul este mult mai simplu aici. Mai întâi, setăm codificarea datelor de ieșire folosind antetul. Am stabilit o interdicție a stocării în cache a datelor. sleep(2) – întrerupe scriptul timp de 2 secunde, aceasta pentru a vedea animația în așteptare wait.gif. Producem datele primite, citind toate elementele matricei $_POST și convertindu-le în codificarea necesară (pentru chirilic).

Pentru a lansa aplicația noastră ajax php, încărcați pagina ajax_page.html în browser

Iată ce am primit când am făcut clic pe butonul TEST AJAX:


Acesta este răspunsul primit din fișierul get_ajax.php:


Mai sunt întrebări despreajax +php? Întrebați-i în comentariile de mai jos...

Am acoperit mecanica de bază a metodei jQuery $.ajax(). Acum ar fi o idee bună să luați în considerare cazuri din practica reală: cum și de unde puteți obține date pentru transmitere cu o solicitare Ajax.

Primirea datelor din formular.

Există mai multe moduri de a obține date din câmpurile de formular:

  • Selectați fiecare câmp separat, obținându-i valoarea. Cu toate acestea, acest lucru nu este foarte convenabil când există multe câmpuri.
  • Utilizați metoda serialize().
  • Utilizați metoda serializeArray().
  • Să ne oprim asupra ultimelor două și nu atât asupra modului de obținere a datelor ( totul este simplu aici), ci despre cum să le procesăm pe partea serverului. Luați, de exemplu, această formă:

    HTML ( fișier index.html)

    Numele complet:
    E-mail:
    Sex: Masculin Femeie
    Primește scrisori:
    Da
    Nu

    Și să scriem acest cod JS

    jQuery( fișierul script.js)

    $(function())( $("#my_form").on("trimite", function(e)( e.preventDefault(); var $that = $(this), fData = $that.serialize(); // serializează datele // SAU // fData = $that.serializeArray(); $that.attr( "metoda"), // metoda de transfer - preluată din atributul metodei date: (form_data: fData), dataType: "json", succes: function(json)( // Dacă cererea este finalizată cu succes. .. if(json)( $that.replaceWith(json); // înlocuiți formularul cu datele primite în răspuns ) ));

    Acum să scriem un handler în așa fel încât să vedem clar diferența dintre metodele serialize() și serializeArray()

    handler PHP ( file handler.php)

    • Serghei Savenkov

      un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva