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
文章来源:https://www.toymoban.com/news/detail-723611.html
到了这里,关于XMLHttpRequest对象的Get请求和Post请求的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!