uso type parametros example ejemplos con javascript ajax

javascript - type - jquery ajax post



¿Cómo hacer una llamada AJAX sin jQuery? (22)

¿Cómo hacer una llamada AJAX usando JavaScript, sin usar jQuery?


Bueno, es sólo un proceso fácil de 4 pasos,

Espero que ayude

Step 1. Almacena la referencia al objeto XMLHttpRequest

var xmlHttp = createXmlHttpRequestObject();

Step 2. Recuperar el objeto XMLHttpRequest

function createXmlHttpRequestObject() { // will store the reference to the XMLHttpRequest object var xmlHttp; // if running Internet Explorer if (window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlHttp = false; } } // if running Mozilla or other browsers else { try { xmlHttp = new XMLHttpRequest(); } catch (e) { xmlHttp = false; } } // return the created object or display an error message if (!xmlHttp) alert("Error creating the XMLHttpRequest object."); else return xmlHttp; }

Step 3. Haz una solicitud HTTP asíncrona usando el objeto XMLHttpRequest

function process() { // proceed only if the xmlHttp object isn''t busy if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { // retrieve the name typed by the user on the form item = encodeURIComponent(document.getElementById("input_item").value); // execute the your_file.php page from the server xmlHttp.open("GET", "your_file.php?item=" + item, true); // define the method to handle server responses xmlHttp.onreadystatechange = handleServerResponse; // make the server request xmlHttp.send(null); } }

Step 4. ejecuta automáticamente cuando se recibe un mensaje del servidor.

function handleServerResponse() { // move forward only if the transaction has completed if (xmlHttp.readyState == 4) { // status of 200 indicates the transaction completed successfully if (xmlHttp.status == 200) { // extract the XML retrieved from the server xmlResponse = xmlHttp.responseText; document.getElementById("put_response").innerHTML = xmlResponse; // restart sequence } // a HTTP status different than 200 signals an error else { alert("There was a problem accessing the server: " + xmlHttp.statusText); } } }


¿Qué te parece esta versión en plano ES6 / ES2015 ?

function get(url) { return new Promise((resolve, reject) => { const req = new XMLHttpRequest(); req.open(''GET'', url); req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText)); req.onerror = (e) => reject(Error(`Network Error: ${e}`)); req.send(); }); }

La función devuelve una promise . Aquí hay un ejemplo sobre cómo usar la función y manejar la promesa que devuelve:

get(''foo.txt'') .then((data) => { // Do stuff with data, if foo.txt was successfully loaded. }) .catch((err) => { // Do stuff on error... });

Si necesita cargar un archivo json, puede usar JSON.parse() para convertir los datos cargados en un objeto JS.

También puede integrar req.responseType=''json'' en la función, pero desafortunadamente no hay soporte de IE , así que me JSON.parse() con JSON.parse() .


Aquí hay un JSFiffle sin JQuery

http://jsfiddle.net/rimian/jurwre07/

function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); var url = ''http://echo.jsontest.com/key/value/one/two''; xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == XMLHttpRequest.DONE) { if (xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } else if (xmlhttp.status == 400) { console.log(''There was an error 400''); } else { console.log(''something else other than 200 was returned''); } } }; xmlhttp.open("GET", url, true); xmlhttp.send(); }; loadXMLDoc();


Con "vainilla" JavaScript:

<script type="text/javascript"> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4 if (xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } else if (xmlhttp.status == 400) { alert(''There was an error 400''); } else { alert(''something else other than 200 was returned''); } } }; xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send(); } </script>

Con jQuery:

$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); } });


Desde youMightNotNeedJquery.com + JSON.stringify

var request = new XMLHttpRequest(); request.open(''POST'', ''/my/url'', true); request.setRequestHeader(''Content-Type'', ''application/x-www-form-urlencoded; charset=UTF-8''); request.send(JSON.stringify(data));


El uso de @Petah responde como un gran recurso de ayuda. He escrito mi propio módulo AJAX aquí llamado AJ para abreviar: https://github.com/NightfallAlicorn/AJ No todo está probado todavía, pero funciona para mí con get y post para JSON. Eres libre de copiar y usar la fuente como desees. No había visto todavía una respuesta aceptada, así que supongo que está bien publicar.


Estaba buscando una forma de incluir promesas con ajax y excluir a jQuery. Hay un artículo sobre HTML5 Rocks que habla sobre promesas de ES6 (podría hacer un polifill con una biblioteca de promesas como Q ) y luego usar el fragmento de código que copié del artículo.

function get(url) { // Return a new promise. return new Promise(function(resolve, reject) { // Do the usual XHR stuff var req = new XMLHttpRequest(); req.open(''GET'', url); req.onload = function() { // This is called even on 404 etc // so check the status if (req.status == 200) { // Resolve the promise with the response text resolve(req.response); } else { // Otherwise reject with the status text // which will hopefully be a meaningful error reject(Error(req.statusText)); } }; // Handle network errors req.onerror = function() { reject(Error("Network Error")); }; // Make the request req.send(); }); }

Nota: También escribí un artículo sobre esto .


Esto puede ayudar:

function doAjax(url, callback) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { callback(xmlhttp.responseText); } } xmlhttp.open("GET", url, true); xmlhttp.send(); }


HTML:

<!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","1.php?id=99freebies.blogspot.com",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>

PHP:

<?php $id = $_GET[id]; print "$id"; ?>


Puede obtener el objeto correcto de acuerdo con el navegador con

function getXmlDoc() { var xmlDoc; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlDoc = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlDoc = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlDoc; }

Con el objeto correcto, un GET podría resumirse para:

function myGet(url, callback) { var xmlDoc = getXmlDoc(); xmlDoc.open(''GET'', url, true); xmlDoc.onreadystatechange = function() { if (xmlDoc.readyState === 4 && xmlDoc.status === 200) { callback(xmlDoc); } } xmlDoc.send(); }

Y un POST para:

function myPost(url, data, callback) { var xmlDoc = getXmlDoc(); xmlDoc.open(''POST'', url, true); xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlDoc.onreadystatechange = function() { if (xmlDoc.readyState === 4 && xmlDoc.status === 200) { callback(xmlDoc); } } xmlDoc.send(data); }


Puede utilizar la siguiente función:

function callAjax(url, callback){ var xmlhttp; // compatible with IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ callback(xmlhttp.responseText); } } xmlhttp.open("GET", url, true); xmlhttp.send(); }

Puedes probar soluciones similares en línea en estos enlaces:


Sé que esta es una pregunta bastante antigua, pero ahora hay una API mejor disponible de forma nativa en los navegadores más nuevos . El método fetch() permite hacer solicitudes web. Por ejemplo, para solicitar algunos json de /get-data :

var opts = { method: ''GET'', body: ''json'', headers: {} }; fetch(''/get-data'', opts).then(function (response) { return response.json(); }) .then(function (body) { //doSomething with body; });

Vea here para más detalles.


Si no quieres incluir JQuery, probaría algunas bibliotecas AJAX ligeras.

Mi favorito es reqwest Solo tiene 3.4kb y está muy bien construido: https://github.com/ded/Reqwest

Aquí hay una muestra de solicitud GET con reqwest:

reqwest({ url: url, method: ''GET'', type: ''json'', success: onSuccess });

Ahora, si quieres algo aún más liviano, probaría microAjax a solo 0.4kb: https://code.google.com/p/microajax/

Este es todo el código aquí:

function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

Y aquí hay un ejemplo de llamada:

microAjax(url, onSuccess);


Usando el siguiente fragmento de código, puedes hacer cosas similares con bastante facilidad, como esto:

ajax.get(''/test.php'', {foo: ''bar''}, function() {});

Aquí está el fragmento:

var ajax = {}; ajax.x = function () { if (typeof XMLHttpRequest !== ''undefined'') { return new XMLHttpRequest(); } var versions = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp" ]; var xhr; for (var i = 0; i < versions.length; i++) { try { xhr = new ActiveXObject(versions[i]); break; } catch (e) { } } return xhr; }; ajax.send = function (url, callback, method, data, async) { if (async === undefined) { async = true; } var x = ajax.x(); x.open(method, url, async); x.onreadystatechange = function () { if (x.readyState == 4) { callback(x.responseText) } }; if (method == ''POST'') { x.setRequestHeader(''Content-type'', ''application/x-www-form-urlencoded''); } x.send(data) }; ajax.get = function (url, data, callback, async) { var query = []; for (var key in data) { query.push(encodeURIComponent(key) + ''='' + encodeURIComponent(data[key])); } ajax.send(url + (query.length ? ''?'' + query.join(''&'') : ''''), callback, ''GET'', null, async) }; ajax.post = function (url, data, callback, async) { var query = []; for (var key in data) { query.push(encodeURIComponent(key) + ''='' + encodeURIComponent(data[key])); } ajax.send(url, callback, ''POST'', query.join(''&''), async) };


Utilice XMLHttpRequest .

Solicitud GET simple

httpRequest = new XMLHttpRequest() httpRequest.open(''GET'', ''http://www.example.org/some.file'') httpRequest.send()

Solicitud POST simple

httpRequest = new XMLHttpRequest() httpRequest.open(''POST'', ''http://www.example.org/some/endpoint'') httpRequest.send(''some data'')

Podemos especificar que la solicitud debe ser asíncrona (verdadera), predeterminada o síncrona (falsa) con un tercer argumento opcional.

// Make a synchronous GET request httpRequest.open(''GET'', ''http://www.example.org/some.file'', false)

Podemos establecer encabezados antes de llamar a httpRequest.send()

httpRequest.setRequestHeader(''Content-Type'', ''application/x-www-form-urlencoded'');

Podemos manejar la respuesta configurando httpRequest.onreadystatechange en una función antes de llamar a httpRequest.send()

httpRequest.onreadystatechange = function(){ // Process the server response here. if (httpRequest.readyState === XMLHttpRequest.DONE) { if (httpRequest.status === 200) { alert(httpRequest.responseText); } else { alert(''There was a problem with the request.''); } } }


Viejo pero lo intentaré, tal vez alguien encuentre útil esta información.

Esta es la cantidad mínima de código que necesita para realizar una solicitud GET y obtener algunos datos con formato JSON . Esto se aplica solo a los navegadores modernos como las últimas versiones de Chrome , FF , Safari , Opera y Microsoft Edge .

const xhr = new XMLHttpRequest(); xhr.open(''GET'', ''https://example.com/data.json''); // by default async xhr.responseType = ''json''; // in which format you expect the response to be xhr.onload = function() { if(this.status == 200) {// onload called even on 404 etc so check the status console.log(this.response); // No need for JSON.parse() } }; xhr.onerror = function() { // error }; xhr.send();

También puedes ver la nueva API Fetch, que es un reemplazo basado en la promesa de la API XMLHttpRequest .


en JavaScript simple en el navegador:

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE ) { if(xhr.status == 200){ console.log(xhr.responseText); } else if(xhr.status == 400) { console.log(''There was an error 400''); } else { console.log(''something else other than 200 was returned''); } } } xhr.open("GET", "mock_data.json", true); xhr.send();

O si desea usar Browserify para agrupar sus módulos usando node.js. Puedes usar superagent :

var request = require(''superagent''); var url = ''/mock_data.json''; request .get(url) .end(function(err, res){ if (res.ok) { console.log(''yay got '' + JSON.stringify(res.body)); } else { console.log(''Oh no! error '' + res.text); } });


Una muy buena solución con javascript puro está aquí

/*create an XMLHttpRequest object*/ let GethttpRequest=function(){ let httpRequest=false; if(window.XMLHttpRequest){ httpRequest =new XMLHttpRequest(); if(httpRequest.overrideMimeType){ httpRequest.overrideMimeType(''text/xml''); } }else if(window.ActiveXObject){ try{httpRequest =new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ httpRequest =new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } if(!httpRequest){return 0;} return httpRequest; } /*Defining a function to make the request every time when it is needed*/ function MakeRequest(){ let uriPost ="myURL"; let xhrPost =GethttpRequest(); let fdPost =new FormData(); let date =new Date(); /*data to be sent on server*/ let data = { "name" :"name", "lName" :"lName", "phone" :"phone", "key" :"key", "password" :"date" }; let JSONdata =JSON.stringify(data); fdPost.append("data",JSONdata); xhrPost.open("POST" ,uriPost, true); xhrPost.timeout = 9000;/*the time you need to quit the request if it is not completed*/ xhrPost.onloadstart = function (){ /*do something*/ }; xhrPost.onload = function (){ /*do something*/ }; xhrPost.onloadend = function (){ /*do something*/ } xhrPost.onprogress =function(){ /*do something*/ } xhrPost.onreadystatechange =function(){ if(xhrPost.readyState < 4){ }else if(xhrPost.readyState === 4){ if(xhrPost.status === 200){ /*request succesfull*/ }else if(xhrPost.status !==200){ /*request failled*/ } } } xhrPost.ontimeout = function (e){ /*you can stop the request*/ } xhrPost.onerror = function (){ /*you can try again the request*/ }; xhrPost.onabort = function (){ /*you can try again the request*/ }; xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary"); xhrPost.setRequestHeader("Content-disposition", "form-data"); xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest"); xhrPost.send(fdPost); } /*PHP side <?php //check if the variable $_POST["data"] exists isset() && !empty() $data =$_POST["data"]; $decodedData =json_decode($_POST["data"]); //show a single item from the form echo $decodedData->name; ?> */ /*Usage*/ MakeRequest();


Una pequeña combinación de un par de los ejemplos a continuación y creó esta pieza simple:

function ajax(url, method, data, async) { method = typeof method !== ''undefined'' ? method : ''GET''; async = typeof async !== ''undefined'' ? async : false; if (window.XMLHttpRequest) { var xhReq = new XMLHttpRequest(); } else { var xhReq = new ActiveXObject("Microsoft.XMLHTTP"); } if (method == ''POST'') { xhReq.open(method, url, async); xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhReq.send(data); } else { if(typeof data !== ''undefined'' && data !== null) { url = url+''?''+data; } xhReq.open(method, url, async); xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhReq.send(null); } //var serverResponse = xhReq.responseText; //alert(serverResponse); } // Example usage below (using a string query): ajax(''http://www.google.com''); ajax(''http://www.google.com'', ''POST'', ''q=test'');

O si sus parámetros son objeto (s) - ajuste de código adicional menor:

var parameters = { q: ''test'' } var query = []; for (var key in parameters) { query.push(encodeURIComponent(key) + ''='' + encodeURIComponent(parameters[key])); } ajax(''http://www.google.com'', ''POST'', query.join(''&''));

Ambos deben ser totalmente compatibles con la versión de navegador.


var xhReq = new XMLHttpRequest(); xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false); xhReq.send(null); var serverResponse = xhReq.responseText; alert(serverResponse); // Shows "15"

http://ajaxpatterns.org/XMLHttpRequest_Call


<html> <script> var xmlDoc = null ; function load() { if (typeof window.ActiveXObject != ''undefined'' ) { xmlDoc = new ActiveXObject("Microsoft.XMLHTTP"); xmlDoc.onreadystatechange = process ; } else { xmlDoc = new XMLHttpRequest(); xmlDoc.onload = process ; } xmlDoc.open( "GET", "background.html", true ); xmlDoc.send( null ); } function process() { if ( xmlDoc.readyState != 4 ) return ; document.getElementById("output").value = xmlDoc.responseText ; } function empty() { document.getElementById("output").value = ''<empty>'' ; } </script> <body> <textarea id="output" cols=''70'' rows=''40''><empty></textarea> <br></br> <button onclick="load()">Load</button> &nbsp; <button onclick="empty()">Clear</button> </body> </html>


var load_process = false; function ajaxCall(param, response) { if (load_process == true) { return; } else { if (param.async == undefined) { param.async = true; } if (param.async == false) { load_process = true; } var xhr; xhr = new XMLHttpRequest(); if (param.type != "GET") { xhr.open(param.type, param.url, true); if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) { } else if (param.contentType != undefined || param.contentType == true) { xhr.setRequestHeader(''Content-Type'', param.contentType); } else { xhr.setRequestHeader(''Content-type'', ''application/x-www-form-urlencoded''); } } else { xhr.open(param.type, param.url + "?" + obj_param(param.data)); } xhr.onprogress = function (loadTime) { if (param.progress != undefined) { param.progress({ loaded: loadTime.loaded }, "success"); } } xhr.ontimeout = function () { this.abort(); param.success("timeout", "timeout"); load_process = false; }; xhr.onerror = function () { param.error(xhr.responseText, "error"); load_process = false; }; xhr.onload = function () { if (xhr.status === 200) { if (param.dataType != undefined && param.dataType == "json") { param.success(JSON.parse(xhr.responseText), "success"); } else { param.success(JSON.stringify(xhr.responseText), "success"); } } else if (xhr.status !== 200) { param.error(xhr.responseText, "error"); } load_process = false; }; if (param.data != null || param.data != undefined) { if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) { xhr.send(param.data); } else { xhr.send(obj_param(param.data)); } } else { xhr.send(); } if (param.timeout != undefined) { xhr.timeout = param.timeout; } else { xhr.timeout = 20000; } this.abort = function (response) { if (XMLHttpRequest != null) { xhr.abort(); load_process = false; if (response != undefined) { response({ status: "success" }); } } } } } function obj_param(obj) { var parts = []; for (var key in obj) { if (obj.hasOwnProperty(key)) { parts.push(encodeURIComponent(key) + ''='' + encodeURIComponent(obj[key])); } } return parts.join(''&''); }

mi llamada ajax

var my_ajax_call=ajaxCall({ url: url, type: method, data: {data:value}, dataType: ''json'', async:false,//synchronous request. Default value is true timeout:10000,//default timeout 20000 progress:function(loadTime,status) { console.log(loadTime); }, success: function (result, status) { console.log(result); }, error :function(result,status) { console.log(result); } });

para abortar solicitudes anteriores

my_ajax_call.abort(function(result){ console.log(result); });