使用 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. 20155212 实验一《Java开发环境的熟悉》实验报告

    20155212 实验一<Java开发环境的熟悉>实验报告 命令行下Java程序开发 命令创建实验目录 输入mkdir 2051212创建以自己学号命名的文件夹,通过cd 20155212 ...

  2. 【bzoj3991】[SDOI2015]寻宝游戏 树链的并+STL-set

    题目描述 给出一棵树,初始每个点都是非必经的.多次改变某个点的必经状态,并询问从任意一个点出发,经过所有必经的点并回到该点的最小路程. 输入 第一行,两个整数N.M,其中M为宝物的变动次数. 接下来的 ...

  3. 【LG4067】[SDOI2016]储能表

    [LG4067][SDOI2016]储能表 题面 洛谷 题解 这种$n$.$m$出奇的大的题目一看就是数位$dp$啦 其实就是用一下数位$dp$的套路 设$f[o][n][m][k]$表示当前做到第$ ...

  4. 【LG2257】YY的GCD

    [LG2257]YY的GCD 题面 洛谷 题解 题目大意: 给定\(n,m\)求\(\sum_{i=1}^{n}\sum_{j=1}^{m}[gcd(i,j)为质数]\). 我们设\(f(x)=[x为 ...

  5. 用phpcms如何将静态页面制作成企业网站（上）

    首先,先要准备好这个静态网页的源文件,如图 bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页 运行一下,看看 是这样的 然后打开phpcms文件,上篇博客中有提到, ...

  6. oracle数据库应用性能优化经验（培训讲义）

    这是我给公司同事做的内部培训ppt的讲义,给大家分享一下.这是培训大纲,ppt在找地方上传,等找到了会把链接发在这里 . 暂时放在csdn上,赚点下载积分:https://download.csdn. ...

  7. vue异步分页+初始化页面

    html代码: <section class="container page-home"> <div id="main-content" cl ...

  8. 用gdb调试程序(Linux环境）

    一般来说,GDB主要帮忙你完成下面四个方面的功能: 1.启动你的程序,可以按照你的自定义的要求随心所欲的运行程序.    2.可让被调试的程序在你所指定的调置的断点处停住.(断点可以是条件表达式)   ...

  9. 【PMP考试专栏】01、五大过程组和十大知识领域

  10. 4.airflow测试

    1.测试sqoop任务1.1 测试全量抽取1.1.1.直接执行命令1.1.2.以shell文件方式执行sqoop或hive任务1.2 测试增量抽取2.测试hive任务3.总结 当前生产上的任务主要分为 ...