使用 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. Spring框架实例

    一,介绍 Spring框架核心是Ioc控制反转,只要在容器中注册以后,依赖从容器中获取即可 简单的理解:需要一个值,在程序中定义一个变量,但是不赋值,只设置set方法,运行时,容器为该变量赋值 二,实 ...

  2. PostgreSQL的hstore初步学习

    安装hstore: 进入源代码的 /contrib/hstore 目录,然后执行gmake 和 gmake install: [root@pg200 hstore]# gmake gcc -O2 -W ...

  3. XAF-物料管理信息工作日志

    前段时间已经开始了第一阶段验收了,客户方并未把重点放在业务流程上面,一直在调整一些界面问题.有点小纠结. 今天要调一下菜单位置. 没修改时,是这样的: 到了列表界面,会多一个全文检索出来. 后来,客户 ...

  4. ffmpeg 踩坑实录 近期使用总结（三）

    一.背景介绍 将ffmpeg运用到项目上已经有一段时间了,趁现在有空赶紧记下来. 二.技术点总结    2.1 实现方式 项目里面主要运用的形式是,在java端,调用操作系统的方法,并执行切片命令. ...

  5. 利用PreparedStatement预防SQL注入

    1.什么是sql注入 SQL 注入是用户利用某些系统没有对输入数据进行充分的检查,从而进行恶意破坏的行为. 例如登录用户名采用  ' or 1=1 or username=‘,后台数据查询语句就变成 ...

  6. python的pip升级问题

    近来由于pip升级为10.0.1了,导致使用pip命令报错,使用过很多方法,最终找到一种相对靠谱的方法,一下是步骤: 进入https://pypi.python.org/pypi/pip 下载pip- ...

  7. header field token is not allowed by Access-Control-Allow-Headers in preflight response问题解决

    今天下午,本来打算使用aioxs在header里传一个token给后台服务器,如下图所示: 结果,控制台报了如下的错: 然后,我不停地百度,不停的改后台express的header设置,一直没有效果: ...

  8. Spark之编程模型RDD

    前言:Spark编程模型两个主要抽象,一个是弹性分布式数据集RDD,它是一种特殊集合,支持多种数据源,可支持并行计算,可缓存:另一个是两种共享变量,支持并行计算的广播变量和累加器. 1.RDD介绍 S ...

  9. springboot 集成 swagger

    1. 首先配置swaggerConfigpackage com.lixcx.lismservice.config; import com.lixcx.lismservice.format.Custom ...

  10. 王者荣耀交流协会 - 第6次Scrum会议

    Scrum master :刘耀泽 补充:由于上次的scrum会议博客没有按时交上去,因此在这里给出上次scrum会议的链接: http://www.cnblogs.com/rensijia/p/76 ...