AJAX学习（二）

发表于 分类于 ， 阅读次数：

AJAX学习（二）

相关学习代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax get 请求</title>
    <script>
      window.onload=function (){
        document.getElementById("btm").onclick=function (){
          var xmlHttpRequest = new XMLHttpRequest();
          xmlHttpRequest.onreadystatechange=function (){
            if(this.readyState==4){
              if(this.status==200){
                document.getElementById("myspan").innerHTML=this.responseText;
              }else {
                alert(this.status);
              }
            }
          }
          var currutTime = new Date().getTime();
          var usercode = document.getElementById("usercode").value;
          var username = document.getElementById("username").value;
          xmlHttpRequest.open("GET","/old/ajax2?t="+currutTime+"&usercode="+usercode+"&username="+username,true);
          xmlHttpRequest.send();
        }
      }
    </script>
</head>
<body>
usercode<input type="text" id="usercode"><br>
username<input type="text" id="username"><br>
<button id="btm">发送ajax get请求</button><br>
<span id="myspan"></span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.xiaoguan.request;

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;

@WebServlet("/ajax2")
public class ajax2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String usercode = req.getParameter("usercode");
        String username = req.getParameter("username");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out=resp.getWriter();
        //out.print("<font color='red'>用户名已存在</font>");
        out.print(usercode+","+username);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax post请求</title>
    <script>
      window.onload=function (){
        document.getElementById("bnt").onclick=function (){
          var xmlHttpRequest = new XMLHttpRequest();
          xmlHttpRequest.onreadystatechange=function (){
            if (this.readyState == 4) {
              if (this.status == 200) {
                document.getElementById("mydiv").innerHTML=this.responseText;
              }else {
                alert(this.status);
              }
            }
          }
          xmlHttpRequest.open("POST","/old/ajax3",true);
          xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//要放在open后面send之前,表单设计格式
          var username = document.getElementById("username").value;
          var password = document.getElementById("password").value;
          xmlHttpRequest.send("username="+username+"&password="+password);
        }
      }
    </script>
</head>
<body>
用户名<input type="text" id="username"/><br>
密码<input type="password" id="password"/><br>
<button id="bnt">发送post请求</button>
<div id="mydiv"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.xiaoguan.request;

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;

@WebServlet("/ajax3")
public class ajax3Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out=resp.getWriter();
        //out.print("<font color='red'>用户名已经存在！</font>");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        out.print(username+","+password);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>POSt验证用户名是否可用</title>
    <script>
      window.onload=function (){
        document.getElementById("username").onfocus=function (){
            document.getElementById("tip").innerHTML="";
        }
        document.getElementById("username").onblur=function (){
          var xmlHttpRequest = new XMLHttpRequest();
          xmlHttpRequest.onreadystatechange=function (){
            if(this.readyState==4){
              if(this.status==200){
                document.getElementById("tip").innerHTML=this.responseText;
              }else{
                alert(this.status)
              }
            }
          }
          xmlHttpRequest.open("POST","/old/ajax4",true);
          xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          var username = document.getElementById("username").value;
          xmlHttpRequest.send("username="+username);
        }
      }
    </script>
</head>
<body>
用户名<input type="text" id="username"/>
<span id="tip"></span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
package com.xiaoguan.request;

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("/ajax4")
public class ajax4Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        PrintWriter out=response.getWriter();
        String username = request.getParameter("username");
        Connection conn=null;
        PreparedStatement ps=null;
        ResultSet rs=null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/xiaoguan","root","68963120g");
            String sql="select 登录名 from login where 登录名=?";
            ps=conn.prepareStatement(sql);
            ps.setString(1,username);
            rs=ps.executeQuery();
            if(rs.next()){
                out.print("<font color=green>用户名可用</font>");
            }else {
                out.print("<font color=red>用户名不可用</font>");
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } 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 (rs!=null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    throw new RuntimeException(e);
                }
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax请求,显示学生列表</title>
    <script>
        window.onload=function (){
            document.getElementById("btm").onclick=function (){
                var xmlHttpRequest = new XMLHttpRequest();
                xmlHttpRequest.onreadystatechange=function (){
                    if(this.readyState==4){
                        if(this.status==200){
                            //document.getElementById("info").innerHTML=xmlHttpRequest.responseText;
                            var stuList = JSON.parse(this.responseText);
                            var html="";
                            for(var i=0;i<stuList.length;i++){
                                var stu=stuList[i];
                                html+="<tr>"
                                html+=" <td>"+(i+1)+"</td>"
                                html+="<td>"+stu.name+"</td>"
                                html+="<td>"+stu.age+"</td>"
                                html+="<td>"+stu.addr+"</td>"
                                html+="</tr>"
                            }
                            document.getElementById("info").innerHTML=html;
                        }else {
                            alert(this.status);
                        }
                    }
                }
                xmlHttpRequest.open("GET","/old/ajax5",true);
                xmlHttpRequest.send();
            }
        }
    </script>
</head>
<body>
<input type="button" value="显示学员列表" id="btm">
<table width="50%" border="1px">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>住址</th>
    </tr>
  <tbody id="info">
    <!--<tr>
      <td>1</td>
      <td>admin</td>
      <td>123456</td>
      <td>admin</td>
    </tr>-->
  </tbody>
</table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package com.xiaoguan.request;

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;

@WebServlet("/ajax5")
public class ajax5Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        /*StringBuilder html=new StringBuilder();
        html.append("<tr>");
        html.append("  <td>1</td>");
        html.append("  <td>admin</td>");
        html.append("  <td>123456</td>");
        html.append("  <td>admin</td>");
        html.append("</tr>");
        out.print(html);*/
        //拼接html换成json格式字符串
        String json="[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大兴区\"},{\"name\":\"李四\",\"age\":30,\"addr\":\"北京海淀区\"}]";
        out.print(json);
    }
}