使用 Ajax 实现简单的登录效果

Ajax是一项使局部网页请求服务器信息，而不需整体刷新网页内容的异步更新技术。这使得向服务器请求的数据量大大减少，而且不会因局部的请求失败而影响到整体网页的加载。

一、 Ajax 请求数据的基本操作

假设使用 Ajax 从某个已知文档“test.txt”获取文件。

1、基本操作

 // 1. 得到做 ajax 操作的对象

   // 系统提供的一个构造函数，可以进行网络请求

   var ajaxObj = new XMLHttpRequest();

   // 2. 给对象，指定请求方式，请求的地址

   // 五个参数

   // ①. GET 方式

   // ②. 访问地址

   // ③. true 就是异步请求（现代浏览器已经不支持同步请求了）

   // ④. 账户名

   // ⑤. 账户密码

   ajaxObj.open("GET", "test.txt", true);

   // ajaxObj.open("GET", "test.php", true); //别的文件也是可以的

   // 3. 发送请求给服务器做处理

   ajaxObj.send();

   // 4. 当接收到服务器发回的相应信息，如何处理数据

   // onreadystatechange 准备状态的改变

   ajaxObj.onreadystatechange = function() {

    if (ajaxObj.readyState == ) {

     // 判断 http 的响应状态码，这个范围内都算有相应

     if (ajaxObj.status >=  && ajaxObj.status <= 300) {

      // 提示响应内容，包含但不限于 php 的 echo 内容

      alert(ajaxObj.responseText);

     };

    };

   };

此时我们执行文件，即可获取 test.txt 文件中已经被写入的内容。

2、 readyState 说明

在此有需要说明问题：ajaxObj.readyState == 4指的是什么？
在这里其实一共有物种状态：0，1，2，3，4

状态 说明
0 未初始化状态：这个阶段确认 XMLHttpRequest 对象是否创建,为了使用 open 方法做准备,当值为0的时候，表示对象已经存在了，否则会报错
1 载入状态：对 XMLHttpRequest 对象进行初始化，就是调用 open 方法，为请求做设置，并且调用 send() 方法向服务器发送请求，1 就代表正在向服务器发送请求
2 载入完成：这个阶段代表刚接受到服务器发来的数据，这个数据是原始数据，还不能直接给客户端使用，为下一阶段做准备
3 解析（数据交互）：此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型，把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
4 完成：此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成，值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

在这几种情况下，只有4是客户端可以进行操作的，其余均为计算机自行处理。

3、封装

但是这样使用是很不方便的，因此我们将这段 js 代码封装在 JS 文件中，每次调用即可。命名为 “Ajax_封装.js”

 // 封装 Ajax 基本代码

 function ajaxFn(url,succFn) { // succFn 表示数据处理成功后如何处理这个函数

     var ajaxObj = new XMLHttpRequest();

     ajaxObj.open("GET", url, true);

     ajaxObj.send();

     ajaxObj.onreadystatechange = function() {

     if (ajaxObj.readyState == 4) {

     if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {

     // 利用参数中处理数据的函数

     succFn(ajaxObj.responseText);

       };

     };

   };

 };

 // 这是一个回调函数

 ajaxFn("test.txt",function (data) {

     alert(data);

 });

二、验证登录成功与否实例

1、HTML 文件

 <!DOCTYPE html>

 <html>

  <head>

   <meta charset="UTF-8">

   <title></title>

  </head>

  <body>

   用户名:<input type="text" id="user"/><br>

   密__码:<input type="password" id="pass"/><br>

   <button id="getTxt">验证</button>

   <div id="div1">

   </div>

  </body>

  <script src="Ajax_封装.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

   var user = document.getElementById("user"),

       pass = document.getElementById("pass"),

       btn = document.getElementById("getTxt"),

       div = document.getElementById("div1");

   btn.onclick = function () {

    // 按钮点击 连接到了 login.php 文件

    // 队请求内容进行字符串的拼接

    var url1 = "login.php?user="+user.value+"&pass="+pass.value;

    ajaxFn(url1,function (data) {

     div.innerHTML = data; // 显示是否登录成功

    })

   }

  </script>

 </html>

注意：我们在向 login.php 请求数据的时候，对参数 url1进行了拼接，拼接完成后在 login.php 内查询对应值。

2、 php 文件

 <?php

 // 登录验证

 $user = $_GET["user"];

 $pass = $_GET["pass"];

 $link = mysql_connect("localhost", "root");

 mysql_select_db("N_&_P", $link);

 $re = mysql_query("select * from `N_&_P` where username = '{$user}' and password = '{$pass}'");

 $obj = mysql_fetch_object($re);

 if ($obj) echo "登录成功了！";

 else echo "登录失败了！";

 ?>

第107天：Ajax 实现简单的登录效果的更多相关文章

  1. python测试开发django-51.Ajax发送post请求登录案例

    前言 我想实现一个登录功能:登录的接口是另外一个地方提供,页面上点登录按钮的时候,先访问登录接口,根据接口返回json信息判断是否登录成功,登录成功页面跳转,登录不成功,在登录首页显示失败原因 登录页 ...

  2. Xamarin.Android再体验之简单的登录Demo

    一.前言 在空闲之余,学学新东西 二.服务端的代码编写与部署 这里采取的方式是MVC+EF返回Json数据,(本来是想用Nancy来实现的,想想电脑太卡就不开多个虚拟机了,用用IIS部署也好) 主要是 ...

  3. 以最简单的登录为例，诠释JS面向对象的简单实例

    JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧: JQuery:这个技术必须会,如果不会,那一定要会查api,知道怎么写,要看得懂英文文档,这 ...

  4. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

  5. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  6. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  7. Android破解学习之路（一）——简单的登录破解

    最近突然心血如潮开始学了Android破解,初入门,便是将经验记录下来. 准备工作: 1.一个登录简单APP 在我们破解之前,我们需要做一个简单的登录APP,输入相应的账号与密码便是弹出登录成功的对话 ...

  8. Java结合SpringBoot拦截器实现简单的登录认证模块

    Java结合SpringBoot拦截器实现简单的登录认证模块 之前在做项目时需要实现一个简单的登录认证的功能,就寻思着使用Spring Boot的拦截器来实现,在此记录一下我的整个实现过程,源码见文章 ...

  9. 【知了堂学习笔记】java web 简单的登录

    最近皮皮潇在学习java web,刚接触了简单的东西,所以今天给大家带来一个简单的登录实现. 页面: 页面代码: <%@ page language="java" conte ...

随机推荐

  1. 20155320《Java程序设计》实验一（Java开发环境的熟悉）实验报告

    20155320<Java程序设计>实验一(Java开发环境的熟悉)实验报告 实验内容及步骤 (一)命令行下Java程序开发 步骤一:首先在cmd中输入d:和cd ljq20155320进 ...

  2. day2 HTML - body

    <body>内常用标签 1.基本标签 所有标签分为: #  块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距) # 行内标签: span(白板) 1. 图标,  ...

  3. Sublime Text 3安装完美的Vim支持，ActualVim/NeoVim

    很多IDE和编辑器都有Vim插件用于支持Vim模式,但大多数都有些问题,拿我一直用的Idea来说,它的vim在ctrl+v后,选择多行的行前插入,如果这几行中有空行,它不会把空格算在内,所以最终是会少 ...

  4. 书写可维护的javascript

    内容介绍 编写可维护的代码很重要,因为大部分开发人员都花费大量时间维护他人代码. 1.什么是可维护的代码? 一般来说可维护的代码都有以下一些特征: 可理解性---------其他人可以接手代码并理解它 ...

  5. Web性能测试篇：AB 压力测试

    1. 压力测试的概念\定义 1.这段话是给刚接触\学习性能测试知识的初学者,在实际工作中都会接触到性能测试.压力测试.负载测试等专业名词也容易混淆,下面带大家熟悉下这到底是怎么定义: 1.1.性能测试 ...

  6. and_or_not 逻辑运算符的操作注解！

    python操作:

  7. idea下增加scala

    1 idea工具下,下载scala插件 2 idea下新建scala工程 File——New——module 如果按照上图,设置后点击下载,出现下图下载过慢情况下, 这里我选择了等待,大概等了半小时才 ...

  8. 二叉树的深度<java版>

    二叉树的结构 二叉树是比较常见的一种的一种数据结构. 首先看看二叉树的数据结构: //由左节点和右节点以及一个节点值构成 public class TreeNode{ TreeNode leftNod ...

  9. 高可用Kubernetes集群-6. 部署kube-apiserver

    八．部署kube-apiserver 接下来3章节是部署Kube-Master相关的服务,包含:kube-apiserver,kube-controller-manager,kube-schedule ...

  10. OpenLDAP配置TLS加密传输

    原文发表于cu:2016-07-04 参考文档: 基于OpenSSL自建CA与颁发SSL证书:http://seanlook.com/2015/01/18/openssl-self-sign-ca/ ...