Existen ocasiones en las que deseas crear una capa nueva con contenido informativo y que se muestre por encima de los elementos ya cargados de la página, algo así como una ventana modal o algo parecido, Leer mas ...

Un ejemplo de como leer datos en formato JSON almacenados en un archivo y mostrarlos en una tabla, todo esto con Javascript y JQuery Leer mas ...

JavaScript tiene un número de objetos predefinidos. Además, puedes crear tus propios objetos. En JavaScript 1.2 y versiones posteriores, puedes crear un objeto usando un inicializador de objeto. Como alternativa, puedes crear primero una función constructora y luego crear una instancia de un objeto con esa función y el operador new.

En este ejemplo usare la manera de hacerlo con una función constructora y el operador new para crear una instancia.

            
            // Objeto propio que se llamara Usuario y creado con funcion constructora
            function Usuario(id, nombre, correo)
            {
              this.id = id;
              this.nombre = nombre;
              this.correo = correo;
            }
            // Método que devuelve el nombre del usuario
            Usuario.prototype.getNombre = function(){
              return this.nombre;
            }
            // Creamos un objeto elUsuario de la siguiente forma
            var elUsuario = new Usuario("001","Juan","juan.email@micorreo.com");
            // Vamos obtener el nombre del usuario
            console.log(elUsuario.getNombre());
            
          

Mas información y referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos

Para este ejemplo se usara JQuery para enviar los datos del formulario mediante $.ajax a PHP y recibir el resultado de la validación.

Las siguientes librerias se necesitan, ya que utilizaremos JQuery y Bootstrap por lo que no olvide poner las siguientes líneas.

            
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
              <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
              <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
            
          

Código HTML del formulario, para darle un toque responsivo usamos Bootstrap

            
              <form enctype="multipart/form-data" class="form-horizontal" id="form_valida_ajax" method="post" role="form">
                <div class="form-group">
                  <label class="control-label col-sm-4" for="usuario">Usuario:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" name="usuario" id="usuario" placeholder="Usuario">
                    </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-4" for="password">Password:</label>
                    <div class="col-sm-8">
                      <input type="password" class="form-control" id="password" name="password" placeholder="Contraseña">
                    </div>
                </div>      
                <div class="form-group">
                  <div class="col-sm-offset-4 col-sm-8">
                    <button type="submit" id="btnvalidar" class="btn btn-default">Validar usuario</button>
                  </div>
                </div>
              </form>
            
          

Código Javascript para enviar los datos a PHP y validar los datos capturados de usuario y password.

            
              $(function(){
                $('#form_valida_ajax').on("submit", function(e){
                  e.preventDefault();          
                  var respuesta = $.ajax({
                    url: "valida.php",
                    type: "post",
                    dataType: "json",            
                    data: $(this).serialize()
                  });
                  respuesta.done(function(data)
                  {
                    alert("Usuario: " + data.usuario + " es " + data.acceso); // Recibo la respuesta desde PHP.
                  });
                  respuesta.fail(function( jqXHR, estatus ) 
                  {
                    alert( "Error: " + estatus );
                  });             
                });
              });
            
          

Código PHP para recibir los datos enviados con Javascript y validar los datos capturados de usuario y password.

            
  <?php 
  if(isset($_POST['usuario']) && isset($_POST['password'])) // Estan definidas las variables y no sea Null
  { // Los datos de los usuarios en un array asociativo clave valor, donde la clave es el nombre de usuario
    // el valor es la contraseña previamente convertido con el algorito MD5
    // Usuario: Juan     Contraseña: Juan
    // Usuario: Ramiro   Contraseña: Ramiro
    $Usuarios = array(
      "Juan" => "92eaf3719159c372f3d50337e0a14f57", 
      "Ramiro" => "3622ecf2ffc9f3d1143ccfa8eabd27ea");
    $resultado = array();
    $resultado['acceso'] = 'no valido';
    if(array_key_exists($_POST['usuario'], $Usuarios))
    {
      $pass = md5($_POST['password']); // Se calcula el hash md5 de la contraseña capturada
      // Referencia: http://php.net/manual/es/function.md5.php
      if(strcmp($pass, $Usuarios[$_POST['usuario']])==0) // Se compara la contraseña guardada con la
        $resultado['acceso'] = 'valido';            // calculada y si es 0 son iguales
    }
    $resultado['usuario'] = $_POST['usuario'];
    header('Content-type: application/json; charset=utf-8');
      echo json_encode($resultado); // Se devuelve el nombre de usuario y el resultado de la validacion
      exit;
  }
  else
  {
    header("Location: https://zerobytes.alwaysdata.net");
    exit;
  }
?>
            
          

Demo