• XMLHttpRequest对象的Get请求和Post请求的用法

    XMLHttpRequest对象的Get请求和Post请求的用法

    Get请求提交数据

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax get请求title>
head>
<body>
<script type="text/javascript">
    window.onload = function (){
        var ajaxBtn= document.getElementById("ajaxBtn");
        ajaxBtn.onclick = function (){
            // 第一步：创建XMLHttpRequest对象
            var request = new XMLHttpRequest();
            // 第二步：注册回调函数
            request.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            // innerHTML可以设置元素内部的HTML代码。（innerHTML可以将后面的内容当做一段HTML代码解释并执行）
                            document.getElementById("mydiv").innerHTML = this.responseText
                        }else{
                            // status:返回请求的状态号
                            alert(this.status)
                        }
                    }
            }
            // 第三步：开启通道
            request.open("Get", "/ajax1/ajaxrequest1", true)
            // 第四步：发送请求
            request.send()
        }
    }
script>

<input type="button" value="ajax" id="ajaxBtn">
<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
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    package com.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("/ajaxrequest1")
public class AjaxRequest 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("hello ajax");
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    Post请求提交数据

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            // 第一步：创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 第二步：注册回调函数
            xhr.onreadystatechange = function () {
                if(this.readyState == 4){
                    if (this.status == 200){
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            // 第三步：开启通道
            xhr.open("Post", "/ajax1/ajaxrequest", true)
            // 第四步：发送请求
            // 设置请求头的内容类型，模拟Ajax提交form表单
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            xhr.send("username="+username+"&password="+password )
        }
    }    
script>

用户名：<input type="text" id="username"><br>
密码：<input type="text" id="password"><br>
<button id="btn">提交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
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    package com.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("/ajaxrequest")
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");
        String password = request.getParameter("password");
        out.print("用户名：" + username);
        out.print("密码：" + 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

    GET和POST请求时的区别

    • GET请求提交数据是在“请求行”上提交，而POST请求是在“请求头”。
    • 所以，POST请求需要在open和send方法中添加一行代码xxx.setRequestHeader()，用来设置请求头的内容。

    以上代码中出现的XMLHttpRequest对象的方法和属性

    onreadystatechange属性

    • 功能：定义当 readyState 属性发生变化时被调用的函数
    var xxx = new XMLHttpRequest();
xxx.onreadystatechange = function () {
        console.log(xxx.readyState)
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5

    open()方法

    • 功能：开启通道
    • open(method, url, async, user, psw)
      • method：请求的方式，可以是GET，也可以是POST，也可以是其它请求方式。
      • url：请求的路径（/项目名/@WebServlet路径）
        • 注：@WebServlet路径可以随便填写，但是要和java代码注解的@WebServlet(“/”)一致
      • async：只能是trve或者false，trve表示此ajax请求是一个异步请求，false表示此ajax请求是一个同步请求。
      • user（非必填项）：用户名 pwd：密码，用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源，可能需要提供一些口令才能访问。
    xxx.open("Get", "/项目名/@WebServlet路径", true)

    • 1

    send()方法

    • 功能：发送请求到服务器
    // 发送GET请求到服务器
xxx.send()

// 发送POST请求到服务器
xxx.send(string)

    • 1
    • 2
    • 3
    • 4
    • 5

    responseText属性

    • 功能：以字符串返回响应数据
    // 在GET请求中出现的代码
out.print("hello ajax");
document.getElementById("mydiv").innerHTML = this.responseText
    
<div id="mydiv"></div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 以上代码中的字符串内容通过responseText接收，并赋值给div标签中，再使用innerHTML转变成html代码执行

    status属性

    • 功能：返回请求的状态号（200: “OK”，404: “Not Found”…）

    onblur失去焦点事件 和 onfocus获取焦点

    • onblur功能：当失去焦点时，就发送Ajax POST请求，提交用户名。
      • 什么叫失去焦点？
        • 当你将鼠标点在页面搜索框中输入时，会出现光标，而点击到输入框以外的地方，使得输入框中的光标消失，则为失去焦点。
    • onfocus功能：获取焦点
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX POST请求验证同户名是否可用title>
head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("username").onfocus = function () {
            document.getElementById("tipMsg").innerHTML = ""
        }

        document.getElementById("username").onblur = function () {
            // console.log('失去焦点')
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("tipMsg").innerHTML = this.responseText
                    }else {
                        alert(this.status)
                    }
                }
            }
            xhr.open("POST", "/ajax1/ajaxrequest5", true)
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            var username = document.getElementById("username").value;
            xhr.send("username=" + username)
        }
    }
script>
用户名：<input type="text" id="username">

<span id="tipMsg">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
  • 相关阅读:
    C++继承（跑路人笔记）
    推荐这款全新一代性能强到爆的RPC框架
    代码重构：面向单元测试
    CAP+BASE
    Arcgis搭建离线地图服务WMTS
    零号培训平台课程-1、SQL注入基础
    MySQL之MVCC
    IDEA使用Docker插件
    JS Echarts之雷达图 | 使用Excel画雷达图
    深度解读js中数组的findIndex方法
  • 原文地址：https://blog.csdn.net/weixin_47957908/article/details/133900380