第107天:Ajax 实现简单的登录效果

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

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

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

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

1、基本操作

 1 // 1. 得到做 ajax 操作的对象
 2   // 系统提供的一个构造函数,可以进行网络请求
 3   var ajaxObj = new XMLHttpRequest();
 4 
 5   // 2. 给对象,指定请求方式,请求的地址
 6   // 五个参数
 7   // ①. GET 方式
 8   // ②. 访问地址
 9   // ③. true 就是异步请求(现代浏览器已经不支持同步请求了)
10   // ④. 账户名
11   // ⑤. 账户密码
12   ajaxObj.open("GET", "test.txt", true);
13   // ajaxObj.open("GET", "test.php", true); //别的文件也是可以的
14 
15   // 3. 发送请求给服务器做处理
16   ajaxObj.send();
17 
18   // 4. 当接收到服务器发回的相应信息,如何处理数据
19   // onreadystatechange 准备状态的改变
20   ajaxObj.onreadystatechange = function() {
21    if (ajaxObj.readyState == 4) {
22     // 判断 http 的响应状态码,这个范围内都算有相应
23     if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
24      // 提示响应内容,包含但不限于 php 的 echo 内容
25      alert(ajaxObj.responseText);
26     };
27    };
28   };
29 

此时我们执行文件,即可获取 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对象的相应属性取得数据。

 1 // 封装 Ajax 基本代码
 2 function ajaxFn(url,succFn) { // succFn 表示数据处理成功后如何处理这个函数
 3     var ajaxObj = new XMLHttpRequest();
 4     ajaxObj.open("GET", url, true);
 5     ajaxObj.send();
 6     ajaxObj.onreadystatechange = function() {
 7     if (ajaxObj.readyState == 4) {
 8     if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
 9     // 利用参数中处理数据的函数
10     succFn(ajaxObj.responseText);
11       };
12     };
13   };
14 };
15 // 这是一个回调函数
16 ajaxFn("test.txt",function (data) {
17     alert(data);
18 });

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

1、HTML 文件

 1 <!DOCTYPE html>
 2 <html>
 3  <head>
 4   <meta charset="UTF-8">
 5   <title></title>
 6  </head>
 7  <body>
 8   用户名:<input type="text" id="user"/><br>
 9   密__码:<input type="password" id="pass"/><br>
10   <button id="getTxt">验证</button>
11   <div id="div1">
12    
13   </div>
14  </body>
15  <script src="Ajax_封装.js" type="text/javascript" charset="utf-8"></script>
16  <script type="text/javascript">
17   var user = document.getElementById("user"),
18       pass = document.getElementById("pass"),
19       btn = document.getElementById("getTxt"),
20       div = document.getElementById("div1");
21   btn.onclick = function () {
22    // 按钮点击 连接到了 login.php 文件
23    // 队请求内容进行字符串的拼接
24    var url1 = "login.php?user="+user.value+"&pass="+pass.value;
25    ajaxFn(url1,function (data) {
26     div.innerHTML = data; // 显示是否登录成功
27    })
28   }
29  </script>
30 </html>

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

2、 php 文件

 1 <?php
 2 
 3 // 登录验证
 4 $user = $_GET["user"];
 5 $pass = $_GET["pass"];
 6 
 7 $link = mysql_connect("localhost", "root");
 8 mysql_select_db("N_&_P", $link);
 9 $re = mysql_query("select * from `N_&_P` where username = '{$user}' and password = '{$pass}'");
10 $obj = mysql_fetch_object($re);
11 if ($obj) echo "登录成功了!";
12 else echo "登录失败了!";
13 ?>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding

windows下安装redis并在后台静默开启

1532
来自专栏Golang语言社区

Go语言如何并发超时处理详解

大家都知道golang并没有在语言层次上提供超时操作,但可以通过一些小技巧实现超时。下面来一起看看吧,有需要的朋友们可以参考借鉴。 实现原理: 并发一个函数,等...

38313
来自专栏Golang语言社区

Go语言如何并发超时处理详解

大家都知道golang并没有在语言层次上提供超时操作,但可以通过一些小技巧实现超时。下面来一起看看吧,有需要的朋友们可以参考借鉴。 实现原理: 并发一个函数,等...

3676
来自专栏张伟博客

如何使用 Git 和 GitHub 来管理自己的代码

    点击右上角加号箭头,在弹出的菜单中选择 "New repository" 选项进行仓库配置。

1382
来自专栏WindCoder

windows下python中pip与easy_install相关

下载地址:https://pypi.python.org/pypi/ez_setup

1071
来自专栏vue学习

5.vue-router之什么是编程式路由

首先我们来讲讲简单的,上面两个方法记住,等效的。 ① 还是在test.vue组件里面写个div并给它添加一个click跳转事件:

1173
来自专栏开发技术

将tomcat添加为linux系统服务

  在博客 --》virtualBox安装centos,并搭建tomcat中,讲到了centos下搭建tomcat环境,发现启动tomcat不是那么方便,要是忘...

1582
来自专栏pangguoming

Angular CLI 使用教程指南参考

Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.

984
来自专栏移动端周边技术扩展

Vue.js学习笔记(1)

881
来自专栏静下来

增加wordpress可以上传.torrent文件

今天想上传个文件,是.torrent后缀的。。就是种子,为什么要上传,咱就不说了。。。wordpress本身是不支持上传.torrent文件的,不过我们可以用代...

3345

扫码关注云+社区

领取腾讯云代金券