Cum se fac AJAX cereri cu JavaScript brut Partea 2

Cu câteva săptămâni în urmă, am demonstrat cum să faceți cereri AJAX cu JavaScript brut. În ziua de azi screencast, vom face lucrurile un pas mai departe pe măsură ce folosim PHP pentru interogarea unei baze de date, convertirea acesteia în formatul JSON și folosirea Javascript pentru a solicita asincron această informație și a afișa-o pe pagină. Dacă începeți doar cu astfel de concepte, acesta este videoclipul perfect pentru dvs.!

Video

Scenariul final "Încărcați"

Acest bloc de cod solicită în mod asincron o pagină și apoi folosește scriptul "Parse" al lui Douglass Crockford pentru a crea un nou obiect global. În acest fel, putem filtra cu ușurință datele returnate JSON.

 încărcarea funcției (url, apel invers) var xhr; dacă (typeof XMLHttpRequest! == 'undefined') xhr = nou XMLHttpRequest (); altfel var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; pentru (var i = 0, len = versions.length; i < len; i++)  try  xhr = new ActiveXObject(versions[i]); break;  catch(e)  // end for  xhr.onreadystatechange = function()  if((xhr.readyState < 4) || xhr.status !== 200) return; callback(xhr); ; xhr.open('GET', url, true); xhr.send(");  load('emails.php', function(xhr)  var response = JSON.parse(xhr.responseText); var container = document.getElementById('container'); for(var i = 0, len = response.length; i < len; i++)  container.innerHTML += '
'+ răspuns [i] .name +' : '+ răspuns [i] .email +'
„; );

PHP final

Modificat ușor de la videoclip pentru a îmbunătăți eficiența - o soluție mult mai elegantă decât cea pe care am inițiat-o la fața locului.

 interogare ('SELECT * FROM contactInfo')) $ returnArray = array (); în timp ce ($ row = $ result-> fetch_object ()) $ returnArray [] = $ rând;  echo json_encode ($ returnArray);  altceva // eroare a apărut eroare ecou: '. $ Mysql-> eroare; 

Sper că toți vă bucurați de această "serie video care nu a fost niciodată menită să fie". Inițial, a fost planificat ca un singur tutorial; totuși, datorită faptului că există prea mult de acoperit, aș dori să continuu să creez mai multe videoclipuri pentru dvs. - adică dacă le veți avea. Simți-mă liber să-mi spui ce vrei să înveți în continuare.

• Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.