【JavaWeb】AJAX 请求
AJAX 请求
什么是 AJAX
AJAX（Asynchronous JavaScript And XMl），即异步 JS 和 XML。是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种浏览器通过 JS 异步发起请求，局部更新页面的技术。它请求的局部更新，浏览器地址不会发生变化，且局部更新不会舍弃原来的页面。
原生 AJAX 示例
package cn.parzulpan.web;
import cn.parzulpan.bean.User;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author : parzulpan
* @Time : 2020-12-14
* @Desc :
*/
@WebServlet(name = "AjaxServlet", urlPatterns = ("/ajaxServlet"))
public class AjaxServlet extends BaseServlet {
protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Ajax 请求发过来了");
// 将数据返回给客户端
User user = new User(1, "潘K", "123456", "parzulpan@321.com");
Gson gson = new Gson();
String userJsonString = gson.toJson(user);
response.getWriter().write(userJsonString);
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>原生 AJAX 请求的示例</title>
<script type="text/javascript">
// 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
function ajaxRequest() {
//1、首先要创建 XMLHttpRequest
let xmlHttpRequest = new XMLHttpRequest();
//2、调用 open 方法设置请求参数
xmlHttpRequest.open("GET", "ajaxServlet?action=javaScriptAjax", true);
//4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {
let jsonObj = JSON.parse(xmlHttpRequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = " id: " + jsonObj.id +
" username: " + jsonObj.username +
" password: " + jsonObj.password +
" email: " + jsonObj.email
}
};
//3、调用 send 方法发送请求
xmlHttpRequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
jQuery 中的 AJAX 请求
常用方法：
$.ajax()url表示请求的地址type表示请求的类型（GET、POST）data表示发送给服务器的数据，有两种格式：name=value&name2=value2{key: value}
success请求成功，响应的回调函数dataType响应的数据类型，常用的有：text纯文本xmlxml 数据jsonjson 对象
$.get()和$.post()url请求的 url 地址data发送的数据callback成功的回调函数type返回的数据类型
$.getJSON()url请求的 url 地址data发送给服务器的数据callback成功的回调函数
serialize()可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 中的 AJAX 请求</title>
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url: "ajaxServlet",
data: {action: "jQueryAjax"},
success: function (data) {
// 把响应的数据显示在页面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
},
dataType: "json"
});
});
// ajax--get请求
$("#getBtn").click(function(){
$.get("ajaxServlet", "action=jQueryAjax", function (data) {
// 把响应的数据显示在页面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
}, "json")
});
// ajax--post请求
$("#postBtn").click(function(){
$.post("ajaxServlet", "action=jQueryAjax", function (data) {
// 把响应的数据显示在页面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
}, "json")
});
// ajax--getJson请求
$("#getJSONBtn").click(function(){
$.getJSON("ajaxServlet", "action=jQueryAjax", function (data) {
// 把响应的数据显示在页面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
})
});
// ajax请求
$("#submit").click(function(){
// 把参数序列化
$.getJSON("ajaxServlet", "action=jQueryAjaxSerialize&" + $("#form01").serialize(), function (data) {
// 把响应的数据显示在页面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
})
});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax请求</button>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg">
</div>
<br/><br/>
<form id="form01" >
用户名：<input name="username" type="text" /><br/>
密码：<input name="password" type="password" /><br/>
下拉单选：<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多选：
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
复选：
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
单选：
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>
package cn.parzulpan.web;
import cn.parzulpan.bean.User;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author : parzulpan
* @Time : 2020-12-14
* @Desc :
*/
@WebServlet(name = "AjaxServlet", urlPatterns = ("/ajaxServlet"))
public class AjaxServlet extends BaseServlet {
protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("jQueryAjax 请求发过来了");
// 将数据返回给客户端
User user = new User(1, "潘K", "123456", "parzulpan@321.com");
Gson gson = new Gson();
String userJsonString = gson.toJson(user);
response.getWriter().write(userJsonString);
}
protected void jQueryAjaxSerialize(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("jQueryAjaxSerialize 请求发过来了");
// 获取客户端的请求
String username = request.getParameter("username");
System.out.println(username);
String password = request.getParameter("password");
System.out.println(password);
// 将数据返回给客户端
User user = new User(1, "潘K", "123456", "parzulpan@321.com");
Gson gson = new Gson();
String userJsonString = gson.toJson(user);
response.getWriter().write(userJsonString);
}
}
练习和总结
【JavaWeb】AJAX 请求的更多相关文章
- AJAX请求详解 同步异步 GET和POST
AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...
- 一步步学习javascript基础篇（9）：ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
- 配置Chrome支持本地（file协议）的AJAX请求
什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...
- JQuery使用deferreds串行多个ajax请求
使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...
- ajax请求成功后打开新开窗口(window.open())被拦截的解决方法
问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...
- 关于ajax请求，在参数中添加时间戳的必要性
之前做项目的时候,看到别人的前端ajax请求代码中,都会带有一个时间戳类型的参数,当时随便查了一下,是为了防止浏览器缓存的原因,所以也没有进行深究,每次写的时候也习惯性的带一个,最近新项目中,我发现好 ...
- SpringMVC下Ajax请求的方法，@Responsebody如果返回的是布尔值，ajax不会接到任何回传数据
SpringMVC框架下,如果用ajax向后台请求得方法如果使用@Responsebody返回布尔值的话,ajax得不到任何的回传数据. 但是如果返回String类型,就是正常的. 测试了下代码写得没 ...
- 【学习篇：他山之石，把玉攻】Ajax请求安全性讨论
在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...
- jQuery Ajax请求（关于火狐下SyntaxError: missing ] after element list ajax返回json，var json = eval("("+data+")"); 报错）
$.ajax({ contentType: "application/x-www-form-urlencoded;charset=UTF-8" , type: &quo ...
随机推荐
- Windows的API功能查询
在逆向分析时,一些Windows的API函数往往是我们的突破口.但这些函数很难记得一清二楚,以下是我的查找办法,做个小结. 官网 https://docs.microsoft.com/en-us/wi ...
- elasticsearch的基本了解
以下内容参考官方文档https://www.elastic.co/guide/en/elasticsearch/reference/7.2/elasticsearch-intro.html 使用的学 ...
- 高速缓冲存储器Cache
目录 概述 问题的提出 局部性原理 命中与未命中 Cache的命中率 Cache-主存系统的效率 例题 工作原理 地址映射方式(本节最重要) 直接映射 全相联映射 组相联映射 例子 替换策略 例题 写 ...
- 主从复制直接转换MGR_5.7验证试验
环境信息 IP port role info 192.168.188.51 4000 node1 master 192.168.188.52 4000 node2 slave1 192.168.188 ...
- tp5使用PHPExcel（下载引入/composer与模板/生成方式搭配使用）
PHPExcel使用 一:引入 tp5.0,tp5.1: 1:composer方式 a:根目录下执行:composer require phpoffice/phpexcel b:引入(可new \PH ...
- ES6、ES7、ES8
ES6 https://es6.ruanyifeng.com/ ES7 1.Array.prototype.includes() includes()作用,是查找一个值在不在数组里,若是存在则返回 ...
- java集合源码分析（六）：HashMap
概述 HashMap 是 Map 接口下一个线程不安全的,基于哈希表的实现类.由于他解决哈希冲突的方式是分离链表法,也就是拉链法,因此他的数据结构是数组+链表,在 JDK8 以后,当哈希冲突严重时,H ...
- setfacl命令的基本用法
setfacl命令的基本用法 1.setfacl的用途 setfacl命令可以用来细分linux下的文件权限. chmod命令可以把文件权限分为u,g,o三个组,而setfacl可以对每一个文件或目录 ...
- nacos注册中心源码流程分析
作为一个注册中心,和eureka类似,核心的功能点: 1.服务注册:nacos客户端携带自身信息向nacos服务端进行注册. 2.服务心跳:客户端定时向服务端发送心跳,告知服务端自己处于可用状态 3. ...
- Epson 打印机计数器清零
错误提示:废墨垫需要维护.请联系爱普生认证服务机构. 一.下载打印机清零软件 软件名称:EPSON Adjustment Program 二.USB线连接打印机 清零前请取消打印任务,打印机用USB线 ...