【AJAX】入门AJAX

假正经的小柴

已于 2022-12-21 12:45:29 修改

阅读量673

点赞数 3

文章标签： ajax javascript servlet

于 2022-12-20 17:53:47 首次发布

本文链接：https://blog.csdn.net/qq_63691275/article/details/128352500

版权

入门AJAX

AJAX概述
AJAX的使用
- XMLHttpRequest
使用AJAX POST请求实现‘判断用户名’案例

AJAX概述

什么是AJAX？

AJAX全称（Asynchoronous JavaScript And XML）异步JavaScript和XML；
在没学AJAX之前，向服务器发送请求，响应后在浏览器渲染页面上，即使是只要更新一点局部页面，也会将整个页面刷新；
不使用AJAX的缺点：

性能会有所下降；
用户的操作会中断，整个页面会刷新（就是说在页面未刷新之前无法进行其他操作，影响用户体验）。
使用AJAX就可以使得不刷新整个页面的情况下，与服务器进行异步通信。

AJAX作用

AJAX就是可以做到局部刷新！！！
可以减轻服务器负担。

在这里插入图片描述

AJAX是一种工具，是以下技术的结合：

(1)XHTML和CSS的基于标准的表示技术
(2)DOM进行动态显示和交互
(3)XML和XSLT进行数据交换和处理
(4)XMLHttpRequest进行异步数据检索
(5)Javascript将以上技术融合在一起

AJAX的使用

传统的web前后端交互中，是浏览器直接访问Tomcat服务器中的Servlet来获取数据，Servlet通过转发数据发送给浏览器，然后浏览器渲染。
当使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器，XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】

注意：使用AJAX编写的是前端代码，而不是后端代码。

在这里插入图片描述

XMLHttpRequest

创建XMLHttpRequest对象

<script type="text/javascript">
	window.onload = function(){
	var xml = new XMLHttpRequest()
}
</script>

XMLHttpRequest对象的常用方法

open(String method,String url,boolean asynchor,String username,String password)

该方法用于打开连接服务器端的通道，创建http请求。
method参数是指请求的提交方式（get,post...）；
url参数是指提交的路径；
asynchor参数是指是否选择异步；
username和password参数是可选参数，用于用户认证。

send()

发送get请求给服务器，这是由于url路径的组件（参数param，查询query，片段frag组件）是在请求行上的，可以直接在open参数url中进行写入。

send(String content)

发送post请求给服务器。这里会把content放入请求体中发送给服务器。

setRequestHeader(String header,String value)

用于设置消息头。让请求以form表单的形式呈现，使得可以在后端读取到数据。仅在以post形式提交时才用的上。

代码固定如下：

setRequestHeader("Content-type","application/x-www-form-urlencoded");

注意：设置消息头要在开启通道之后，发送请求之前。

XMLHttpRequest对象的常用属性

readState

该属性是请求状态的显示。一共有五大状态：

0状态：AJAX异步对象已经创建好了，但是还没打开通道。
1状态：open方法已被调用，还没发送请求。
2状态：send方法已经被调用，但是还没有到达服务器。
3状态：请求已经到达服务器，正在响应的过程中。
4状态：AJAX异步对象已经接受到了响应的数据。

在这里插入图片描述

onreadstatechage

该属性是指请求状态readState改变了的事件触发器，通常会指定一个回调函数用于执行事件过程。
该事件过程就是接受服务器响应的内容。

responseText

服务器返回的文本内容.

responseXML

服务器返回的兼容DOM的XML内容。

status

服务器返回的状态码（404,405,500,200…)

在这里插入图片描述

使用AJAX POST请求实现‘判断用户名’案例

实现步骤

在前端：用户名输入用户名之后，失去表单焦点事件blur发生，然后发送AJAX POST请求，提交用户名；
在后端：接受到用户名，连接数据库，根据用户名在表单中搜索；
判断：
如果用户名已经存在：后端效应消息：sorry，用户名已存在（以红色字体呈现）
如果用户名不存在：可以响应一个勾（这里响应用户名可以使用，以绿色字体呈现）

在这里插入图片描述

模拟数据库表单

下面是已创建的t_user表，里面有两个数据：

在这里插入图片描述

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX POST请求验证用户名是否可用</title>
</head>
<body>

<script type="text/javascript">
  window.onload = function(){
      var xhr = new XMLHttpRequest()
    document.getElementById("username").onblur = function(){
      xhr.onreadystatechange = function(){
        if(this.readyState==4){
          if(this.status==200){
            var myspan = document.getElementById("myspan")
              myspan.innerHTML = this.responseText

          }else{
            alert(this.status)
          }
        }
      }
      xhr.open("POST","/ajax/ajax3",true)

      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
      var username = document.getElementById("username").value

      xhr.send("username="+username)
    }
    document.getElementById("username").onfocus = function(){

        document.getElementById("myspan").innerText = ""
    }
  }
</script>

用户名：<input type="text" id="username" name="username"/>
<span id="myspan"></span>

</body>
</html>

后端程序

package javaweb.ajaxstudy;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;

/**
 * 验证用户名是否可用
 */
@WebServlet("/ajax3")
public class AjaxRequest3Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");

        // 下面写JDBC代码
        boolean flag = false;//用于判断用户名是否存在
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try{
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/stu","root","myz031119");
            String sql = "select * from t_user where name=?";
            ps = conn.prepareStatement(sql);
            ps.setString(1,username);
            rs = ps.executeQuery();
            if(rs.next()){
                flag = true;
            }
        }catch(ClassNotFoundException e){
            e.printStackTrace();
        }catch(SQLException e){
            e.printStackTrace();
        }finally{
            if(rs!=null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
            if(conn!=null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
        }
        if(username!="") {
            if (flag) {
                out.print("<font color='red'>Sorry，用户名已存在</font>");
            } else {
                out.print("<font color='green'>用户名可以使用</font>");
            }
        }

    }
}