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:
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.