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

最新推荐文章于 2024-07-07 19:49:58 发布
最新推荐文章于 2024-07-07 19:49:58 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： Ajax 文章标签： ajax 前端框架 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47957908/article/details/133900380
版权
本文详细介绍了XMLHttpRequest对象如何使用GET和POST方法进行数据提交，包括open()、send()方法的用法，以及responseText和status属性的应用，同时展示了POST请求中设置请求头的示例。
摘要由CSDN通过智能技术生成

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>
南瓜骨头
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XMLHttpRequest发送POST请求
owen_william的博客
05-07 6万+
1.前言 POST请求的适用性更广，可使用更大的请求参数，而且POST请求的请求参数通常不能直接看到。因此在使用Ajax发送请求时，尽量采用POST方式而不是GET方式发送请求。发送POST请求通常需要如下的三个步骤： 1)        使用open方法打开连接时，指定使用POST方式发送请求。 2)        设置正确的请求头，POST请求通常应设置Content-Type请求头
XMLHttpRequest POST请求及接收
qq_45969735的博客
12-11 7932
发送post请求： 1.创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); 2.建立对服务器的调用。第一个参数是对GET或者POST, 第二个参数可以是相对或者绝对路径, 第三个参数: true异步/false同步, 默认为true xhr.open("POST", "/upimage", true); 3.向服务器发送请求, 仅用于post xhr.send(formData); 4.服务器的响应,表示一个串 xhr.responseText; 例子
【精简版】XMLHttpRequest 详解
最新发布
weixin_46485638的博客
07-07 1359
精简的 XMLHttpRequest 详解。
XMLHttpRequest对象进行post和get请求
xm_w_xm的博客
03-20 2675
XMLHttpRequest 对象用于在后台与服务器交换数据。 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 let request =new XMLHttpRequest(); request.open("post","http://admin.fengdumao.cn/api/works/getWor...
XMLHttpRequset发送GET请求
owen_william的博客
05-07 2255
1.前言 通常情况下，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。GET请求将所有请求参数换成一个查询字符串，并将该字符串加到请求的URL之后，因而可以在请求的URL后看到请求参数名、请求参数值。如果将某个的action属性设置为GET，则请求将会将表单中各个字段名和值转换成字符串，并附加到URL之后。下面的例子，我们用GET请求将请求的ID作为参数发送，然后得到响应的信
XMLHttpRequest 发 Post 请求
harryhare的专栏
05-24 8394
0. 使用XMLHttpRequest时，直接在send 函数中写字符串，和 使用formData是不用的 function send(userid,name,node,href,asyn) { var xmlhttp=new XMLHttpRequest(); var url=url_ban; ////直接send字符串或者json串 //var conte...
在 javascript 中使用 xmlHttpRequest 发送 POST 请求
迹忆客
07-06 2914
本文将通过不同的示例解释如何使用 JavaScript 代码在 AJAX 编程中发送 XMLHttpRequest post 请求。
JS原生：XMLHttpRequest发送GET&POST请求
热门推荐
欢迎来到长风沛雨的博客
11-01 1万+
学到了xhr发起GET和POST请求，在此记录一下。
XMLHttpRequest中的GET和Post
张晓
01-11 8789
看了ajax的视频后知道了传送数据有post和get两种方法，但是为什么这么用不明白，以下是我做的一点总结。 一、什么是Get和Post方式 1.Get方式      用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要
使用jQuery的ajax方法向服务器发出get和post请求的方法
10-20
本文将深入探讨如何使用jQuery的`$.ajax()`方法来发送GET和POST请求。 首先，我们要了解基本的`$.ajax()`调用语法。如文件中所示，可以有以下两种形式： 1. 简单写法：`$.ajax(url [, settings]);` 2. 完整写法：`...
JS中基于XMLHttpRequest的Get 请求demo
08-28
JS中基于XMLHttpRequest的Get 请求demo,包含2请求方式的源代码，可直接用于项目开发。
html页面模式get/post请求
09-14
对于POST请求，特别是当数据需要以JSON格式发送时，我们需要借助JavaScript，通常使用AJAX（Asynchronous JavaScript and XML）技术，通过XMLHttpRequest或Fetch API来实现。JSON是一种轻量级的数据交换格式，它的...
js get和post请求实现代码解析
11-21
总结，JavaScript中的GET和POST请求是通过XMLHttpRequest对象实现的，它们是Web应用程序与服务器通信的核心手段。GET请求将数据附加到URL，适用于数据量小且不敏感的情况；而POST请求更适合传输大量或敏感数据。理解...
XMLHttpRequest对象_Ajax异步请求重点(推荐)
11-28
一旦创建了XMLHttpRequest对象，就可以使用它的方法来发送请求和处理响应。其中，`open()`方法用于初始化请求，它接受四个参数：请求类型（如GET、POST）、URL、异步标志（true表示异步，false表示同步）以及可选的...
深入理解Ajax的get和post请求
09-02
在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的...了解GET和POST请求的原理和使用方式对于有效利用Ajax提升用户体验至关重要。在实际开发中，根据需求选择合适的请求方式是非常重要的。
使用JavaScript的XMLHttpRequest发送请求
crazy_fire
06-05 704
http://blog.csdn.net/sz_bdqn/article/details/3863293 使用XMLHttpRequest对象分为4部完成:   1.创建XMLHttpRequest组建   2.设置回调函数   3.初始化XMLHttpRequest组建   4.发送请求   实例代码： var userName;
转-xmlhttprequest post提交
失去的记忆
05-14 1万+
<!-- var xmlhttp;function Button1_onclick() { var dzb = "info={FullName:王继军,Company:上海天正,Address:田林路388号}"; //"Departments":["总经理室","酒店事业部","市场销售部","金融事业部"] send
XMLHttpRequest Post请求
reslife的专栏
09-13 275
ie下正常返回结果，ff下无法获取跨域结果   var XMLHttpReq =  new XMLHttpRequest();       XMLHttpReq.open("POST", "http://10.96.3.120/app/Service.asmx/getSysTime", true);     content="";     XMLHttpReq.setRequestHea...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值