XMLHttpRequest對(duì)象的Get請(qǐng)求和Post請(qǐng)求的用法
Get請(qǐng)求提交數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>發(fā)送ajax get請(qǐng)求</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
var ajaxBtn= document.getElementById("ajaxBtn");
ajaxBtn.onclick = function (){
// 第一步：創(chuàng)建XMLHttpRequest對(duì)象
var request = new XMLHttpRequest();
// 第二步：注冊(cè)回調(diào)函數(shù)
request.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
// innerHTML可以設(shè)置元素內(nèi)部的HTML代碼。（innerHTML可以將后面的內(nèi)容當(dāng)做一段HTML代碼解釋并執(zhí)行）
document.getElementById("mydiv").innerHTML = this.responseText
}else{
// status:返回請(qǐng)求的狀態(tài)號(hào)
alert(this.status)
}
}
}
// 第三步：開啟通道
request.open("Get", "/ajax1/ajaxrequest1", true)
// 第四步：發(fā)送請(qǐng)求
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請(qǐng)求提交數(shù)據(jù)
<!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 () {
// 第一步：創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 第二步：注冊(cè)回調(diào)函數(shù)
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)
// 第四步：發(fā)送請(qǐng)求
// 設(shè)置請(qǐng)求頭的內(nèi)容類型，模擬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();
// 獲取提交的數(shù)據(jù)
String username = request.getParameter("username");
String password = request.getParameter("password");
out.print("用戶名：" + username);
out.print("密碼：" + password);
}
}
GET和POST請(qǐng)求時(shí)的區(qū)別
- GET請(qǐng)求提交數(shù)據(jù)是在“請(qǐng)求行”上提交，而POST請(qǐng)求是在“請(qǐng)求頭”。
- 所以，POST請(qǐng)求需要在open和send方法中添加一行代碼
xxx.setRequestHeader()，用來設(shè)置請(qǐng)求頭的內(nèi)容。
以上代碼中出現(xiàn)的XMLHttpRequest對(duì)象的方法和屬性
onreadystatechange屬性
- 功能：定義當(dāng) readyState 屬性發(fā)生變化時(shí)被調(diào)用的函數(shù)
var xxx = new XMLHttpRequest();
xxx.onreadystatechange = function () {
console.log(xxx.readyState)
}
}
open()方法
- 功能：開啟通道
-
open(method, url, async, user, psw)- method：請(qǐng)求的方式，可以是GET，也可以是POST，也可以是其它請(qǐng)求方式。
- url：請(qǐng)求的路徑（/項(xiàng)目名/@WebServlet路徑）
- 注：@WebServlet路徑可以隨便填寫，但是要和java代碼注解的@WebServlet(“/”)一致
- async：只能是trve或者false，trve表示此ajax請(qǐng)求是一個(gè)異步請(qǐng)求，false表示此ajax請(qǐng)求是一個(gè)同步請(qǐng)求。
- user（非必填項(xiàng)）：用戶名 pwd：密碼，用戶名和密碼是進(jìn)行身份認(rèn)證的，說明要想訪問這個(gè)服務(wù)器上的資源，可能需要提供一些口令才能訪問。
xxx.open("Get", "/項(xiàng)目名/@WebServlet路徑", true)
send()方法
- 功能：發(fā)送請(qǐng)求到服務(wù)器
// 發(fā)送GET請(qǐng)求到服務(wù)器
xxx.send()
// 發(fā)送POST請(qǐng)求到服務(wù)器
xxx.send(string)
responseText屬性
- 功能：以字符串返回響應(yīng)數(shù)據(jù)
// 在GET請(qǐng)求中出現(xiàn)的代碼
out.print("<font>hello ajax</font>");
document.getElementById("mydiv").innerHTML = this.responseText
<div id="mydiv"></div>
- 以上代碼中的字符串內(nèi)容通過responseText接收，并賦值給div標(biāo)簽中，再使用innerHTML轉(zhuǎn)變成html代碼執(zhí)行
status屬性
- 功能：返回請(qǐng)求的狀態(tài)號(hào)（200: “OK”，404: “Not Found”…）
onblur失去焦點(diǎn)事件 和 onfocus獲取焦點(diǎn)
- onblur功能：當(dāng)失去焦點(diǎn)時(shí)，就發(fā)送Ajax POST請(qǐng)求，提交用戶名。
- 什么叫失去焦點(diǎn)？
- 當(dāng)你將鼠標(biāo)點(diǎn)在頁(yè)面搜索框中輸入時(shí)，會(huì)出現(xiàn)光標(biāo)，而點(diǎn)擊到輸入框以外的地方，使得輸入框中的光標(biāo)消失，則為失去焦點(diǎn)。
- 什么叫失去焦點(diǎn)？
- onfocus功能：獲取焦點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX POST請(qǐng)求驗(yàn)證同戶名是否可用</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('失去焦點(diǎn)')
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>
文章來源地址http://www.zghlxwxcb.cn/news/detail-723611.html
文章來源：http://www.zghlxwxcb.cn/news/detail-723611.html
到了這里，關(guān)于XMLHttpRequest對(duì)象的Get請(qǐng)求和Post請(qǐng)求的用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
