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

代码语言：javascript代码运行次数：0运行复制

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

4.0.0

org.example

AjaxStudy

war

1.0-SNAPSHOT

AjaxStudy Maven Webapp

http://maven.apache.org

8

8

javax.servlet

javax.servlet-api

3.1.0

provided

com.alibaba

fastjson

1.2.62

org.apache.tomcat.maven

tomcat7-maven-plugin

2.2

第三步：

AjaxServlet

代码语言：javascript代码运行次数：0运行复制package com.jakelihua.servlet;

import javax.servlet.*;

import javax.servlet.http.*;

import javax.servlet.annotation.*;

import java.io.IOException;

@WebServlet("/ajaxServlet")

public class AjaxServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//1. 响应数据

response.getWriter().write("hello ajax~");

}

@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doGet(request, response);

}

}第四步：

进入w3c官网查看教程

https://www.w3school.com.cn/js/js_ajax_intro.asp

创建核心对象

代码语言：javascript代码运行次数：0运行复制var xhttp;

if (window.XMLHttpRequest) {

xhttp = new XMLHttpRequest();

} else {

// code for IE6, IE5

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}发送请求

代码语言：javascript代码运行次数：0运行复制xhttp.open("GET", "http://localhost:8080/AjaxStudy/ajaxServlet");

xhttp.send();获取响应代码语言：javascript代码运行次数：0运行复制xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

alert(this.responseText); // 我们这里显示一下这个后端反馈的文本

}

};完整代码：

代码语言：javascript代码运行次数：0运行复制

运行结果：

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

数据库建表语句代码语言：javascript代码运行次数：0运行复制/*

Navicat MySQL Data Transfer

Source Server : 本机

Source Server Type : MySQL

Source Server Version : 80024

Source Host : localhost:3306

Source Schema : projectdatabase

Target Server Type : MySQL

Target Server Version : 80024

File Encoding : 65001

Date: 11/01/2023 20:27:49

*/

SET NAMES utf8mb4;

SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------

-- Table structure for user

-- ----------------------------

DROP TABLE IF EXISTS `user`;

CREATE TABLE `user` (

`id` int NOT NULL AUTO_INCREMENT,

`username` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,

`password` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,

PRIMARY KEY (`id`) USING BTREE

) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = DYNAMIC;

-- ----------------------------

-- Records of user

-- ----------------------------

INSERT INTO `user` VALUES (1, 'LIHUA', '123456');

INSERT INTO `user` VALUES (2, 'zhangsan', '123');

INSERT INTO `user` VALUES (3, 'LISI', '456489');

INSERT INTO `user` VALUES (4, 'heheheh', '123456');

INSERT INTO `user` VALUES (5, 'ahuang', '123');

INSERT INTO `user` VALUES (6, 'dsdad', '154654');

SET FOREIGN_KEY_CHECKS = 1;项目结构一定注意一点，就是这个后端的java类，一定要写在Springbootlogincheck包下面，不然会导致网址访问不到404错误。

User类代码语言：javascript代码运行次数：0运行复制package com.example.springbootlogincheck.Bean;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

@Data

@AllArgsConstructor

@NoArgsConstructor

public class User {

private Integer id;

private String username;

private String password;

}IndexController类代码语言：javascript代码运行次数：0运行复制package com.example.springbootlogincheck.Controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

public class IndexController {

@RequestMapping("/")

public String index(){

return"admin/register.html";

}

}UserController代码语言：javascript代码运行次数：0运行复制package com.example.springbootlogincheck.Controller;

import com.example.springbootlogincheck.Bean.User;

import com.example.springbootlogincheck.Dao.UserDao;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.List;

@Controller

public class UserController {

@Autowired

UserDao userDao;

@ResponseBody

@GetMapping("/selectUser")

public String SelectUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String username = request.getParameter("username");

boolean flag = false;

List list = userDao.selectList(null);

for (User user : list){

if (user.getUsername().equals(username)){

flag = true;

}

}

if (flag) { // 如果查到了就返回true字符串 反之就是false字符串

return "true";

}

return "false";

}

}UserDao代码语言：javascript代码运行次数：0运行复制package com.example.springbootlogincheck.Dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;

import com.example.springbootlogincheck.Bean.User;

import org.apache.ibatis.annotations.Mapper;

@Mapper

public interface UserDao extends BaseMapper {

}前端网页register.css代码语言：javascript代码运行次数：0运行复制* {

margin: 0;

padding: 0;

list-style-type: none;

}

.reg-content{

padding: 30px;

margin: 3px;

}

a, img {

border: 0;

}

body {

background-image: url("../imgs/reg_bg_min.jpg") ;

text-align: center;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

td, th {

padding: 0;

height: 90px;

}

.inputs{

vertical-align: top;

}

.clear {

clear: both;

}

.clear:before, .clear:after {

content: "";

display: table;

}

.clear:after {

clear: both;

}

.form-div {

background-color: rgba(255, 255, 255, 0.27);

border-radius: 10px;

border: 1px solid #aaa;

width: 424px;

margin-top: 150px;

margin-left:1050px;

padding: 30px 0 20px 0px;

font-size: 16px;

box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);

text-align: left;

}

.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {

width: 268px;

margin: 10px;

line-height: 20px;

font-size: 16px;

}

.form-div input[type="checkbox"] {

margin: 20px 0 20px 10px;

}

.form-div input[type="button"], .form-div input[type="submit"] {

margin: 10px 20px 0 0;

}

.form-div table {

margin: 0 auto;

text-align: right;

color: rgba(64, 64, 64, 1.00);

}

.form-div table img {

vertical-align: middle;

margin: 0 0 5px 0;

}

.footer {

color: rgba(64, 64, 64, 1.00);

font-size: 12px;

margin-top: 30px;

}

.form-div .buttons {

float: right;

}

input[type="text"], input[type="password"], input[type="email"] {

border-radius: 8px;

box-shadow: inset 0 2px 5px #eee;

padding: 10px;

border: 1px solid #D4D4D4;

color: #333333;

margin-top: 5px;

}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {

border: 1px solid #50afeb;

outline: none;

}

input[type="button"], input[type="submit"] {

padding: 7px 15px;

background-color: #3c6db0;

text-align: center;

border-radius: 5px;

overflow: hidden;

min-width: 80px;

border: none;

color: #FFF;

box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);

}

input[type="button"]:hover, input[type="submit"]:hover {

background-color: #5a88c8;

}

input[type="button"]:active, input[type="submit"]:active {

background-color: #5a88c8;

}

.err_msg{

color: red;

padding-right: 170px;

}

#password_err,#tel_err{

padding-right: 195px;

}

#reg_btn{

margin-right:50px; width: 285px; height: 45px; margin-top:20px;

}

#checkCode{

width: 100px;

}

#changeImg{

color: aqua;

}imga.jpg

reg_bg_min.jpg

register.htmljs部分

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

代码语言：javascript代码运行次数：0运行复制完整代码：

代码语言：javascript代码运行次数：0运行复制

效果展示：

如果输入的账户在失去焦点之后，发现这个用户没有在数据库中存在就不会发生啥。

如果存在的话就显示这个信息，已经存在了。