AJax入门案例（代码实现）

太过爱你忘了你带给我的痛 2023-10-02 21:22 14阅读 0赞

#### AJax工作原理 ####

![在这里插入图片描述][e3e29c6325614598844a0db492babca0.png]

#### AJax请求的五个步骤 ####

1.  创建XMLHttpRequest异步对象
2.  设置回调函数
3.  使用open方法与服务器建立连接
4.  向服务器发送数据
5.  在回调函数中针对不同的响应状态进行处理

#### 代码实现 ####

##### 功能需求： #####

根据用户输入的用户名判断该用户名是否存在（已有用户名存储在数据库中）

##### 代码： #####

**jsp页面**

<body>
        <form>
            请输入用户名：<input type="text" id="userName">
            <%-- 提示信息--%>
            <span id="tips"></span>
        </form>
    </body>

**ServletAjax页面**

@WebServlet("/ServletAjax")
    public class ServletAjax extends HttpServlet {
        
        // 调用UserInfoservice中方法
        UserInfoService userInfoService = new UserInfoService();
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            this.doPost(req, resp);
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            // 设置编码
            req.setCharacterEncoding("utf-8");
    		resp.setCharacterEncoding("utf-8");
    
            // 获取请求参数
            String userName = req.getParameter("userName");
            // 响应回客户端
            PrintWriter out = resp.getWriter();
    		// 如果存在
             if (userInfoService.alreadyExist(userName)) {
        
                out.print("用户名可用！");
            } else {
        
                out.print("用户名重复！");
            }
        }
    }

UserInfoService中alreadyExist()方法

public boolean alreadyExist(String userName) {
        
            boolean flag = false;
            UserInfo userInfo = userInfoDao.alreadyExist(userName);
            System.out.println(userInfo);
            if (userInfo == null) {
        
                flag = true;
            }
            return flag;
        }

**jsp页面中script脚本**

**效果展示**  
![在这里插入图片描述][05341990f3dd4658987d7f5942687c4e.png]  
![在这里插入图片描述][2060f311e2f84bf7a82327b1e4f2b915.png]  
![在这里插入图片描述][41c01ae7bc904e5bb1554c0a93398631.png]

#### 指定回调函数：即设定onreadystatechange属性 ####

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：  
![在这里插入图片描述][ee0df221f2774cfbaadf28993a4f5e77.png]

### 封装增强版 ###

##### 在jsp页面中添加如下代码 #####

##### servlet页面（ServletNewsType类） #####

@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            response.setCharacterEncoding("UTF-8");
            request.setCharacterEncoding("UTF-8");
            // 获取jsp页面ajax传递过来的option的值
            String option = request.getParameter("option");
            if ("getIt".equals(option)) {
        
            	getIt(request, response);
            }
        }
    // getIt()方法
    protected void getIt(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            String mess = "获取到ServletNewsType中的值了";
            // 设置响应格式
            response.setContentType("application/json;charset=utf-8");
            // 创建Gson对象
            Gson gson = new Gson();
            String gsonMess = gson.toJson(mess);
            // 将mess数据传回jsp页面
            response.getWriter().print(gsonMess);
        }

##### 测试结果 #####

启动tomcat点击页面打开控制台，从ajax响应再到ajax接收  
![在这里插入图片描述][840744c6760b498185bd9739af2bcf2e.png]

完~

[e3e29c6325614598844a0db492babca0.png]: https://img-blog.csdnimg.cn/e3e29c6325614598844a0db492babca0.png
[05341990f3dd4658987d7f5942687c4e.png]: https://img-blog.csdnimg.cn/05341990f3dd4658987d7f5942687c4e.png
[2060f311e2f84bf7a82327b1e4f2b915.png]: https://img-blog.csdnimg.cn/2060f311e2f84bf7a82327b1e4f2b915.png
[41c01ae7bc904e5bb1554c0a93398631.png]: https://img-blog.csdnimg.cn/41c01ae7bc904e5bb1554c0a93398631.png
[ee0df221f2774cfbaadf28993a4f5e77.png]: https://img-blog.csdnimg.cn/ee0df221f2774cfbaadf28993a4f5e77.png
[840744c6760b498185bd9739af2bcf2e.png]: https://img-blog.csdnimg.cn/840744c6760b498185bd9739af2bcf2e.png