AJAX学习（一）

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

AJAX学习（一）

  • XMLHttpRequest对象的readyState属性对应的状态值
    • 0请求未初始化
    • 1服务器连接已经建立
    • 2请求已收到
    • 3正在处理请求
    • 4请求已完成且响应已就绪

相关代码

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
<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>get请求</title>
    <script>
      window.onload=function (){
        document.getElementById("helloajax").onclick=function (){
          //创建ajax的核心对象XMLHttpRequest
          var xhr=new XMLHttpRequest();
          //注册回调函数
          xhr.onreadystatechange=function (){
            if (this.readyState == 4) {
              if(this.status==404){
                alert("你访问的资源不存在");
              }else if(this.status==500){
                alert("服务器内部发生错误，请联系管理员");
              }else if(this.status==200){
                //获取响应信息
                  console.log(this.responseText);
                  document.getElementById("mydiv").innerHTML=this.responseText;
              }else {
                alert("出现了其他错误")
              }

              //响应结束了
              //status返回http响应状态码
            }
          }
          //open(method,url,async,user,psw)
          //method请求方式
          //url请求的路径
          //async 用true表示此ajax是一个异步请求，false表示此ajax是一个同步请求
          //user用户名
          //psw密码（要服务器上的一些资源可能要密码和用户名）
          //开启通道
          xhr.open("get","/old/ajaxrequest1",true);//只是通道打开，还没有发送请求
          //发送请求
          xhr.send();
        }
      }
    </script>
</head>
<body>
<input type="button" value="hello ajax" id="helloajax">
<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
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("/request")
public class OldRequestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        out.print("<h1>欢迎AJAX<h1>");

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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("/ajaxrequest1")
public class ajax1Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out=response.getWriter();
        out.print("你好！AJAX!");
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>演示传统请求，及传统请求的缺点</title>
</head>
<body>
<a href="/old/request">传统请求超链接</a><br>
<form action="/old/request" method="get">
  <input type="submit" value="传统请求（form表单）">
</form>
<br>
<input type="button" value="通过js发送请求" onclick="sendRequest()">
<script>
  function sendRequest(){
    window.location.href="/old/request"
  }
</script>
</body>
</html>