Ajax的基础使用

爱被打了一巴掌 2024-03-30 17:34 38阅读 0赞

Ajax的基础使用

简介：Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

在以前没有ajax的时候，前后端的交互需要使用到，JSP，然后了JSP还是要由后端程序员来写，极大的提高了后端程序员的工作量，降低的开发效率。
在这里插入图片描述
有了ajax这种异步请求工具之后，后端程序员就不在需要使用到JSP了，前端的html页面可以通过ajax的异步请求与后端直接联系，这样前后端的分工就更加明确了。
在这里插入图片描述

我们通过一个例子来讲解ajax的使用吧。

项目创建

第一步：
在这里插入图片描述
在这里插入图片描述

第二步：
添加配置文件各种依赖

pom.xml

  1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  2.   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  3.   <modelVersion>4.0.0</modelVersion>
  4.   <groupId>org.example</groupId>
  5.   <artifactId>AjaxStudy</artifactId>
  6.   <packaging>war</packaging>
  7.   <version>1.0-SNAPSHOT</version>
  8.   <name>AjaxStudy Maven Webapp</name>
  9.   <url>http://maven.apache.org</url>
  11.   <properties>
  12.     <maven.compiler.source>8</maven.compiler.source>
  13.     <maven.compiler.target>8</maven.compiler.target>
  14.   </properties>
  16.   <dependencies>
  17.     <dependency>
  18.       <groupId>javax.servlet</groupId>
  19.       <artifactId>javax.servlet-api</artifactId>
  20.       <version>3.1.0</version>
  21.       <scope>provided</scope>
  22.     </dependency>
  24.     <dependency>
  25.       <groupId>com.alibaba</groupId>
  26.       <artifactId>fastjson</artifactId>
  27.       <version>1.2.62</version>
  28.     </dependency>
  30.   </dependencies>
  32.   <build>
  33.     <plugins>
  34.       <plugin>
  35.         <groupId>org.apache.tomcat.maven</groupId>
  36.         <artifactId>tomcat7-maven-plugin</artifactId>
  37.         <version>2.2</version>
  38.       </plugin>
  39.     </plugins>
  40.   </build>
  41. </project>

第三步：
AjaxServlet

  1. package com.jakelihua.servlet;
  3. import javax.servlet.*;
  4. import javax.servlet.http.*;
  5. import javax.servlet.annotation.*;
  6. import java.io.IOException;
  8. @WebServlet("/ajaxServlet")
  9. public class AjaxServlet extends HttpServlet {
  11.     @Override
  12.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  14.         //1. 响应数据
  15.         response.getWriter().write("hello ajax~");
  16.     }
  18.     @Override
  19.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  21.         this.doGet(request, response);
  22.     }
  23. }

第四步：
进入w3c官网查看教程
https://www.w3school.com.cn/js/js\_ajax\_intro.asp
在这里插入图片描述

  1. 创建核心对象
    在这里插入图片描述

    var xhttp;
    if (window.XMLHttpRequest) {

    1. xhttp = new XMLHttpRequest();
    2. } else {
    4. // code for IE6, IE5
    5.  xhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

  2. 发送请求
    在这里插入图片描述
    在这里插入图片描述

    xhttp.open(“GET”, “http://localhost:8080/AjaxStudy/ajaxServlet“);
    xhttp.send();

  3. 获取响应

在这里插入图片描述

  1. xhttp.onreadystatechange = function() {
  3.         if (this.readyState == 4 && this.status == 200) {
  5.             alert(this.responseText); // 我们这里显示一下这个后端反馈的文本
  6.         }
  7.     };

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <script>
  10.     // 1. 创建核心对象
  11.     var xhttp;
  12.     if (window.XMLHttpRequest) {
  14.         xhttp = new XMLHttpRequest();
  15.     } else {
  17.         // code for IE6, IE5
  18.         xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  19.     }
  20.     // 2. 发送请求
  21.     xhttp.open("GET", "http://localhost:8080/AjaxStudy/ajaxServlet");
  22.     xhttp.send();
  24.     // 3. 获取响应
  25.     xhttp.onreadystatechange = function() {
  27.         if (this.readyState == 4 && this.status == 200) {
  29.             alert(this.responseText); 
  30.         }
  31.     };
  33. </script>
  34. </body>
  35. </html>

运行结果：
在这里插入图片描述
在这里插入图片描述

案例

这个案例的目的就是完成我们常见的像百度啊，那种点击搜索栏就会出现提示词那种异步请求，网页没有刷新，但是确实响应了，然后紧跟时代，这个案例我使用SpringBoot来做，最开始用的还是传统的MVC，但是说实话，太麻烦了，一大堆配置，调试都要半天。
在这里插入图片描述

数据库建表语句

  1. /*
  2.  Navicat MySQL Data Transfer
  4.  Source Server         : 本机
  5.  Source Server Type    : MySQL
  6.  Source Server Version : 80024
  7.  Source Host           : localhost:3306
  8.  Source Schema         : projectdatabase
  10.  Target Server Type    : MySQL
  11.  Target Server Version : 80024
  12.  File Encoding         : 65001
  14.  Date: 11/01/2023 20:27:49
  15. */
  17. SET NAMES utf8mb4;
  18. SET FOREIGN_KEY_CHECKS = 0;
  20. -- ----------------------------
  21. -- Table structure for user
  22. -- ----------------------------
  23. DROP TABLE IF EXISTS `user`;
  24. CREATE TABLE `user`  (
  25.   `id` int NOT NULL AUTO_INCREMENT,
  26.   `username` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  27.   `password` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  28.   PRIMARY KEY (`id`) USING BTREE
  29. ) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = DYNAMIC;
  31. -- ----------------------------
  32. -- Records of user
  33. -- ----------------------------
  34. INSERT INTO `user` VALUES (1, 'LIHUA', '123456');
  35. INSERT INTO `user` VALUES (2, 'zhangsan', '123');
  36. INSERT INTO `user` VALUES (3, 'LISI', '456489');
  37. INSERT INTO `user` VALUES (4, 'heheheh', '123456');
  38. INSERT INTO `user` VALUES (5, 'ahuang', '123');
  39. INSERT INTO `user` VALUES (6, 'dsdad', '154654');
  41. SET FOREIGN_KEY_CHECKS = 1;

在这里插入图片描述

项目结构

一定注意一点，就是这个后端的java类，一定要写在Springbootlogincheck包下面，不然会导致网址访问不到404错误。
在这里插入图片描述

User类
  1. package com.example.springbootlogincheck.Bean;
  3. import lombok.AllArgsConstructor;
  4. import lombok.Data;
  5. import lombok.NoArgsConstructor;
  7. @Data
  8. @AllArgsConstructor
  9. @NoArgsConstructor
  10. public class User {
  12.     private Integer id;
  13.     private String username;
  14.     private String password;
  15. }
IndexController类
  1. package com.example.springbootlogincheck.Controller;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  7. @Controller
  8. public class IndexController {
  10.     @RequestMapping("/")
  11.     public String index(){
  13.         return"admin/register.html";
  14.     }
  16. }
UserController
  1. package com.example.springbootlogincheck.Controller;
  3. import com.example.springbootlogincheck.Bean.User;
  4. import com.example.springbootlogincheck.Dao.UserDao;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.web.bind.annotation.GetMapping;
  8. import org.springframework.web.bind.annotation.ResponseBody;
  10. import javax.servlet.ServletException;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import java.io.IOException;
  14. import java.util.List;
  16. @Controller
  17. public class UserController {
  19.     @Autowired
  20.     UserDao userDao;
  23.     @ResponseBody
  24.     @GetMapping("/selectUser")
  25.     public String SelectUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  27.         String username = request.getParameter("username");
  28.         boolean flag = false;
  29.         List<User> list = userDao.selectList(null);
  30.         for (User user : list){
  32.             if (user.getUsername().equals(username)){
  34.                 flag = true;
  35.             }
  36.         }
  37.         if (flag) {
  38.       // 如果查到了就返回true字符串 反之就是false字符串
  39.             return "true";
  40.         }
  41.         return "false";
  42.     }
  43. }
UserDao
  1. package com.example.springbootlogincheck.Dao;
  3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  4. import com.example.springbootlogincheck.Bean.User;
  5. import org.apache.ibatis.annotations.Mapper;
  7. @Mapper
  8. public interface UserDao extends BaseMapper<User> {
  10. }

前端网页

register.css
  1. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     list-style-type: none;
  6. }
  7. .reg-content{
  9.     padding: 30px;
  10.     margin: 3px;
  11. }
  12. a, img {
  14.     border: 0;
  15. }
  17. body {
  19.     background-image: url("../imgs/reg_bg_min.jpg") ;
  20.     text-align: center;
  21. }
  23. table {
  25.     border-collapse: collapse;
  26.     border-spacing: 0;
  27. }
  29. td, th {
  31.     padding: 0;
  32.     height: 90px;
  34. }
  35. .inputs{
  37.     vertical-align: top;
  38. }
  40. .clear {
  42.     clear: both;
  43. }
  45. .clear:before, .clear:after {
  47.     content: "";
  48.     display: table;
  49. }
  51. .clear:after {
  53.     clear: both;
  54. }
  56. .form-div {
  58.     background-color: rgba(255, 255, 255, 0.27);
  59.     border-radius: 10px;
  60.     border: 1px solid #aaa;
  61.     width: 424px;
  62.     margin-top: 150px;
  63.     margin-left:1050px;
  64.     padding: 30px 0 20px 0px;
  65.     font-size: 16px;
  66.     box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
  67.     text-align: left;
  68. }
  70. .form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
  72.     width: 268px;
  73.     margin: 10px;
  74.     line-height: 20px;
  75.     font-size: 16px;
  76. }
  78. .form-div input[type="checkbox"] {
  80.     margin: 20px 0 20px 10px;
  81. }
  83. .form-div input[type="button"], .form-div input[type="submit"] {
  85.     margin: 10px 20px 0 0;
  86. }
  88. .form-div table {
  90.     margin: 0 auto;
  91.     text-align: right;
  92.     color: rgba(64, 64, 64, 1.00);
  93. }
  95. .form-div table img {
  97.     vertical-align: middle;
  98.     margin: 0 0 5px 0;
  99. }
  101. .footer {
  103.     color: rgba(64, 64, 64, 1.00);
  104.     font-size: 12px;
  105.     margin-top: 30px;
  106. }
  108. .form-div .buttons {
  110.     float: right;
  111. }
  113. input[type="text"], input[type="password"], input[type="email"] {
  115.     border-radius: 8px;
  116.     box-shadow: inset 0 2px 5px #eee;
  117.     padding: 10px;
  118.     border: 1px solid #D4D4D4;
  119.     color: #333333;
  120.     margin-top: 5px;
  121. }
  123. input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
  125.     border: 1px solid #50afeb;
  126.     outline: none;
  127. }
  129. input[type="button"], input[type="submit"] {
  131.     padding: 7px 15px;
  132.     background-color: #3c6db0;
  133.     text-align: center;
  134.     border-radius: 5px;
  135.     overflow: hidden;
  136.     min-width: 80px;
  137.     border: none;
  138.     color: #FFF;
  139.     box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
  140. }
  142. input[type="button"]:hover, input[type="submit"]:hover {
  144.     background-color: #5a88c8;
  145. }
  147. input[type="button"]:active, input[type="submit"]:active {
  149.     background-color: #5a88c8;
  150. }
  151. .err_msg{
  153.     color: red;
  154.     padding-right: 170px;
  155. }
  156. #password_err,#tel_err{
  158.     padding-right: 195px;
  159. }
  161. #reg_btn{
  163.     margin-right:50px; width: 285px; height: 45px; margin-top:20px;
  164. }
  166. #checkCode{
  168.     width: 100px;
  169. }
  171. #changeImg{
  173.     color: aqua;
  174. }
img

a.jpg
在这里插入图片描述

reg_bg_min.jpg
在这里插入图片描述

register.html

js部分
在这个js部分里面，一个点需要注意一下，就是这个responseText这个属性，这个属性接受的值首先是String类型，然后了，这个值就是访问的链接下对应的方法的返回值的对应的String类型格式。

  1. <script>
  3.     //1. 给用户名输入框绑定 失去焦点事件
  4.     document.getElementById("username").onblur = function () {
  6.         //2. 发送ajax请求
  7.         // 获取用户名的值
  8.         var username = this.value;
  10.         //2.1. 创建核心对象
  11.         var xhttp;
  12.         if (window.XMLHttpRequest) {
  14.             xhttp = new XMLHttpRequest();
  15.         } else {
  17.             // code for IE6, IE5
  18.             xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  19.         }
  20.         //2.2. 发送请求
  21.         xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
  22.         xhttp.send();
  24.         //2.3. 获取响应
  25.         xhttp.onreadystatechange = function() {
  27.             if (this.readyState == 4 && this.status == 200) {
  29.                 //alert(this.responseText);
  30.                 //判断
  31.                 if(this.responseText == "true"){
  33.                     //用户名存在，显示提示信息
  34.                     document.getElementById("username_err").style.display = '';
  35.                 }else {
  37.                     //用户名不存在 ，清楚提示信息
  38.                     document.getElementById("username_err").style.display = 'none';
  39.                 }
  40.             }
  41.         };
  43.     }
  44. </script>

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>欢迎注册</title>
  6.     <link href="css/register.css" rel="stylesheet">
  7. </head>
  8. <body>
  10. <div class="form-div">
  11.     <div class="reg-content">
  12.         <h1>欢迎注册</h1>
  13.         <span>已有帐号？</span> <a href="login.html">登录</a>
  14.     </div>
  15.     <form id="reg-form" action="#" method="get">
  17.         <table>
  19.             <tr>
  20.                 <td>用户名</td>
  21.                 <td class="inputs">
  22.                     <input name="username" type="text" id="username">
  23.                     <br>
  24.                     <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
  25.                 </td>
  27.             </tr>
  29.             <tr>
  30.                 <td>密码</td>
  31.                 <td class="inputs">
  32.                     <input name="password" type="password" id="password">
  33.                     <br>
  34.                     <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
  35.                 </td>
  36.             </tr>
  39.             <tr>
  40.                 <td>验证码</td>
  41.                 <td class="inputs">
  42.                     <input name="checkCode" type="text" id="checkCode">
  43.                     <img src="imgs/a.jpg">
  44.                     <a href="#" id="changeImg">看不清？</a>
  45.                 </td>
  46.             </tr>
  48.         </table>
  50.         <div class="buttons">
  51.             <input value="注 册" type="submit" id="reg_btn">
  52.         </div>
  53.         <br class="clear">
  54.     </form>
  56. </div>
  58. <script>
  60.     //1. 给用户名输入框绑定 失去焦点事件
  61.     document.getElementById("username").onblur = function () {
  63.         //2. 发送ajax请求
  64.         // 获取用户名的值
  65.         var username = this.value;
  67.         //2.1. 创建核心对象
  68.         var xhttp;
  69.         if (window.XMLHttpRequest) {
  71.             xhttp = new XMLHttpRequest();
  72.         } else {
  74.             // code for IE6, IE5
  75.             xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  76.         }
  77.         //2.2. 发送请求
  78.         xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
  79.         xhttp.send();
  81.         //2.3. 获取响应
  82.         xhttp.onreadystatechange = function() {
  84.             if (this.readyState == 4 && this.status == 200) {
  86.                 //alert(this.responseText);
  87.                 //判断
  88.                 if(this.responseText == "true"){
  90.                     //用户名存在，显示提示信息
  91.                     document.getElementById("username_err").style.display = '';
  92.                 }else {
  94.                     //用户名不存在 ，清楚提示信息
  95.                     document.getElementById("username_err").style.display = 'none';
  96.                 }
  97.             }
  98.         };
  100.     }
  101. </script>
  102. </body>
  103. </html>

效果展示：
如果输入的账户在失去焦点之后，发现这个用户没有在数据库中存在就不会发生啥。
在这里插入图片描述
如果存在的话就显示这个信息，已经存在了。
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，38人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Ajax基础

    AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 通过在后台与服

    冷不防冷不防/ 0 赞/ 79 阅读