Q:

How to get a value to one php page to another without reload with Ajax and JavaScript

 <html>
 <body>
 <div id="main_login_div">
    <form name="form1" id="main_form" method="post" target="_parent"   action="checklogin.php">
          <input name="myusername" type="text" id="myusername"  placeholder="User Name Here">
          <input name="mypassword" type="password" id="mypassword"  placeholder="Password Here">
          <input type="submit" name="Submit" id="gogogo" value="Login">
          <p id="msg" name="msg"><?php echo $_GET['msg']; ?></p>
    </form>
 </div>
</body>
</html>

So this is my login form, I use GET method to get message password is wrong or not, so problem is that when I click on submit page goes refresh, and I don't want my page to reload, is there any way to get results without reloading page  with Ajax and JavaScript not JQuery 

A:

Here's a simple ajax request using simple vanilla JavaScript
function request(url, callback) {

  var req = new XMLHttpRequest();

  req.onreadystatechange = function() {
    if (req.readyState !== XMLHttpRequest.DONE) return;

    switch (req.status) {
      case 200:
        return callback(null, req.responseText);
      case 404:
        return callback(Error('Sorry, 404 error'));
      default:
        return callback(Error('Some other error happened'))
    }
  };

  req.open("GET", url, true);
  req.send();

  return req;
}

You can use it like this
var req = request('/some-data.json', function (err, res) {

  // check for error
  if (err) return console.error(err);

  // do something with the data
  console.log(JSON.parse(res));
});

Note, you'll have to do a little additional research to support this on older IE browsers.

