Deprecation Synchronous XMLHttpRequest - javascript

I see this error: "[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.", on this code:
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'http://www.mywebsite.com', false);
request.send();
What should I replace the instructions with because they are deprecated?

you just need to change
request.open('GET', 'http://www.mywebsite.com', false);
to
request.open('GET', 'http://www.mywebsite.com', true);
This will make the request operate asynchronously, meaning the code after it is sent will execute immediately instead of waiting for the request to complete. You can then use an event listener to tell the request what code to run when it's complete.
request.onreadystatechange = function () {
if(request.readyState === XMLHttpRequest.DONE) {
console.log("Request completed!");
}
}

request.open('GET', 'http://www.mywebsite.com', false)
It means you are creating a synchronous call to the Web service. So not expecting any call back theoratically.
So to continue with above approach make sure the body is also null.
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
}
The null parameter indicates that no body content is needed for the GET request.
Hence the thread won't be blocked.

Related

Setting to XMLHttpRequest asynchronous doesn't work

i am trying to learn Ajax now i don't know how to set XMLHttpRequest Asynchronous. i've tryed some other post about ajax but can't make sense of it. Sorry if this already asked.
In the following code i try to console.log the XMLHttpRequest object.
i've linked it to a local text file in the same folder.
the problem is that when is set request.open parameter to true it does't work. Its only works when its set to false but i read that this is not asynchronous.
I am using XAMPP for a server. Also i've tryed it on a differnt server form school.
If there are anny questions please ask me.
thanks
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Mircosoft.XMLHTTP");
}
//this open function
request.open('GET', 'text.txt', true);
request.send();
if(request.status===200){
console.log(request);
document.writeln(request.responseText);
}
The entire point of it being asynchronous is that it won't lock up the JavaScript engine until the response has arrived. So with your current code, you are trying to read the response before it exists.
You need to use an event handler to process the data after it has arrived.
function processData() {
document.writeln(this.responseText);
}
var request = new XMLHttpRequest();
request.open('GET', 'text.txt');
request.addEventListener("load", processData);
request.send();
You've to wait the response with request.onreadystatechange function
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200)
{
document.writeln(request.responseText);
}
}
//this open function
request.open('GET', 'text.txt', true);
request.send();

Reading a local text file in javascript synchronuosly

i just want to read a local text file and assign it to a variable. I don't see why this code doesn't work. I have already looked almost in any response on stackoverflow since yesterday and that's the only synchronous way i have found.
Anybody sees the problem ?
function readTextFile(file){
var request = new XMLHttpRequest();
request.open('GET', file);
request.onreadystatechange = function(){
console.log(request);
console.log(request.responseText);
return request.responseText;
}
}

XMLHttpRequest is deprecated. What to use instead?

Trying to use a pure JS approach to check if I have a valid JS image url. I am getting a warning that XMLHttpRequest is deprecated. What is a better way to do this?
urlExists(url) {
const http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
if (http.status !== 404) {
return true;
}
return false;
}
You're probably getting a message that the synchronous use of XMLHttpRequest is deprecated (because of its harmful effect on the user experience; it freezes the page while waiting for a response). I can assure you that proper asynchronous use of that API is not deprecated whatsoever.
Here's some example code for the correct use:
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (this.readyState === this.DONE) {
console.log(this.status) // do something; the request has completed
}
}
xhr.open("HEAD", "http://example.com") // replace with URL of your choosing
xhr.send()
The cause of the warning was that in http.open('HEAD', url, false); you put a third argument (async) as false. As per the https://xhr.spec.whatwg.org/#synchronous-flag it should be set to true.
The warning is probably because you are tyring to do a synchronous request.

How to make get requests with JavaScript?

My apologies if this is a trivial question but I couldn't find how to make requests using JavaScript.
var request = new XMLHttpRequest();
request.open("GET", "http://www.google.com");
alert(request.status);
I get 0, but http statuses should be between 100 and 600. Where am I going wrong?
The issue is that you're never making the request. See an example of XMLHttpRequest here.
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "http://www.google.com", true);
oReq.send();
Notice oReq.send(), which sends the request. Also notice the reqListener function, which gets called when the request completes.
Check the article How to get the response of XMLHttpRequest
In a nutshell, XMLHttpRequest is asynchronous by default, so you need to register a callback function on the onreadystate.
var request = new XMLHttpRequest();
request.onreadystatechange=function(){
if (request.readyState==4 && request.status==200){
alert(request.status);
// To get the response use request.responseText;
}
}
request.open("GET", "http://www.google.com");
request.send(null);
Note that for older versions of IE (IE5 and IE6), you need to get the request from an ActiveX Object as follows:
variable=new ActiveXObject("Microsoft.XMLHTTP");
I'm not sure but you just define your request. Did you forget to send it ?
Try
var request = new XMLHttpRequest();
request.open("GET", "http://www.google.com");
request.send(null);
alert(request.status);

XMLHttpRequest: POST request status

I have such part of code:
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://someurl.com", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
doSomeTask();
}
}
}
xhr.send('login=mylogin&password=mypassword');
How can I know if my login&password are correct? In both cases xhr.status is 200.
Invalid Login/Password attempts are not HTTP failures. Only HTTP Failures return you 4xx or 5xx return codes. You might want to use the xhr.responseText or xhr.responseXML from the response to see what your backend is returning and base your decision according to that. Please refer to http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/#dfn-responsetext for how the responses are obtained.
Also, there are tons of good Javascript framework that hide the complexity of making Ajax calls. JQuery makes the job of calling AJAX scripts extremely easy. You might want to investigate on that instead of writing raw XHR code.

Categories