Ajax 技术学习 （Java EE 实现） —— 用户账户的验证

• 异步：页面向服务器发送请求之后不必等待返回结果，服务器返回的结果会由专门的回调函数来处理结果

• 回调函数【补充】：这个函数中，会检查请求的状态，如果请求的状态完成，并且没有发现服务端出现错误，那么将会从该服务器返回的数据进行处理并通常以某种形式显示输出到页面上 —— JavaScript 学习指南（第二版）

1.2 在哪里我们会用到 ajax

最常见的例子，我们在网上打开某一个在线翻译软件，比如百度翻译，我们在翻译的左侧输入内容，其实后台已经在帮我们查找我们可能要翻译的任何内容，当我们输入完毕之后，过了一会就自动显示出结果了，这就是 ajax 技术的应用，在我们没有察觉的情况下，就自动显示结果

1.3 ajax 的工作原理

Ajax 首先会向服务端发送一个请求，然后调用一个服务（回调函数），接着返回结果。这样使 客户端 和 服务端发生了少量的数据交换，ajax 实现局部页面的更新，从而减少了服务端的压力

但是为了管理服务端 和 客户端之间的异步通信，会用到一个特殊的对象，就是上面提到过的 XMLHttpRequest 对象

1.4 XMLHttpRequest 对象

1.4.1 XMLHttpRequest 常用方法

JavaScript 对象 XMLHttpRequest 是整个 Ajax 技术的核心，他提供了异步发送请求的能力，它提供了 三个常用的方法

| 方法名 | 说明 |

| — | — |

| open(method,URL,async,username,password) | 建立与服务器的链接，method参数指定请求 http的方法，最常见的是 get 请求和 post 方法， URL 参数指定请求的地址，async 参数指定是否使用异步请求，值为 true 或 false,最后两个参数 在做 htto 认证的时候会用得到 |

| send(content) | 发送请求道服务器，content 参数指定请求的参数，get 请求不需要传参数，post 请求要把请求的参数写上去 |

| setRequestHeader(header,value) | 设置请求头信息 |

1.4.2 XMLHttpRequest 常用属性

1. onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数

2. readystate：XMLHttpRequest 的状态信息如下，

| 就绪状态码 | 说 明 |

| — | — |

| 0 | XMLHttpRequest 对象 没有完成初始化 |

| 1 | XMLHttpRequest 对象 开始发送请求 |

| 2 | XMLHttpRequest 对象 的请求发送完成 |

| 3 | XMLHttpRequest 对象 读取响应 |

| 4 | XMLHttpRequest 对象 读取响应表结束，数据接收完成 |

3. status： HTTP 的状态码

下面给大家介绍一些常见的 http 状态码，想更多了解的请移步 —— http 响应状态码大全

• 200 成功

• 400 客户端错误，404 页面不存在，403 没有权限访问

• 500 服务端发生错误

4. responseText：获取响应的内容

注意：当 readystate 为 4，而且 status 是200，才可以处理服务器响应的数据

5. responseXML：服务器返回的兼容DOM的XML内容

6. statusText：服务器返回状态码的文本信息

二、让我们来试一试吧

=========================================================================

由于博主本科是学 Java 的，也对 java EE 比较熟悉，因此我们验证 ajax 就是用 jsp + servlet + JavaScript + ajax 来实现

2.1 简单的使用 ajax ，验证用户名是否合法

我们要实现一个简单的功能，我们注册用户名为 admin 的时候，系统会显示账号已经被注册，输入其他账号，系统可以正常运行

2.1.1 前端 demo （index.jsp）

span 标签用来显示服务端传过来的数据

<%@ page language=“java” contentType=“text/html; charset=UTF-8”

pageEncoding=“UTF-8”%>

用户名:

密 码:

2.1.2 JavaScript demo （post 请求）

1. 编写 onblur 事件，进行账号 非空验证

2. 编写 XMLHttpRequest 对象

3. 创建 http 请求

4. 把文本框的内容发送给 http 请求的目标

5. 指定回调函数

6. 编写回调函数

7. 发送 http 请求

8. 将回调函数得到的内容，显示到 div 上面

这里我封装了两个函数

1. checkUserExit() 账户非空验证

2. doAjax(url); // 原生 ajax 应用

2.1.3 JavaScript demo （get 请求）

get 请求和 post 请求的代码大体都是相同的，只有两个地方不一样

1. 我们可以直接在 url 上加上我们要传递的参数：doAjax('AjaxCheck?username='+username);

2. 回调函数中，我们最后发送数据的时候，传递的参数为 null 即可：xmlhttp.send(null);

备注：

我们使用 get 请求的时候，可以不用传递头参数

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Java）

独家面经总结，超级精彩

本人面试腾讯，阿里，百度等企业总结下来的面试经历，都是真实的，分享给大家！

Java面试准备

准确的说这里又分为两部分：

1. Java刷题
2. 算法刷题

Java刷题：此份文档详细记录了千道面试题与详解；

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
片转存中…(img-gXKTI9JH-1713808747457)]

[外链图片转存中…(img-JqJqzUPz-1713808747457)]

[外链图片转存中…(img-eHMXzNqg-1713808747458)]

[外链图片转存中…(img-QyjXHeql-1713808747458)]

Java面试准备

准确的说这里又分为两部分：

1. Java刷题
2. 算法刷题

Java刷题：此份文档详细记录了千道面试题与详解；

[外链图片转存中…(img-6GuJnvmT-1713808747458)]

[外链图片转存中…(img-AJTyhr47-1713808747458)]

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！