使用 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. Hibernate 3.0 HelloWorld

    说明 基于Hibernate 3.0,Mysql5.0,java jdk 1.7,运行需要的lib 库,从http://files.cnblogs.com/HCCZX/Hibernate_Lib.ra ...

  2. Mybatis JPA-集成方案+源码

    2018-04-18 update 当前文章已过时,请访问代码仓库查看当前版本wiki. github https://github.com/cnsvili/mybatis-jpa gitee htt ...

  3. Maven学习(十六)-----Maven存储库

    什么是Maven资源库? 在 Maven 术语里存储库是一个目录,即目录中保存所有项目的 jar 库,插件或任何其他项目特定文件,并可以容易由 Maven 使用. Maven库中有三种类型 local ...

  4. Python中print函数中中逗号和加号的区别

    strip()方法,去除字符串开头或者结尾的空格 s = " a b c " new_s = s.strip() print("-------->%s<--- ...

  5. python学习-linux基本操作

    1.sudo 管理员root身份 2.mkdir 创建文件夹   touch 创建文件 3.rm 删除 4.chmod 赋予权限 r(读取):4 w(写):2 x(执行):1 rwx=7,r-x=5等 ...

  6. Appium+python HTML测试报告(1)（转）

    (原文:https://www.cnblogs.com/fancy0158/p/10054632.html) 测试任务执行完成后,我们需要一份通俗易懂的测试报告来展示自动化测试的结果. HTMLTes ...

  7. 用Python实现检测视频真伪？

    译者注:本文以一段自打24小时耳光的视频为例子,介绍了如何利用均值哈希算法来检查重复视频帧.以下是译文. 有人在网上上传了一段视频,他打了自己24个小时的耳光.他真的这么做了吗?看都不用看,肯定没有! ...

  8. 智慧树mooc自动刷课代码

    最近学习javaScript和JQuery,恰好还有一门mooc没有看.结合学习的知识和其他人的代码:撸了一个自动播放课程的代码,同时自动跳过单章的测试题. 用电脑挂着不动就完事了. 如下: var ...

  9. 【python 3.6】xlwt和xlrd对excel的读写操作

    #python 3.6 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'BH8ANK' import xlrd '''====== ...

  10. xshell—实现Linux与Windows之间的文件传递

    在Windows系统上,通过xshell连接Linux系统. 第一种使用方式:从Linux系统上下载文件到Windows系统. 准备工作: $ sudo apt-get install lrzsz 安 ...