I am using below code to capture response but unable to get, please let me know what I am missing here.
function testcall() {
var request = new XMLHttpRequest();
request.open('GET', 'http://demo8951713.mockable.io/fusionchart', true);
request.send();
var response = this.responseText;
alert(response);
}
testcall()
You have two problems.
First, this (in the context you are using it) does not refer to your XHR object.
Second, you are trying to read the response as soon as the request has been sent. You have to wait until the browser has received the response!
request.addEventListener("load", function () {
var response = this.responseText;
alert(response);
});
That change (moving the code to an event handler) also puts this in a context where it refers to the correct object.
Once you have fixed this, you are likely to want to try to return the value. Before you do, read this question.
you are missing the callback function
request.onreadystatechange = function() {
if (xhr.readyState === 4) {
callback(xhr.response);
}
}
for more details, refer https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response#Example
Related
I don't know why this function is returning undefined. Please help me... Run Snippet
function xhr(url) {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
return (this.response);
}
});
xhr.open("GET", url);
xhr.send();
}
let arr = xhr('https://reqres.in/api/users?page=2');
console.log(arr);
This is very very simple, Maybe you're new to Javascript, If you are not aware Js is an asynchronous language, it means that it would not block or wait for any function to complete which might be time consuming ( in this case a request to the server), This helps it to process other things meanwhile the request is taking place.
So in your case, it's creating the request to the server, but at the same time continues to execute your function and return the default value, i.e undefined, You can pass a callback to be called when the request is completed.
function callWhenFinished(arr) {
console.log(arr);
}
function xhr(url) {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.addEventListener("readystatechange", function() {
if (this.readyState === this.DONE) {
callWhenFinished(this.response); // callback
}
});
xhr.open("GET", url);
xhr.send();
}
xhr('https://reqres.in/api/users?page=2');
you trying to make async request, but expect that it will work in synchronous way.
The way you solve your problem is:
use callbacks
use promises
use async/await (that's just wrapper of of promises)
i recommend you to use promises instead of XMLHttpRequest. it's easy to understand and it's modern way to work with requests.
related links here:
https://www.w3schools.com/js/js_callback.asp
https://www.w3schools.com/js/js_async.asp
What my purpose is below
Visting a web and the js.file in this web will load php file, and it will return data to html.
It's meaning every time when I reload web, I will get newest data.
I have try this in js.file
let XML = new XMLHttpRequest();
XML.open('post', url, true);
XML.send('mydata');
then use responseText to get data I want
Indeed, I don't need send any data.
I can do what I want to do, but I am not sure this way is right or not.
Because I think ajax should not use in this case, it must be send something and return something.
What you are saying is you only want to get data without sending anything which is called a http get request, you can do that as below.
function get(url)
{
var xm = new XMLHttpRequest();
// false for synchronous
xm.open("GET",url,false);
xm.send(null);
return xm.responseText;
}
console.log(get('your Url'));
You need to specify the url of your Http Endpoint ( Back-End ).
If your are making a asynchronous request then below code works,,
function get(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
// true for asynchronous
xmlHttp.open("GET", theUrl, true);
xmlHttp.send(null);
}
get('your url',(responseText)=>{
console.log(responsetext);
});
I want to make a callback function with returned value in XMLHttpRequest.
Ok so I can make it with $.get (example to show what I want to achieve).
$.get("/SomeFunction/", function (data) {
alert(data);
});
and I want to make the same with XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open("POST", "/SomeFunction/", true);
xhr.send();
I tried many ways to get the data value in XMLHttpRequest but I dont know how to make such working callback function. Any tips?
Ok, if someone will need it in the future, I found a solution:
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
We can create XMLHttpRequest object and then can use it later for another request like :-
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){ } // something
xhr.send(null);
There will be a search box and when we enter something in it, it sends an ajax request, but if the user entered more so we will cancel that previous ajax request and create new.
If we want to send another ajax request by same object, we can create an xhr object for that search box to be sure that there will be only one ajax request at a time so if we need to send another request, will will do like :-
xhr.abort()
xhr.open()
xhr.send(null);
I'm using jQuery for portability across browsers, and I want something similar to the above, meaning an XHR (or wrapped XHR) object, that can be used again and again and can also cancel previous request.
How we can do that in jQuery ?
Try using a function to return $.get() , .abort()
var current;
var request = function(url) {current = $.get(url); return current};
request(url); current.abort();
request(url).then(function(data) {
// do stuff
}, function err(jqxhr, textStatus, errorThrown) {
// do stuff with error
});
I'm trying to find a function that return HTTP Status Code from an URL, and then "make something" based on the returned statuses (404, 416, 200 etc...)
Can someone help me? I've tried the other functions posted here on StackOverflow but anyone was usefull for my purpose.
I need to integrate this function inside my PlayFramework web-app.
Thanks a lot
Can you try the following ..?
function getStatus(url) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4){
request.status;//this contains the status code
}
};
request.open("GET", url , true);
request.send(null);
}