CODEWITHSUNDEEP
javascripthtmlnode.jspostxmlhttprequest
NebSehemvi
NebSehemvi

Reputation: 33

How to get response from server without refreshing and using JQuery/AJAX?

Is there any "right" way to get response from server without using JQuery/AJAX and of course without refreshing page? server.js:

 var http = require('http'); 
 var url = require('url'); 
 var qs = require('querystring'); 
 var static = require('node-static'); 
 var file = new static.Server('.');     

 http.createServer(function(req, res) { 
    if (req.method == 'POST' && req.url == "/reglog.html") { 
        var body = ''; 
          req.on('data', function (data) { 
            body += data; 
            // Destroy connection if data is too large for it
            if (body.length > 1e6) { 
            req.connection.destroy();
            }
          }); 
          req.on('end', function () { 
            //it's time to parse body 
            var post = qs.parse(body); 
            //send response everything is ok
            if (post.email.length > 0 && post.pswrd.length > 0 && post.login.length > 0)     { 
              //also console.log to see what was sent from client
              console.log(post); 
              res.end('Everything is good!'); 
            } else { 
              // ...or not ok 
              res.end('Everything is bad!'); 
            } 
          }); 
        } else if (method = 'GET') { 
          file.serve(req, res); 
        } 
}).listen(8080);

So, there's reglog.js:

    var xhr = new XMLHttpRequest();
    var uemail = document.getElementById("email");      //HTML element for user's email
    var ulogin = document.getElementById("login");      //HTML element for user's login
    var upswrd = document.getElementById("pswrd");      //HTML element for user's password
    var message = document.getElementById("message");   //HTML element for response from server

function hide(tout) {
    if (tout === undefined) tout = 2500;
    return setTimeout(function() {
        message.innerHTML = "";
    }, tout);
}

document.getElementById("btn").onclick = (function createUser(){
    var email = uemail.value;                               
    var login = ulogin.value;                               
    var pswrd = upswrd.value;
    //XHR part starts//
    var body = "email="+email+"&login="+login+"&pswrd="+pswrd;
    //I know that email, login and pswrd should be with encodeURIComponent, but in my case it's not a problem and using it won't solve my main problem
    xhr.open("POST","/reglog.html",true);
    xhr.send(body);
    message.style.color = "black";
    xhr.onload = function() {
        message.innerHTML = xhr.responseText;
    }
    //XHR part ends//
});

document.getElementById("lbtn").onclick = (function logMenu(){
    document.getElementById('logform').style.display = "block";
    document.getElementById('regform').style.display = "none";
});

document.getElementById("rbtn").onclick = (function regMenu(){
    document.getElementById('regform').style.display = "block";
    document.getElementById('logform').style.display = "none";
});

And reglog.html:

<HTML>
<HEAD>
  <meta charset="utf-8">
  <style>
    .button{
    position: absolute;
    top: 45%;
    bottom: 55%;
    left: 15%;
    }
  </style>  
</HEAD>

<BODY>

<form id="regform" action="/reglog.html" style="display:block;">
        <center><p>Register</p>

    E-mail: <input type="email" id="email" name="email" autocomplete="off"><br>
    Login: <input type="text" id="login" name="login" required autocomplete="off"><br>
    Password: <input type="password" id="pswrd" name="password" required autocomplete="off"><br>
    <span id="message"></span><br>
    <div class="button">
    <input type="submit" id="btn" value="Register"/><br><br>
    <input type="button" id="lbtn" value="Back to log in"/></div>
    </center>
</form>

<form id="logform" style="display:none;">
            <center><p>Log in</p>

    Login: <input type="text" id="login2" autocomplete="off"/><br>
    Password: <input type="password" id="pswrd2" autocomplete="off"/><br>
    <span id="message2"></span><br>
    <div class="button">
    <input type="button" id="btn2" value="Log in"/><br><br>
    <input type="button" id="rbtn" value="Registration"/></div>
    </center>
</form>

<script async src="/reglog.js"></script>
</BODY>

</HTML>

As you can see I can get response on client side in 

<span id="message"></span>

But I can see it for ~0.5 sec and after that there would be page refreshing. And that is not the best way to see results. My question: is it possible to see this response in "span" for more than ~0.5 sec? I mean, maybe refresh page and then show this response? I don't get how to do it because there is always response coming (for 0.5 sec) and then page refreshing. Also I don't know if it's possible to do that without AJAX/JQuery.

I would glad to get any help because it's the question that torments me for two days, and I didn't find any reasonable answer via google.

Upvotes: 0

Views: 955

Answers (1)

James
James

Reputation: 22237

Your code looks fine you just need to prevent the default action of the form submitting the traditional (page reload) way when you click the submit button.

document.getElementById("btn").onclick = (function createUser(e){
    e.preventDefault();
    // rest of function
});

Upvotes: 1

Related Questions