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 纯文本
      • xml xml 数据
      • json json 对象
  • $.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 请求的更多相关文章

  1. AJAX请求详解 同步异步 GET和POST

    AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...

  2. 一步步学习javascript基础篇(9):ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  3. 配置Chrome支持本地(file协议)的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...

  4. JQuery使用deferreds串行多个ajax请求

    使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...

  5. ajax请求成功后打开新开窗口(window.open())被拦截的解决方法

    问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...

  6. 关于ajax请求,在参数中添加时间戳的必要性

    之前做项目的时候,看到别人的前端ajax请求代码中,都会带有一个时间戳类型的参数,当时随便查了一下,是为了防止浏览器缓存的原因,所以也没有进行深究,每次写的时候也习惯性的带一个,最近新项目中,我发现好 ...

  7. SpringMVC下Ajax请求的方法,@Responsebody如果返回的是布尔值,ajax不会接到任何回传数据

    SpringMVC框架下,如果用ajax向后台请求得方法如果使用@Responsebody返回布尔值的话,ajax得不到任何的回传数据. 但是如果返回String类型,就是正常的. 测试了下代码写得没 ...

  8. 【学习篇:他山之石,把玉攻】Ajax请求安全性讨论

    在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...

  9. 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 ...

随机推荐

  1. hive的调优策略

    hive有时执行速度很慢,若hive on spark 的话,在sparkUI上可以清楚看到是否数据倾斜 优化方法: 1.增加reduce数目 hive.exec.reducers.bytes.per ...

  2. Vulnhub实战靶场:ME AND MY GIRLFRIEND: 1

    一.环境搭建 1.官网下载连接:https://www.vulnhub.com/entry/me-and-my-girlfriend-1,409/ 2.下载之后,使用Oracle VM Virtual ...

  3. Day1 数据类型

    整数 十六进制和八进制使用0作为前缀,如 0x12f , 010浮点数 可以用科学计数法来表示很大或者很小的浮点数,如 1.23x10^9 可以写作 1.23e9 或者12.3e8 ,0.000012 ...

  4. 第一篇:docker 简单入门(一)

    本篇目录 写在最前面的话 docker概念介绍 镜像的概念.容器的概念 docker的安装介绍 写在最前面的话 由于此类文章博客园鉴定为简单文章,所以已经移到csdn[https://blog.csd ...

  5. Java基础语法吐血整理

    前言 自己的Java理论知识方面一直都不是很好,决定从0开始好好总结下,把想到的和以前不确定的(查阅资料确定)的知识整理一下,加油!!坚持!!! Java概述 Java三大体系 1.JavaSE 标准 ...

  6. (转) SQL 中的 NULL 你真的懂了吗?【数据库|SQL】

    注:转载自下面链接 https://blog.csdn.net/lnotime/article/details/104847946 SQL 中的 NULL (译自 NULL Values in SQL ...

  7. securecrt7.1注册方法

    本文出自 "Kinslayer 's Blog" 博客,请务必保留此出处http://kinslayer.blog.51cto.com/3681810/833438

  8. Android各版本迭代改动与适配集合

    前言 今天分享的面试题是: Android在版本迭代中,总会进行很多改动,那么你熟知各版本都改动了什么内容?又要怎么适配呢? Android4.4 发布ART虚拟机,提供选项可以开启. HttpURL ...

  9. git 上传 + 分支

    Git   上传 创建本地文件夹,更改为项目仓库(test) (1) 新建文件夹   test (2) 打开文件夹   git init 把项目添加到仓库内(test) (1) 复制项目到文件夹内 ( ...

  10. 【Python】自动化测试的7个步骤

    我们对自动化测试充满了希望,然而,自动化测试却经常带给我们沮丧和失望.虽然,自动化测试可以把我们从困难的环境中解放出来,在实施自动化测试解决问题的同时,又带来同样多的问题.在开展自动化测试的工作中,关 ...