So I want to use this example without jquery or other libraries.

I have this code

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {...}

As you can see it uses the old style function()

How do I change this to an arrow function style one?

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = () => {...}

This doesn't work. Am I close or am I looking at this pletely wrong? Again I don't want to use libraries for this exercise.

So I want to use this example without jquery or other libraries.

I have this code

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {...}

As you can see it uses the old style function()

How do I change this to an arrow function style one?

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = () => {...}

This doesn't work. Am I close or am I looking at this pletely wrong? Again I don't want to use libraries for this exercise.

• javascript
• ajax
• xmlhttprequest
• arrow-functions

• This does work. The error is somewhere else – Jonas Wilms Commented Jul 25, 2017 at 9:46
• What do you mean by it doesn't work? The browser isn't supporting it? You could also use const instead of let I doubt you're re-assigning xmlHttp – nanobar Commented Jul 25, 2017 at 9:47
• snippet is working in chrome v59 . what browser are you on. might be browser not supporting arrow functions yet and might need a polyfill I tried : let xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = () => {console.log('s')} – Arnav Yagnik Commented Jul 25, 2017 at 9:48
• 1 You're probably trying to use this inside the function that works differently with arrow functions. Nothing is wrong with the assignment. – DarthJDG Commented Jul 25, 2017 at 9:49
• 2 @DarthJDG your ments was the ticket - I changed this to xmlHttp which is the variable name and it worked. I will read up on the this part of the arrow function :-) – jwknz Commented Jul 25, 2017 at 9:52

2 Answers 2

The problem with arrow functions is that they keep the this object of the outer scope.

Your first example would have the XMLHttpRequest bound to the this reference the second the window

To make this work with arrow notation, you need to reference the XMLHttpRequest with the outer name xmlHttp or bind it to the callback function:

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = ((request) => {...}).bind(undefined, request);

https://developer.mozilla/en/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Be aware that you can not override the this reference of arrow functions by any mean (bind, call, apply)

Bellian's code above looks nice but the .bind(undefined, request); gives the simplicity away.

There's an alternate way of doing this in such a way that it would sync to your questions expected answer:

I highly remend you should do this instead. The arrow function removed the direct this to gain better access to the results. Check for yourself console.log(x) only without the .target

You can also:

let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = x => {
  let result = x.target;

        if(result.readyState == 4 && result.status == 200){         
            console.log(result.responseText);
            
        }
    
};