Login using Javascript and REST

Question

I made a REST service, which will return a String "hej" if the log in is true. I have tested in Java with a rest client and it works fine, but pretty new to javascript and need some help.

I'm using this function

function UserAction() {
console.log(User());
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "http://localhost:8080/Footballmanagerrestservice/webresources/login");
    xhttp.setRequestHeader("login", User());
    xhttp.responseType = 'text';

xhttp.onreadystatechange = function () {
    console.log('DONE', xhttp.readyState); 
    if (xhttp.readyState == 4) {;
        // handle response
        var response = xhttp.responseText;
        console.log(response);
        if (response == "hej") {
            var url = "http://localhost:8080/FM3/spil2.jsp";
            window.location.href = url;
        }
    }
};

// send the request *after* the callback is defined 
xhttp.send();
return false;
}

function User() {
username = document.getElementById("username").toString();
username = document.getElementById("password").toString();
var UserAndPass = "?username=" + username + "&password=" + password;
return UserAndPass;
}

I show you the client i have i Java, maybe you can see why it's not working.

public static void main(String[] args) {
   Client client = ClientBuilder.newClient();

  String root="http://localhost:8080/Footballmanagerrestservice/webresources/";


String functionPath="login";

String parameters="?username=s153518&password=holger";
Response res = client.target(root+functionPath+parameters)
        .request(MediaType.APPLICATION_JSON).get();
String svar = res.readEntity(String.class);
System.out.println(svar);
}

You specify username and password in java, but login in javascript. What is User() ? — AhmadWabbi
– AhmadWabbi, Commented May 3, 2017 at 12:11

Karim · Accepted Answer · 2017-05-04 08:19:30Z

1

first part of the code looks ok, the following instead must be handled inside a function because is intrinsically asynchronous

var response = JSON.parse(xhttp.responseText);
console.log(response);
if (response.toString() == "hej") {
    var url = "http://localhost:8080/FM3/spil2.jsp";
    window.location.href = url
}
return false;

doc: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/onreadystatechange

essentially you're trying to handle the response as a syncrhonous call, but it's not, the response it's not immediatly avaiable, for this reason you have to register a callback (from the doc must be attached to the field onreadystatechange) that will be triggered by javascript as soon as the server response is available.

try to change it like so:

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4) {
      // handle response
      var response = JSON.parse(xhttp.responseText);
      console.log(response);
      if (response.toString() == "hej") {
        var url = "http://localhost:8080/FM3/spil2.jsp";
        window.location.href = url
      }
    }
  }

  xhr.send();

edited May 4, 2017 at 8:19

answered May 3, 2017 at 12:11

Karim

8,6823 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kuno Heltborg Over a year ago

I'm still at the learning state and pretty new to JavaScript and REST. Can you explain in deeper what you mean?

Kuno Heltborg Over a year ago

Okay, I tried changing the code and I'm getting 2 errors. GET localhost:8080/Footballmanagerrestservice/webresources 404 (Not Found) You have any idea why it cant find it? The java client works fine. And the next error Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.UserAction.xhttp.onreadystatechange (load_user.js:18) at UserAction (load_user.js:28) at HTMLFormElement.onsubmit (index_1_1.html:51)

Karim Over a year ago

fix this method: xhttp.open(), remove the false at the end. regarding the problems you're having try debugging, put a breakpoint inside the callback and check if you have the response

Kuno Heltborg Over a year ago

Thank you Karim! It's almost working now. One last question, do you have any idea why the REST service get null for both username and password?

Karim Over a year ago

no problem:). check the dom and be sure you have defined both elements with id="username" and id="password"

|

Collectives™ on Stack Overflow

Login using Javascript and REST

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related