javascript - type - jquery ajax post

¿Cómo hacer una llamada AJAX sin jQuery?

Question

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

Answer 1

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);
}
}
}

Answer 2

¿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() .

Answer 3

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();

Answer 4

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");
}
});

Answer 5

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));

Answer 6

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.

Answer 7

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 .

Answer 8

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();
}

Answer 9

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";
?>

Answer 10

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);
}

Answer 11

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:

• https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first
• https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

Answer 12

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.

Answer 13

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);

Answer 14

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)
};

Answer 15

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.'');
}
}
}

Answer 16

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 .

Answer 17

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);
}
});

Answer 18

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();

Answer 19

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.

Answer 20

 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

Answer 21

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

Answer 22

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);
});