使用 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. 20155202 20155222 信息安全技术概论实验一 PGP的使用

    20155202 信息安全技术概论实验一 PGP的使用 实验原理 一．PGP简介 在现代社会里,电子邮件和网络上的文件传输已经成为生活的一部分.邮件的安全问题也就突出了,大家都知道在互联网上传输的数据 ...

  2. 20155217 实验四 Android程序设计

    20155217 实验四 Android程序设计 任务一: 完成Hello World, 要求修改res目录中的内容,Hello World后要显示自己的学号. R.java文件是定义该项目所有资源的 ...

  3. 柴柴随笔第三篇：安装虚拟机以及Linux基础入门

    虚拟机的安装 老师提供的作业指南给了我莫大的帮助,一步一步按着其中操作提示和网址链接,我首先下好了VM,也创建好了自己的第一台虚拟机. 接着按照步骤安装了Ubuntu到我的虚拟机. 到此,一切都顺风顺 ...

  4. 2017 ACM-ICPC 亚洲区（西安赛区）网络赛

    A There is a tree with nn nodes, at which attach a binary 64*6464∗64 matrix M_i (1 \le i \le n)M ​i ...

  5. 程序与程序之间共享对象：MarshalByRefObject

    源自于:http://stackoverflow.com/questions/439173/message-pumps-and-appdomains/442316 程序与程序之间共享对象: Marsh ...

  6. jdk各种老版本的下载链接

    java SE 1.6各个版本 jdk  api http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downlo ...

  7. git远程版本回滚方法【转】

    step1:本地代码回滚到上一版本(或者指定版本) git reset --hard HEAD~1 step2:加入-f参数,强制提交,远程端将强制跟新到reset版本 git push -f ori ...

  8. ffmpeg 压缩H265 Windows 硬件编码

    硬件NVIDIA:ffmpeg.exe -i input.avi -c:v hevc_nvenc -preset:v fast output.mp4 软件          :ffmpeg.exe - ...

  9. 180716-Centos时区设置

    使用timedatectl命令同步时间并设置时区 I. timedatactl命令 1. 使用帮助 timedatectl -h 2. 命令示例 2.1 显示系统的当前时间和日期 timedatect ...

  10. Ubuntu 16.04 主题美化及常用软件安装

    一.主题美化 系统清理 系统更新: 安装完系统之后,需要更新一些补丁.Ctrl+Alt+T调出终端,执行一下代码: sudo apt-get update sudo apt-get upgrade 卸 ...