【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 ...
随机推荐
- js 几种跨域解决方法
同源策略: JS只能与同一个域中的页面进行通讯,必须是协议.域名.端口都相同,相同域下才能相互通信,这可以被认为是一种通信原则,叫同源策略. 跨域: js跨域是指通过js在不同的域之间进行数据传输或通 ...
- 2020/12月最新WinSpy/WinSpy++下载exe
>>>下载地址 https://wws.lanzous.com/iFUsVj931xa 密码:5hp7 解压密码:yunmuq 夹带私货:在这里希望大家分享文件别再用百度云了,不用百 ...
- 基数排序（Radix Sort）
基数排序(Radix Sort) 第一趟:个位 收集: 第二趟:十位 第三趟:百位 3元组 基数排序--不是基于"比较"的排序算法 递增就是把收集的过程返过来 算法效率分析 需要r ...
- 【Django Python版本对应】
使用Python36 时应该使用Django版本1.11.4 pip install django==1.11.4 版本对应表: Django version Python versions 1.8 ...
- Unity射击实例讲解—主角创建
前言: 经过三分钟的思考决定换个标题,这两天其实游戏制作进度推了大半了,加入了许多自我创作的素材,不过想一想用来讲解的实例不该这么花哨,决定还是参照我的一些教材做一些简单的示例不然要说的东西太多,本人 ...
- 关于CAS中的ABA问题存在的隐患
一开始觉得ABA问题确实是个问题,但是具体场景是什么呢,虽然过程改了,但是结果一样,取的值也一样 不明所以,不过呢,这里也有一个小的demo可以说明一下 该例子通过AtomicReference判断对 ...
- Python之格式化unix时间戳
就瞎倒腾,格式化时间: 1 import time 2 3 unixTime = time.time() #定义unixTime以存储系统当前的unix时间戳 4 print(unixTime); # ...
- 使用OpenOffice实现文档预览
概述 使用OpenOffice将 office文档转为pdf,然后再将pdf转为图片,实现文档预览的功能. 依赖组件 OpenOffice.org或者LibreOffice JODConverter ...
- Tensorflow2.0-mnist手写数字识别示例
Tensorflow2.0-mnist手写数字识别示例 读书不觉春已深,一寸光阴一寸金. 简介:通过CNN 卷积神经网络训练后识别出手写图片,测试图片mnist数据集中的0.1.2.4. ...
- 01 . Go之从零实现Web框架(类似Gin)
设计一个框架 大部分时候,我们需要实现一个 Web 应用,第一反应是应该使用哪个框架.不同的框架设计理念和提供的功能有很大的差别.比如 Python 语言的 django和flask,前者大而全,后者 ...