Ajax真的那么神奇吗？？？

最新推荐文章于 2022-04-29 16:57:31 发布

帅帅邬同学

最新推荐文章于 2022-04-29 16:57:31 发布

阅读量355

点赞数 4

分类专栏：学习笔记服务器与AJAX jQuery 文章标签： ajax js javascript web jquery

本文链接：https://blog.csdn.net/weixin_44586544/article/details/106021169

版权

学习笔记同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

服务器与AJAX

21 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

Ajax是什么？

术语ajax最早产生于2005年，Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)，但是它不是像HTML、JavaScript或CSS这样的一种“正式的”技术，它是表示一些技术的混合交互的一个术语（JavaScript、Web浏览器和Web服务器），它使我们可以获取和显示新的内容而不必载入一个新的Web页面。增强用户体验，更有桌面程序的感觉。

Ajax可以做什么？

1. 显示新的HTML内容而不用载入整个页面
2. 提交一个表单并且立即显示结果
3. 登录而不用跳转到新的页面
4. 星级评定组件
5. 遍历数据库信息加载更多而不刷新页面

原生ajax实例实现异步加载效果

实例演示：

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Ajax开发</title>
  <script type="text/javascript">
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 使用Ajax发送请求需要如下几步：
        // 1、创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 2、准备发送
        xhr.open('get', './01check.php?username=' + uname + '&password=' + pw, true);
        // 3、执行发送动作
        xhr.send(null);
        // 4、指定回调函数
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseText;
              var info = document.getElementById('info');
              if (data == '1') {
                info.innerHTML = '登录成功';
              } else if (data == '2') {
                info.innerHTML = '用户名或者密码错误';
              }
            }
          }
        }
      }
    }
  </script>
</head>

<body>
  <form>
    用户名：
    <input type="text" name="username" id="username"><span id="info"></span>
    <br> 密码：
    <input type="text" name="password" id="password">
    <input type="button" value="登录" id="btn">
  </form>
</body>

</html>

后端代码：

<?php
$uname = $_GET['username'];
$pw = $_GET['password'];

if ($uname == 'admin' && $pw == '123') {
  echo '1';
} else {
  echo '2';
}

效果如下：
原生ajax实例实现异步加载效果

如果这篇文章能够帮助到你，希望您不要吝惜点赞，您的支持是我继续努力的动力！！！

帅帅邬同学

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Ajax真的那么神奇吗 ？？？

Ajax是什么 ？

Ajax可以做什么？

原生ajax实例实现异步加载效果

Ajax真的那么神奇吗？？？

Ajax是什么？