Blog de programación, errores, soluciones
Utilizando AJAX con XMLHttpRequest en laravel
Todos lo que están leyendo este artículo asumo que saben lo que hace AJAX, lo que no puedo asumir es que sepan como funciona aunque eso lo explicaré en un Artículo apartado no quiero que se vaya tanto este artículo tampoco.
GET
Antes de declarar las funciones que necesito para mostrar este ejemplo voy a necesitar una variable para que se le sea asignado el valor de XMLHttpRequest o ActiveXObject(Caso Internet Explorer)
http_request = false;
Vamos a la función que hará casi todo:
function peticion(url) {
http_request = false;
if (window.XMLHttpRequest) { // Crome, Mozilla, etc.
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('fallo no fue posible crear una instancia de xmlhttp');
return false;
}
http_request.onreadystatechange = contenido;
http_request.open('GET', url, true);
http_request.send();
}
Con esta función estoy haciendo la petición ahora necesito la función que procesara lo devuelto.
function contenido() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var contentdiv = document.getElementById("mycontent");
contentdiv.innerHTML=http_request.responseText;
} else {
alert('Hubo problemas con la petición.');
}
}
}
Por último tenemos que crear un controlador y una ruta la cual será la url cuando llamemos a la función petición en onclick.
Crearé un controlador HomeController solo para el ejemplo.
Project folderphp artisan make:controller HomeController
Al controlador que cree agréguele el siguiente método:
app/Http/Controllers/HomeController.phppublic function peticion(){
$message = "Este es el ejemplo para vainilla.js";
return $message;
}
la ruta para que vaya con el ejemplo le pondré de nombre javascriptAjax
routes/web.phpRoute::get('javascriptAjax','HomeController@peticion');
Para las vistas usaré las que use anteriormente en la parte de Axios pero un poco modificadas. A continuación el código:
-vista tochange.blade.php
<div id="mycontent">
@if(isset($message))
{{$message}}
@else
Debo cambiar esto
@endif
</div>
Nuestra vista ajaxexample.blade.php quedaría así.
resources/views/ajaxexample.blade.php<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Utilizando ajax con Vanilla.js</title>
<meta name="description" content="Utilizando ajax con Axios">
<meta name="author" content="Blastcoding">
<link rel="stylesheet">
</head>
<body>
<input type="button" name="" id="btnajax" class="btn btn-primary" role="button" onclick="peticion('/javascriptAjax')" value="click me">
@include("tochange")
<script src={{ asset('js/app.js')}}></script>
<script>
var http_request = false;
function peticion(url) {
http_request = false;
if (window.XMLHttpRequest) { // Crome, Mozilla, etc.
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('fallo no fue posible crear una instancia de xmlhttp');
return false;
}
http_request.onreadystatechange = contenido;
http_request.open('GET', url, true);
http_request.send();
}
function contenido() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('Hubo problemas con la petición.');
}
}
}
</script>
</body>
</html>
Como puedes ver aquí estarán las funciones de las cuales antes hemos hablado, el ejemplo ya es funcional cambia el texto que queríamos cambiar por «Este es el ejemplo para vainilla.js»
