【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安装程序无法将windows配置为在此计算机上运行
----------------------------------------------- 解决办法: 当出现如上提示的时候,按下shift+f10 会打开命令窗口,进入到C:\windows\s ...
- 区块链产业发展热潮来袭，Panda Global 认为体验、安全是关键词
作为一项近些年才发展起来的新型技术,区块链自诞生之日起就备受关注,凭着去中心化.不可篡改.信息透明等多种关键特点,已成为变革传统产业的一项有力创新手段.当区块链热潮再度袭来之时,知名数字货币交易所Pa ...
- 可选链plugin-proposal-optional-chaining的使用（优化）
第一步 安装 npm install --save-dev @babel/plugin-proposal-optional-chaining 然后在.babelrc.js文件夹里进行配置 plugin ...
- centos 7.5搭建oracle DG
一.背景 1.IP分配 主库:192.168.12.5 node1 备库:192.168.12.6 node2 2.环境 主库已安装数据库软件,已建库,并有业务数据 备库已安装数据库软件,未建库 二. ...
- CI/CD持续集成方案
一,CI/CD流程和持续交付简介 CI(Continuous Integration)持续集成 CD(Continuous Deployment)持续部署 CD(Continuous delive ...
- C++ 中使用 PRId64
同一份代码,Ubuntu 14.04.1 编译没有问题,centos 7 上编译提示错误: error: expected ')' before 'PRId64' 这里两个地址说得很清楚了: http ...
- [OI笔记]基础图论/图算法
[2017.8.29 00:00]--前几天开始好好学了几天的图论,不过这最近又突然因为一些原因(其实是晚上没睡好导致白天没精神)颓废了几天-一方面为了控制自己同时也可以当做之后noip前复习用的笔记 ...
- ctf/web源码泄露及利用办法
和上一篇文章差不多,也算是对web源码泄露的一个总结,但是这篇文章更侧重于CTF 参考文章: https://blog.csdn.net/wy_97/article/details/78165051? ...
- python一键搭建ftp服务
from pyftpdlib.authorizers import DummyAuthorizer from pyftpdlib.handlers import FTPHandler from pyf ...
- 解决误删/bin/bash问题
出现原因:由于当时误操作把 /bin/bash 命令解释器二进制文件移到了/root 家目录里面,再重新登录系统之后,登陆进去什么也干干不了. 解决办法:让系统重启,以挂载光盘模式进入系统BIOS,选 ...