ajax基础入门—登录验证

最新推荐文章于 2022-11-30 18:25:15 发布

geekOfWeb

最新推荐文章于 2022-11-30 18:25:15 发布

阅读量680

点赞数 1

分类专栏： ajax 文章标签： ajax javascript 异步实例原生ajax

本文链接：https://blog.csdn.net/qq_34477549/article/details/52709759

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

　　对于ajax，很多人只知道它是前后端数据对接的工具，但是ajax到底是什么，它的功能仅仅局限于此吗？

　　AJAX =Asynchronous JavaScript and XML，即异步 JavaScript 和 XML，简单地理解，AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

　　想必到这里，很多同学已经对ajax已经有了更加深入的了解。理论不多说，我们直接通过验证登录的实例来对ajax做个简单的入门。

　　我们先来看看这个案例的运行效果是怎样的。

　　下面正式开始代码：

HTML部分

1 <form >
2       用户名：<input type="text" name="username" id="username"/><br />
3       密码：<input type="password" name="password" id="password"/><span id="loginInfor"></span><br>
4       <input type="button" value="登录" id="btn"/>
5 </form>

JavaScript部分

1 window.onload = function(){
2     var btn = document.getElementById("btn");
3     var loginInfor = document.getElementById("loginInfor");
4     btn.onclick = function(){
5         var userName = document.getElementById("username").value;
6         var passWord = document.getElementById("password").value;
7         ajax(); // 这里，我们将ajax封装在一个函数里面
8     }
9 }

php部分

1 <?php
2 $username = $_GET['username'];
3 $password = $_GET['password'];
4 if($username == 'admin' && $password == 'admin'){
5     echo 1;
6 }else{
7     echo 0;
8 }
9 ?>

ajax部分

分为四步：

创建HttpReuqest对象:ajax通过HttpReuqest对象将浏览器和服务器之间的数据进行传递
open方法初始化url：准备向服务器发送请求，但是还没有发送！
向服务器发送请求
onreadystatechange回调函数：发送完请求后，需要做的事情

 1 // 1.创建HttpReuqest对象
 2 var xhr = null;
 3 if(window.XMLHttpRequest){
 4     xhr = new XMLHttpRequest();
 5 }else {
 6     xhr = new ActiveXObject("Microsoft.XMLHTTP"); // ie浏览器下兼容
 7 }
 8 
 9 // 2.open方法初始化url：准备向服务器发送请求，但是还没有发送！
10 var url = './data.php?username='+encodeURIComponent(userName)+'&password='+passWord; // 将字符串作为url进行编码，防止出现中文乱码问题
11 xhr.open("GET",url); // 采用get方式请求
12 
13 // 4.onreadystatechange回调函数：发送完请求后，需要做的事情
14 xhr.onreadystatechange = function(){
15     if(xhr.readyState == 4){ // 表示收到了来自服务器返回的数据
16         if(xhr.status == 200){ // 表示成功接收
17             var data = xhr.responseText; // 获取接收到的数据，这里是后台返回的0或1
18             console.log(data);
19             if(data == 1){
20                 loginInfor.innerHTML = "登录成功！用户名："+userName+" 密码"+passWord;
21             }else if(data == 0){
22                 loginInfor.innerHTML = "密码或用户名错误.请重新登录!用户名："+userName+" 密码"+passWord;
23             }
24         }
25     }; 
26 }
27 // 3.向服务器发送请求
28 xhr.send(null);

　　可能有的同学看到这里还有点疑惑，下面将进行详细的解释说明。

1.采用post方式还是get方式，有什么区别

get与post的最基本的区别是：

　　使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来

　　使用Get请求发送数据量小,Post请求发送数据量大

使用时，将上述代码的第2步和第3步进行更改，对比如下：

get方式

post方式

1 var url = './data.php?username='+encodeURIComponent(userName)
　　　　　　　　+'&password='+passWord; 
2 xhr.open("GET",url); 

3 xhr.send(null);

1 var data = "username=" + encodeURIComponent(userName)+ "&age=" + age;
2 xhr.open("post", "data.php", true);
3 //必须设置,否则服务器端收不到参数
4 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
5 xhr.send(data);

由此可以得出结论：

1.get请求需注意缓存问题,post请求不需担心这个问题

2.post请求必须设置Content-Type值为application/x-form-www-urlencoded

3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数