- Lucru cu csrf_token care expira

Ajax (Asynchronous JavaScript and XML) permite aplicatiei web din browser sa trimita si sa primeasca date de la server in mod asincron, fara sa reincarce pagina.
Ajax foloseste JavaScript pe partea de client (in browser) si un script pe partea de server (in acest caz PHP) care primeste cererea Ajax si trimite un raspuns inapoi la JavaScript.

Cand se trimit cereri POST /PUT /DELETE la framework-ul Laravel, acesta verifica un "csrf_token" care este un sir generat automat de Laravel.
Astfel, cand construiti aplicatii Ajax cu Laravel, trebuie sa atasati sirul CSRF la fiecare apel POST, ca o valoare in datele transmise cu POST, sau intr-un header trimis serverului.
Functia csrf_token() returneaza sirul CSRF. Pentru a-l folosi in scriptul Ajax, adaugati, spre exemplu, "csrf_token" intr-o variabila JavaScript, in sectiunea HEAD a fisierului template:
<head>
<title>Page Title</title>
<script>
var csrf_token ='{{csrf_token()}}';
</script>
</head>
Apoi, puteti adauga valoarea variabilei csrf_token in apelul Ajax.

- Pentru a adauga "csrf_token" in datele POST, atasati-l la numele "_token" in datele trimis catre server:
function ajax(){
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object
  var data ='_token='+ csrf_token;
  //...
}
- Sau trimiteti 'csrf_token' intr-un header cu "X-CSRF-TOKEN":
function ajax(){
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  req.open('POST', 'ajax/send', true); // set the request

  //adds headers
  req.setRequestHeader('Content-type', 'application/x-www-form-urlenecodd');
  req.setRequestHeader('X-CSRF-TOKEN', '{{csrf_token()}}');
  //...
}
- Cu jQuery:
headers: {
  'X-CSRF-TOKEN': '+ csrf_token
},

Exemplu Laravel - Ajax

1. Creati un fisier view: resources/views/test_ajax.blade.php si copiati codul urmator in acest fisier.
<!doctype html>
<html lang="en">
<head>
<title>Laravel Ajax Test Example</title>
<script>
var csrf_token ='{{csrf_token()}}';
</script>
</head>
<body>
<h1>Laravel Ajax Test Example</h1>
<div id='see_resp'>
Acest mesaj va fi inlocuit cu un raspuns Ajax. Un array JSON trimis de la server.<br>
Apasati pe buton pentru a inlocui mesajul.
</div>
<button id='btn_ajax'>Test Ajax</button>

<script>
var see_resp = document.getElementById('see_resp');

//sends data to server, via POST, and displays the received answer
function ajaxReq(){
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  //pairs index=value with data to be sent to server (including csrf_token)
  var data ='_token={{csrf_token()}}&id=1';

  req.open('POST', 'ajax/send', true); // set the request

  //adds header for POST request
  req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  req.send(data); //sends data

  // If the response is successfully received, will be added in #see_resp
  req.onreadystatechange = function(){
    if(req.readyState ==4){
//    alert(req.responseText); //just for debug
      see_resp.innerHTML = req.responseText;
    }
  }
}

//register click event on #btn_ajax
document.getElementById('btn_ajax').addEventListener('click', ajaxReq);
</script>
</body>
</html>
Daca folositi jQuery, schimbati codul din elementul <script> care e inainte de </body> cu acest script jQuery:
<script>
function ajaxReq(){
  $.ajax({
    type:'POST',
    url:'/ajax/send',
    headers: {
      'X-CSRF-TOKEN': csrf_token
    },
    data:'id='+ 1,
    success:function(resp){
      $('#see_resp').html(JSON.stringify(resp));
    }
  });
}

$('#btn_ajax').on('click', ajaxReq);
</script>
2. Acum vom crea un controller numit AjaxController. Copiati urmatorul cod in fisierul app/Http/Controllers/AjaxController.php.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class AjaxController extends Controller {

  //Responds to requests to /ajax
  //returns view() response
  public function index(Request $request){
    return view('test_ajax');
  }

  //Responds to post requests to /ajax/send
  //receives the $request instance
  //returns response with a JSON array, with input id, and Laravel version
  public function send(Request $request){
    //if required fields are received, and not empty
    if($request->has(['id']) && $request->id!=null){
      global $app;
      return response()->json(['id'=>$request->id, 'version'=>$app::VERSION]);
    }
    else return 'Not valid id.';
  }
}
3. Pentru a fixa Rutele, adaugati urmatoarele linii in routes/web.php.
//shows the ajax test page
Route::get('/ajax', 'AjaxController@index');

//when ajax request
Route::post('/ajax/send', 'AjaxController@send');
4. Accesati urmatoarea adresa URL pentru a testa acest exemplu.
//localhost:8000/ajax
- Va afisa o pagina cu un continut ca in acest Demo:
Laravel Ajax Test Example
Acest mesaj va fi inlocuit cu un raspuns Ajax. Un array JSON trimis de la server.
Apasati pe buton pentru a inlocui mesajul.

Lucru cu csrf_token care expira

Ca sa pastrati o pagina activa cu Ajax mai mult de 120 de minute (care este durata implicita a sesiunii Laravel), trebuie sa reinitializati valoarea csrf_token in javascript, deoarece si acel token va expira.
- Spre exemplu, puteti folosi acest script care obtine si stocheaza in JavaScript sirul 'csrf_token' la fiecare 30 de minute.

1. In fisierul view:
<script>
//Laravel csrf_token used in Ajax requests
var csrf_token ='{{csrf_token()}}';

//get csrf_token from Laravel
function getCsrf(){
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  req.open('POST', '/ajax/getcsrf', true); // set the request

  //adds header for POST request
  req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  req.setRequestHeader('X-CSRF-TOKEN', csrf_token);

  req.send('_token={{csrf_token()}}'); //sends csrf_token

  // If the response is successfully received, sets csrf_token
  req.onreadystatechange = function(){
    if(req.readyState ==4){
      var resp = JSON.parse(req.responseText);
      if(resp.csrf) csrf_token = resp.csrf;
    }
  }
}

//calls getCsrf() every 30 mintes
window.setInterval(getCsrf, 30*60*1000);
</script>
- Sau cu jQuery:
<script>
//Laravel csrf_token used in Ajax requests
var csrf_token ='{{csrf_token()}}';

//get csrf_token from Laravel
function getCsrf(){
  $.ajax({
    type:'POST',
    url:'/ajax/getcsrf',
    headers: {
      'X-CSRF-TOKEN': csrf_token
    },
    data:'_token='+ csrf_token,
    success:function(resp){
      if(resp.csrf) csrf_token = resp.csrf;
    }
  });
}

//calls getCsrf() every 30 minutes
window.setInterval(getCsrf, 30*60*1000);
</script>
2. In routes/web.php adaugati acest Route:
//ajax request for csrf_token. Returns json array with csrf_token value
Route::post('/ajax/getcsrf', function(){
  return response()->json(['csrf'=>csrf_token()]);
});
- De asemenea, puteti sa mariti durata sesiunii schimband valoarea cheii 'lifetime' in fisierul config/session.php.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Laravel Ajax tutorial

Last accessed pages

  1. Scripturi JavaScript (43)
  2. Formate text (320)
  3. Butterfly Kyodai (1387)
  4. Zuma Deluxe (1543)
  5. Verbe frazale din limba Engleza (305)

Popular pages this month

  1. Bubbles3 (2202)
  2. Gramatica limbii engleze - Prezentare Generala (1717)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (1563)
  4. Zuma Deluxe (1543)
  5. Butterfly Kyodai (1387)