AJAX之GET与POST

2022-08-15
2

1.XMLHttpRequest

1.1 作用

在了解使用AJAX发送GET或者POST请求之前,我们先来了解一下XMLHttpRequest对象。

  • XMLHttpRequest对象是AJAX的核心对象,发送请求以及接收服务器数据的返回,全靠它进行
  • XMLHttpRequest对象是浏览器内置对象,大部分浏览器都是支持XMLHttpRequest对象的
    请添加图片描述

1.2 常见方法

方法 描述
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw) 规定请求method:请求类型 GET 或 POSTurl:文件位置async:true(异步)或 false(同步)user:可选的用户名称psw:可选的密码
send() 将请求发送到服务器,用于 GET 请求
send(string) 将请求发送到服务器,用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对

1.3 常见属性

属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态。0:请求未初始化 1:服务器连接已建立 2:请求已收到 3:正在处理请求 4:请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号200: "OK"403: "Forbidden"404: “Not Found”
statusText 返回状态文本(比如 “OK” 或 “Not Found”)

2.GET

2.1 步骤

使用AJAX向服务器发送请求有四步:

  • 创建AJAX核心对象XMLHttpServlet

  • 注册回调函数

  • 开启通道

  • 发送请求

2.2 例子

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax get请求</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            //1. 创建AJAX核心对象
            var xhr = new XMLHttpRequest();
            //2. 注册回调函数
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
                        // 并且不管服务器响应回来的是什么,都以普通文本的形势获取。(服务器可能响应回来:普通文本、XML、JSON、HTML...)
                        // innerHTML属性是javascript中的语法,和ajax的XMLHttpRequest对象无关。
                        // innerHTML可以设置元素内部的HTML代码。(innerHTML可以将后面的内容当做一段HTML代码解释并执行)
                        //document.getElementById("myspan").innerHTML = this.responseText
                        document.getElementById("mydiv").innerHTML = this.responseText
                        // innerText也不是AJAX中的,是javascript中的元素属性,和XMLHttpRequest无关。
                        // innerText也是设置元素中的内容,但是即使后面是一段HTML代码,也是将其看做一个普通字符串设置进去。
                        //document.getElementById("myspan").innerText = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            //3. 开启通道
            xhr.open("GET", "/ajax/ajaxrequest2", true)
            //4. 发送请求
            xhr.send()
        }
    }
</script>
<button id="btn">发送ajax get请求</button>
<span id="myspan"></span>
<div id="mydiv"></div>
</body>
</html>

这样当我们点击“发送ajax get请求”这个按钮,就会发送AJAX请求到服务器执行对应Servlet类。

package com.bjpowernode.ajax.servlet;

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("/ajaxrequest2")
public class AjaxRequest2Servlet 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("<font color='red'>用户名已存在!!!</font>");
    }
}

即将AjaxRequest2Servlet中的响应内容,根据前端代码中的第22行作为HTML语言解析到浏览器实现对页面的局部更新。

2.3 GET缓存问题

对于低版本的IE浏览器来说,AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说,大部分浏览器都已经不存在AJAX get缓存问题了。

在HTTP协议中,GET请求会留下缓存,而POST请求不会留下缓存。而低版本的IE浏览器中,当第二次访问一个网站时,就会走缓存。

缓存有优点也有缺点

  • 优点:直接从浏览器缓存中获取资源,不需要从服务器上重新加载资源,速度较快,用户体验好。
  • 缺点:无法实时获取最新的服务器资源。

解决办法

可以在请求路径url后面添加一个时间戳,这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的,这样就不会走浏览器的缓存问题了。也可以用随机数代替时间戳。

3.POST

AJAX POST请求和GET请求的代码区别在哪里?就是前端代码有区别。后端代码没有区别。

// 4. 发送AJAX POST请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。模拟form表单提交数据。
// 获取表单中的数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// send函数中的参数就是发送的数据,这个数据在“请求体”当中发送。
xhr.send("username="+username+"&password="+password)

password = document.getElementById(“password”).value;
// send函数中的参数就是发送的数据,这个数据在“请求体”当中发送。
xhr.send(“username=”+username+“&password=”+password)


相关信息

    评论