Curs Javascript

Metoda ajax() se foloseste pentru a efectua o cerere AJAX (asynchronous HTTP) la server.
Toate functiile Ajax jQuery: load(), get(), post(); folosesc metoda ajax(). Aceasta contine mai multe optiuni de configurare si prelucrare a datelor, iar sintaxa ei este mai complexa.

  Sintaxa: 
$.ajax({ nume:valoare, nume:valoare, ...})
- Parametri reprezinta una sau mai multe perechi nume:valoare, care configureaza cererea Ajax. Sunt prezentati mai jos, dar mai intai iata un exemplu simplu cu o cerere Ajax prin POST: 
$.ajax({
  type: 'POST',
  url: 'script.php',
  data: 'nume=un_nume&id=un_id',
  success: function(raspuns){
    $('#result').html(raspuns);
  }
});
Datele: "nume=un_nume&id=un_id" sunt trimise pe server la "script.php" prin POST, apoi, raspunsul de la server e adaugat intr-un element HTML (cu id="result").

Optiuni pentru jQuery ajax

Iata cateva optiuni (perechi nume/valoare) ce pot fi utilizate pentru configurarea cererii Ajax.
- "xhr" reprezinta obiectul XMLHTTPRequest.

    async   - o valoare Booleana (true sau false), care seteaza daca cererea trebuie facuta asincron sau nu (prestabilit: true). Cererile intre domenii diferite sau cu dataType:"jsonp"; nu suporta operatii sincron (simultane). 
$.ajax({
  url: "file.php",
  async: false
});

    beforeSend(xhr)   - o functie care sa fie executata inainte de trimitere cerere. Poate fi utilizata si pentru definirea de headers care sa fie transmise. 
$.ajax({
  url: "file.php",
  beforeSend: function() {
    xhr.setRequestHeader("Accept", "text/javascript");
    $('#resp').html('Loading...');
  },
  success: function(raspuns){
    $('#resp').html('raspuns');
  }
});

    cache   - o valoare Booleana care indica browser-ului daca sa adauge sau nu in cache pagina accesata (prestabilit: true, si false pt. dataType 'script' sau 'jsonp'). 
$.ajax({
  url: "file.html",
  cache: false
});

    complete(xhr, status)   - o functie care va fi executata dupa ce e trimisa cererea (dupa executia functiilor de la 'success' si 'error'). 
$.ajax({
  url: "file.php",
  complete: function() { alert('Trimis complet'); }
});

    contentType   - tipul de continut utilizat la trimiterea de date la server (prestabilit: 'application/x-www-form-urlenecodd'). 
$.ajax({
  type: "POST",
  url: "file.php",
  data: "{'nume1':'valoare', 'nume2':'valoare'}",
  contentType: "application/json; charset=utf-8",
  dataType: "json"
});

    context   - specifica valoarea lui "this" pentru functiile legate de rezultatul AJAX returnat. 
$.ajax({
  url: "file.php",
  context: $('#idd'),
  success: function(){
    $(this).html('Succes');       // this va fi "#idd"
  }
});

    data   - datele care vor fi trimise la server. Sunt transformate in sir (string). 
$.ajax({
  type: "GET",
  url: "file.php",
  data: "id=78&nume=un_nume"
});

    dataFilter(data, type)   - o functie utilizata pentru a gestiona datele de raspuns din obiectul XMLHttpRequest. Este o functie de pre-filtrare a raspunsului. Functia accepta doua argumente: "data" (datele returnate de server), "type" (dataType - tipul de date). 
$.ajax({
  url: "file.php",
  data: {'json':'datas'},
  contentType: "application/json; charset=utf-8",
  dataFilter: function(data) {
    var resp = eval('(' + data + ')');
    return resp;
  },
  success: function(raspuns, status, xhr){
    $('#idd').html(raspuns.property);
  }
});

    dataType   - Tipu de date asteptat ca raspuns de la server.
"xml": Returneaza un document XML ce poate fi procesat prin jQuery.
"html": Returneaza cod HTML; scripturile JavaScript incluse in acest cod sunt evaluate la adaugarea in DOM.
"script": Evalueaza raspunsul ca pe un cod JavaScript si-l returneaza sub forma de text.
"json": Evalueaza raspunsul ca tip JSON si returneaza obiectul JavaScript continut in acel format JSON.
"jsonp": Incarca intr-un JSON folosind JSONP.
- Daca nu e specifcat nici un tip, jQuery va stabili dataType in functie de tipul MIME din raspuns. 
$.ajax({
  // Incarca si executa un fisier JavaScript
  type: "GET",
  url: "file.js",
  dataType: "script"
});

    error(xhr, status, error)   - functie care sa fie executata in caz ca apare vreo eroare la cererea Ajax. 
$.ajax({
  url: "file.php",
  error: function(xhr, status, error) { alert(error); }
});

    global   - o valoare Booleana ce specifica daca va declansa sau nu evenimentele Ajax (prestabilit: true). Setati false daca vreti sa opriti declansarea evenimentelor precum ajaxStart sau ajaxStop. 
$.ajax({
  url: "file.php",
  global: false,
  success: function(msg){
    alert(msg);
  }
});

    headers   - perechi tip/valoare cu headere aditionale care sa fie trimise la server. Acestea se adauga inainte de functia beforeSend; defapt, orice valoare din optiunea "headers" poate fi rescrisa in functia de la beforeSend. 
$.ajax({
  headers: { "Content-Type": "application/json", "Accept": "application/json" },
  type: "POST",
  url: "file.php",
  data: {'json': 'data'},
  dataType: "json",
  success: function(json){
    // do something...
  }
});

    ifModified   - o valoare Booleana, daca e setata true, determina cererea sa fie considerata "success" doar daca raspunsul s-a modificat de la ultima cerere. Aceasta se realizeaza prin verificarea ultimului header modificat (prestabilit: false). 
$.ajax({
  url: "file.php",
  ifModified: true,
  success: function(data, status){
    if(status!="notmodified") {
      $("#display").append(data);
    }
  }
});

    jsonp   - un nume care retine sirul transmis in format JSON (adaugat in "data"). Acest nume va fi utilizata in loc de 'callback', ca parte din sirul ce reprezinta adresa URL ('callback=?'). Astfel, {jsonp:'onJSONPLoad'} va rezulta in 'onJSONPLoad=?', transferat la server. 
// jQuery va schimba adresa URL ca sa contina &jsonp=jsonpmethod
$.ajax({
  dataType: 'jsnp',
  data: 'id=10',
  jsonp: 'jsnp',
  url: "file.php",
});

    password   - un sir cu o parola utilizata pentru acces HTTP ce necesita autentificare.
    usernume   - un sir cu un nume utilizata pentru acces HTTP ce necesita autentificare. 
$.ajax({
  url: "file.php",
  usernume: 'nume',
  password: 'parola',
  success: function(raspuns){
    $("#display").html(raspuns);
  }
});

    processData   - o valoare Booleana care specifica daca datele transmise la server trebuie sau nu transformate in sir (prestabilit: true). Daca vreti sa trimiteti un document DOM (precum XML), setati false aceasta optiune. 
// trimite un document XML la server
var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
  success: function(raspuns){
    $("#display").html(raspuns);
  }
 });

    scriptCharset   - determina cererea sa fie interpretata cu un anumit set de caractere. Numai pentru date transmise cu dataType "jsonp" sau "script", si prin "GET". 
$.ajax({
  type: "GET",
  url: "file.php",
  scriptCharset: "utf-8",
  contentType: "application/x-www-form-urlenecodd; charset=UTF-8",
  data: "id=12&nume=un_nume",
  success: function(raspuns){
    $("#idd").html(raspuns);
  }
  
});

    statusecod   - un set cu percechi numar: function(), unde numar e un cod HTML, iar function() e functia care va fi executata cand raspunsul are acel cod. 
// alert cand raspunsul are codul HTML 404
$.ajax({
  url: "file.php",
  statusecod: {
    404: function() {
      alert('pagina nu e gasita');
    }
  }
});

    success(raspuns, status, xhr)   - o functie ce va fi executata cand cererea Ajax returneaza "success" in parametru "status". 
$.ajax({
  url: "file.php",
  data: 'id=un_id',
  success: function(raspuns, status, xhr){
    if(status=="success") {
      $("#display").html(raspuns);
    }
    else { alert(status+ ' - '+ xhr.status); }
  }
});

    timeout   - seteaza un timp local de expirare (in milisecunde) in care cererea Ajax poate astepta raspunsul de la server. 
// asteapta raspunsul maxim 3000 milisecunde
$.ajax({
  url: "file.php",
  timeout: 3000,
  success: function(){
    $("#response").text('Success');
  }
});

    type   - tipul prin care sunt transmise datele: GET sau POST (prestabilit: GET). Se pot folosi si alte tipuri, adaugate in HTML5: PUT si DELETE. 
$.ajax({
  type: "POST",
  url: "file.php",
  data: 'nume=un_nume&pass=parola',
  success: function(raspuns){
    $("#idd").text(raspuns);
  }
});

    url   - un sir cu adresa URL la care e trimisa cererea Ajax (prestabilit: pagina curenta). 
$.ajax({
  url: "file.php",
  success: function(raspuns){
    $("#idd").text(raspuns);
  }
});

Exemplu script jQuery Ajax - PHP

Sa vedem un exemplu complet cu ajax() si PHP.
Se creaza o pagina web cu un formular ce contine o caseta text pentru nume, o lista <select> cu optiuni si un textarea pt. comentarii.
Cand userul trimite formularul, se foloseste jQuery Ajax pentru a trimite datele din formular la un script PHP (intr-un fisier denumit script.php) care va procesa datele si returneaza un sir cu cod HTML. Daca cererea este efectuata cu succes, raspunsul de la scriptul PHP va fi inclus intr-un <div> (cu id="resp"), fara reincarcarea paginii. In caz de eroare, va fi afisata o fereastra Alert cu acea eroare.
Iata codul pt. scriptul PHP, apoi pt. pagina cu jQuery Ajax (pt. mai multe detalii, vedeti comentariile din coduri).

Fisierul script.php

<?php
// defineste un Array cu adrese pt diferite cursuri
$crs = array(
  'altu'=>'',
  'php-mysql'=>'php-mysql',
  'javascript'=>'javascript',
  'actionscript'=>'flash/actionscript-3_e',
  'jquery'=>'javascript/curs-jquery-tutoriale-js'
);

// verifica daca sunt date trimise prin POST, cu iindice "nm", "cs", si "cmt"
if(isset($_POST['nm']) && isset($_POST['cs']) && isset($_POST['cmt'])) {
  $_POST = array_map("strip_tags", $_POST);       // sterge posibile tag-uri din POST

  // preia datele
  $nm = $_POST['nm'];
  $cs = $_POST['cs'];
  $cmt = $_POST['cmt'];

  // defineste o variabila ce va contine raspunsul returnat de script
  $rehtml = '<h4>Hy '. $nm. '</h4> Link-ul pentru Curs <b>'. $cs. '</b>: <a href="https://marplo.net/'. $crs[$cs]. '">'. $cs. '</a><br />Comentariul dv.: <i>'. $cmt. '</i>';
}
else $rehtml = 'Date nevalide';

echo $rehtml;        // returneaza raspunsul
?>

Pagina cu codul HTML si jQuery

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax - PHP</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand formularul "#crs" e trimis
  $('#crs').submit(function() {
    // preia datele din formular
    var nm = $('#crs #nm').val();
    var cs = $('#crs #cs').val();
    var cmt = $('#crs #cmt').val();

    // pune date din formular in format JSON, care va fi trimis la server
    var data_json = {'nm':nm, 'cs':cs, 'cmt':cmt};

    // seteaza functia ajax() sa trimita datele prin POST la "script.php"
    // daca apare vreo eroare, afiseaza o fereastra Alert cu starea cererii (xhr.status) si eroarea
    // la "success", plaseaza raspunsul intr-un element HTML cu id="resp"
    $.ajax({
      type: 'post',
      url: 'script.php',
      data: data_json,
      beforeSend: function() {
        // inainte sa trimita cererea, afiseaza o notificare de "Incarcare..." messaj in locul unde va fi adaugat raspunsul
        $('#resp').html('Incarcare...');
      },
      timeout: 10000,        // seteaza timpul de expirare (10 secunde)
      error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },
      success: function(raspuns) { $('#resp').html(raspuns); }
    });

    return false;      // necesar ca sa nu deschida pagina cu adresa din formular cand e trimis
  });
});
--></script>
</head>
<body>
<div id="resp"></div>
<h4>Completati formularul:</h4>
<form action="script.php" method="post" id="crs">
 Nume: <input type="text" name="nm" id="nm" /><br />
 Curs: <select name="cs" id="cs">
  <option value="altu">Altu</option>
  <option value="php-mysql">PHP-MySQL</option>
  <option value="javascript">JavaScript</option>
  <option value="actionscript">ActionScript</option>
  <option value="jquery">jQuery</option>
 </select><br />
 Comentarii:<br />
 <textarea name="cmt" id="cmt" cols="20" rows="3"></textarea>
 <input type="submit" value="Trimite" />
</form>
</body>
</html>
Demo:

Completati formularul:

Nume:
Curs:
Comentarii:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a include fisier extern CSS in pagina web?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Ce proprietate CSS seteaza marimea textului?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicati proprietate JavaScript care poate sa adauge cod HTML intr-un element.
text value innerHTML
document.getElementById("someID").innerHTML = "Continut HTML";
Clic pe functia care returneaza numarul de caractere dintr-un sir in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Care este forma de feminin a adjectivului "white" (alb)?
white whitea whites
(In limba engleza adjectivele au aceeasi forma pt. ambele genuri)
The snow is white. - Zapada e alba.
Care este forma de feminin a adjectivului "blanco" (alb)?
blanc blance blanca
La nieve es blanca.
- Zapada e alba.
jQuery metoda ajax()

Last accessed pages

  1. Pronumele direct si indirect (3653)
  2. Sintaxa JavaScript (11093)
  3. Tutoriale JavaScript (3591)
  4. Verbe neregulate (5283)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (271093)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (807)
  2. Exercitii engleza - English Tests and exercises - Grammar (360)
  3. Coduri pt culori (344)
  4. Cursuri limba engleza gratuite si lectii online (333)
  5. Gramatica limbii engleze - Prezentare Generala (332)