Good Easter! I am trying to return an HTTP Request from a function, but it's not working how I thought it would. Now, the HTTP request is fine, in which I can show you right here:
const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
alert(eval(Http.responseText)[0]["meanings"][0]["partOfSpeech"])
}
As you can see, it alerts it multiple times, which is not what I want. Also, when I do it in a function:
var JSIMS = function() {
const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
return eval(Http.responseText)[0]["meanings"][0]["partOfSpeech"];
}
}
alert(JSIMS())
As you can see there, it alerts "undefined". ( In which I purposely made the function return the value and not alert it from inside of the function )
Please so me how to fix this with the function returning the value, and not alerting it from directly inside the function.
You can avoid multiple alert by adding a condition to check if the request status is DONE.
const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
if (Http.readyState == XMLHttpRequest.DONE) {
alert(eval(Http.responseText)[0]["meanings"][0]["partOfSpeech"])
}
}
The other option to return your response is to use a callback function to the method to handle the response from the api call as below.
function loadData(callback) {
const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.onreadystatechange = (e) => {
if (Http.readyState == XMLHttpRequest.DONE) {
callback(eval(Http.responseText)[0].meanings[0].partOfSpeech);
}
}
Http.open("GET", url);
Http.send();
}
loadData(myCustomFunction);
function myCustomFunction(data) {
console.log(data); /* Output - Verb */
}
Similarly we can use promise to return your data once the api responds
var JISM = () => {
return new Promise((resolve, reject)=>{
const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.onreadystatechange = (e) => {
if (Http.readyState == XMLHttpRequest.DONE) {
resolve(eval(Http.responseText)[0].meanings[0].partOfSpeech);
}
}
Http.onerror = () => reject(Http.statusText);
Http.open("GET", url);
Http.send();
});
}
JISM().then(data => {
console.log(data);
});
xhr.send should be used after xhr.onreadystatechange, but you aren't testing to see if(xhr.readyState === 4 && xhr.status === 200) anyways. In XHR2 you can avoid using a xhr.onreadystatechange, and using that condition, if you just do like:
function JSIMS(word){ // I don't like the name of the function... but
const xhr = new XMLHttpRequest;
xhr.open('GET', 'https://api.dictionaryapi.dev/api/v2/entries/en_US/'+word);
xhr.responseType = 'json';
return new Promise((resolve, reject)=>{
xhr.onload = function(){
resolve(this.response[0].meanings[0].partOfSpeech);
}
xhr.onerror = ()=>{
reject(new Error('load error'));
}
xhr.send();
});
}
JSIMS('hand').then(j=>{
console.log(j);
});
You should use the received data when ready state is done.
Try this and it works:
const Http = new XMLHttpRequest();
const url='https://api.dictionaryapi.dev/api/v2/entries/en_US/hand';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = () => {
if (Http.readyState === XMLHttpRequest.DONE) {
alert(eval(Http.responseText)[0].meanings[0].partOfSpeech);
}
}
Related
How can I get the url, title and img from the json I get through XMLHttpRequest?
const base_url = "https://api.jikan.moe/v3"
function random(){
return Math.floor(Math.random() * 99999);
}
function sendRequest(meyhod,base_url){
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest();
var id = random();
request.open('GET', `${base_url}/anime/${id}`);
request.responseType = 'json'
request.onreadystatechange = function () {
if (this.readyState === 4) {
if(this.status !== 200){
return testjs();
}
else{
request.onload = () =>{
resolve(request.response)
}}
}
};
request.send();
})
}
function testjs(){
sendRequest('GET', base_url)
.then(data => console.log(data))
.then(animepost)
}
function animepost(data){
console.log(data.image_url)
console.log(data.title)
console.log(data.url)
}
Perhaps I messed up the queries somewhere.
The arguments you pass to your sendRequest are very weird.
function sendRequest(meyhod,base_url){
You are not using methode plus you only you use the 'GET' method and baseUrl is accessible within the function.
You should be passing the id like this
function sendRequest(id){
that you are using here
request.open('GET', `${base_url}/anime/${id}`);\
and your testjs should look somthing like this
function testjs(){
sendRequest(theIdYouWantToFetch)
How can I check if the response received from XMLHTTPRequest has a particular class or not?
async function swipeAction(currentElementObj) {
var cardId = currentElementObj.getAttribute("value");
var dataString = {'card': cardId};
let response = await new Promise(resolve => {
var xhr = new XMLHttpRequest();
xhr.open("POST", "processes/explore.php", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(dataString));
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
// I WANT TO CHECK SOMETHING LIKE THIS
if(xhr.response.getElementById("matched").classList.contains('matched'))
alert(xhr.response.getElementById("matched").classList);
}
}
});
}
In the response received, I want to check if the element with id matched has a class name matched or not. However, the above code isn't working. What should be the proper approach here?
If you're expecting plain text/html response from the server then processing it may look like that:
async function swipeAction(currentElementObj) {
var cardId = currentElementObj.getAttribute("value");
var dataString = { card: cardId };
let response = await new Promise((resolve, reject) => {
try {
var xhr = new XMLHttpRequest();
xhr.open("POST", "processes/explore.php", true);
xhr.setRequestHeader("Content-Type", "application/json");
// add responseType = "document" for response to be parsed into DOM
xhr.responseType = "document";
// override response mime type (in case your server sends text/plain)
xhr.overrideMimeType("text/html");
xhr.send(JSON.stringify(dataString));
xhr.onreadystatechange = function () {
// check for non-empty responseXML property
if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseXML) {
const matched = xhr.responseXML.getElementById("matched");
if (!matched) return reject("Element not found in response");
if (matched) {
alert(matched.classList.contains("matched"));
resolve(true);
}
} else {
return reject("Incompatible response format");
}
};
} catch (e) {
reject(e.toString());
}
});
}
If I use a simple post xhr request its working to send post parameters:
var http = new XMLHttpRequest();
var url = "example url";
var params = "limit=2";
http.open("post", url);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
But If I use promise with parameters (data) then I get undefined index php error, with promise I cant send parameters? or I miss something...
function postAjaxCall(url, data) {
// return a new promise.
return new Promise(function(resolve, reject) {
// do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('post', url);
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
}
else {
reject(Error(req.statusText));
}
};
// handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// make the request
req.send(data);
//same thing if i hardcode like
//req.send("limit=2");
});
};
and I make the request
postAjaxCall('example url', "limit=2").then(
function(response) {
document.getElementById('example').innerHTML = response;
},
function(error) {
console.error("Failed!", error);
});
If you check your request header at your server side, you will see that your request was sent as text/plain. To make PHP see the request as a $_POST you will need to set the request header to 'application/x-www-form-urlencoded', which should come after xhr.open() and before xhr.onload. https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started shows a basic Ajax usage.
function postAjaxCall(url, data) {
// return a new promise.
return new Promise(function(resolve, reject) {
// do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('post', url);
//NOW WE TELL THE SERVER WHAT FORMAT OF POST REQUEST WE ARE MAKING
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
reject(Error(req.statusText));
}
};
// handle network errors
req.onerror = function() {
reject(Error("Network Error"));
}; // make the request
req.send(data);
//same thing if i hardcode like //req.send("limit=2");
});
};
Hi I am trying to build a single JavaScript file which handles all the API requests for me. Then use this file to make all the XHR request. As the XHR is async the function would return before the onreadystatechange gets executed. I tried something show below but its not working can someone tell me how to achieve this ?
var apiFactory={};
var Req = new XMLHttpRequest();
apiFactory.sendRequest=function(URL,type,params) {
Req.open("GET", "<get url>", true);
Req.send();
return Req.onreadystatechange = function () {
if (Req.readyState == 4 && Req.status == 200) {
console.log( JSON.parse(Req.responseText));
return JSON.parse(Req.responseText);
}
};
};
module.exports=apiFactory;
You can use ES6 promises:
var apiFactory={};
apiFactory.sendRequest=function(URL,type,params) {
return new Promise(function(resolve, reject) {
var Req = new XMLHttpRequest();
Req.open("GET", URL, true);
Req.send();
return Req.onreadystatechange = function () {
if (Req.readyState == 4 && Req.status == 200) {
console.log( JSON.parse(Req.responseText));
resolve(JSON.parse(Req.responseText));
}
};
});
};
apiFactory.sendRequest('https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49').then((res)=>{
console.log('result:',res)
})
//module.exports=apiFactory;
I'm creating a javascript library for a project im doing that makes rest calls based on params you feed it. This is the second day of the project and I'm looking for advice. If I set my request to be async it returns my request but i can't access the object value, if I set it to false in the call it returns an object.
I read the stack articles on async js request, and I can't seem to wrap my head around call backs and promises.
this works:
request.open("DELETE", url, false);
this doesn't:
request.open("DELETE", url, true);
(function(window){
function defineCynergi(){
var Cynergi = {};
Cynergi.get = function(url){
var request = makeHttpObject();
request.open("GET", url, false);
request.send(null);
return JSON.parse(request.responseText);
}
Cynergi.delete = function(url){
var request = new XMLHttpRequest();
request.open("DELETE", url, false);
request.setRequestHeader('Accept', 'application/localhost.com:3000+json; version=1');
request.send();
deleteStatus = request.statusText;
return deleteStatus;
}
Cynergi.insert = function(url, data){
var request = new XMLHttpRequest();
request.open("POST", url, false);
request.setRequestHeader('Accept', 'application/localhost.com:3000+json; version=1');
request.send(JSON.stringify(data));
sentStatus = request.statusText;
return sentStatus;
}
Cynergi.update = function(url, data){
var request = new XMLHttpRequest();
request.open("PATCH", url, false);
request.setRequestHeader('Accept', 'application/localhost:3000+json; version=1');
request.send(JSON.stringify(data));
updateStatus = request.statusText;
console.log(request);
return updateStatus;
}
return Cynergi;
}
if(typeof(Cynergi) === 'undefined'){
window.Cynergi = defineCynergi();
}
})(window);
function makeHttpObject() {
try {return new XMLHttpRequest();}
catch (error) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch (error) {}
try {return new ActiveXObject("Microsoft.XMLHTTP");}
catch (error) {}
throw new Error("Could not create HTTP request object.");
}
You should do something like this:
var request = new XMLHttpRequest();
request.open('GET', yourURI, true); // true = async
request.send();
request.onreadystatechange(function () {
if(request.readyState === 4){
/*ENTER CODE THAT SHOULD BE EXECUTED WHEN REQUEST IS DONE
(OPTIONAL)*/
switch(request.status) {
case 200: //DO STUFF
case 404: //DO OTHER STUFF
}
}
});
Or this:
var request = new XMLHttpRequest();
request.open('GET', yourURI, true);
request.addEventListener('load', function () {
//CODE THAT SHOULD BE EXECUTED WHEN SUCCES.
});
request.addEventListener('error', function () {
//CODE THAT SHOULD BE EXECUTED WHEN ERROR RESPONE.
});
request.send();