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

这篇具有很好参考价值的文章主要介绍了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>
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("<font>hello ajax</font>");
    }
}

Post请求提交数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>
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);
    }
}

GET和POST请求时的区别

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

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

onreadystatechange属性

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

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)

send()方法

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

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

responseText属性

  • 功能:以字符串返回响应数据
// 在GET请求中出现的代码
out.print("<font>hello ajax</font>");
document.getElementById("mydiv").innerHTML = this.responseText
    
<div id="mydiv"></div>
  • 以上代码中的字符串内容通过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>

文章来源地址https://www.toymoban.com/news/detail-723611.html

到了这里,关于XMLHttpRequest对象的Get请求和Post请求的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javascript二维数组(21)执行异步HTTP(Ajax)请求的方法($.get、$.post、$getJSON、$ajax)

    . g e t 、 .get、 . g e t 、 .post、 g e t J S O N 、 getJSON、 g e t J SON 、 ajax都是jQuery提供的用于执行异步HTTP(Ajax)请求的方法。每个方法都有其特定的用途和区别。 . g e t :这个方法使用 G E T 方式来进行异步请求。其语法结构为: .get:这个方法使用GET方式来进行异步请求。其语

    2024年02月07日
    浏览(53)
  • AJAX 使用 JavaScript 的 `XMLHttpRequest` 对象来向服务器发送异步请求

    AJAX 是一种使用异步 HTTP (Ajax) 请求获取和发送数据的技术。它使得网页能够进行异步更新,而不需要重新加载整个页面。通过使用 AJAX,可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。 AJAX 使用 JavaScript 的 XMLHttpRequest 对象来向服务器发送异步请

    2024年01月16日
    浏览(55)
  • HTTP协议 GET和POST区别 请求响应 Fiddler postman ajax

    💖 欢迎来阅读子豪的博客( JavaEE篇 🤴) 👉 有宝贵的意见或建议可以在留言区 留言 💻 欢迎 素质三连 点赞 关注 收藏 🧑‍🚀码云仓库:补集王子的代码仓库 不要偷走我小火车哦~ ~ ~ HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议. HTTP 诞生与1991年

    2023年04月27日
    浏览(73)
  • Java对接百度文心一言,Java发送POST请求,类似前端AJAX

    这是项目中使用的对接百度文心一言后端代码

    2024年02月15日
    浏览(37)
  • ajax请求——XMLHttpRequest请求

     个人练习笔记-----Ajax01 一、GET  https://v5.crmeb.net/api/groom/list/3?page=1limit=9  ------协议:// 域名 / 地址?参数 1.xhr.open(\\\"GET\\\",\\\"https://v5.crmeb.net/api/groom/list/3?page=1limit=9\\\");对应的参数从下图中所示中获取 2.xhr.setRequestHeader(\\\"Content-Type\\\",\\\"application/json\\\");//验证身份 xhr.setRequestHeader(\\\"Authori-Z

    2024年02月03日
    浏览(47)
  • Ajax异步通信与XMLhttpRequest对象的属性方法及事件

    AJAX 的英文全称 Asynchronous JavaScript And XML,其中Asynchronous就是指的异步,这里异步指通过 AJAX 向服务器请求数据,在不刷新整个页面的情况下,更新页面上的部分内容。 通过使用Ajax,可以创建更动态和响应性的Web应用程序,因为它使得页面可以在后台与服务器进行数据交换,

    2024年03月14日
    浏览(46)
  • 前端异步编程全套:xmlhttprequest > ajax > promise > async/await

    同步与异步区别 同步:按顺序,依次执行,向服务器发送请求--客户端做其他操作 异步:分别执行,向服务器发送请求==同时执行其他操作 原生xmlhttprequest 四步骤 创建ajax对象 设定数据的传输方式(get、post),打开连接open() 获得响应数据 属性 描述 onreadystatechange 当readysta

    2024年02月01日
    浏览(71)
  • 【Ajax】笔记-POST请求(原生)

    html 服务server.js post请求携带参数,是在发送请求的时候携带的 设置请求头一般传递用户身份识别信息

    2024年02月16日
    浏览(46)
  • AJAX学习笔记2发送Post请求

    AJAX学习笔记1发送Get请求_biubiubiu0706的博客-CSDN博客 继续 AJAX发送POST请求  无参数 测试 改回来   测试 AJAX POST请求   请求体中提交参数 测试 后端打断点 如何用AJAX模拟form表单post请求提交数据呢? 设置请求头必须在open之后,send之前 请求头里的设置好比form表单的enctype

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包