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. git 远端版本回退

    情景:本地更改推送远端后,想要回退到自己推送之前的某个版本. 比如想回退的分支为 test 分支. 风险:远端回退到某一版本后,之后的所有推送都没了(对应的日志记录也没了).如果是团队开发,不仅自己推 ...

  2. viewer使用

    一款pc端,点击放大,缩放,翻转等功能的插件.

  3. Docker的容器使用与连接-Window

    启动容器 启动容器之前需要先拉取镜像,然后通过 run 命令启动容器,同一个镜像可以启动多个容器,只要执行多次 run 命令就行了.我们这边启动 centos 的镜像. PS D:\> dock ...

  4. vue 事件基本用法

    事件基本用法 事件的函数都定义在VUE实例中的methods中,当然也可以直接写在元素内,但是这并不利于后期的维护,需要注意的是:在methods定义的函数内想要引用插值内容,需要使用this,不然就 ...

  5. wpa_supplicant 检测错误密码

    选好了 wifi ssid,填了密码,生成新配置文件,重启了wpa_supplicant,怎么知道输入的密码对不对,如果不对有什么体现? wpa_supplicant 前台运行时,打印信息中会有: W ...

  6. [日常摸鱼]Vijos1083小白逛公园-线段树

    题意:单点修改,询问区间最大子段和,$n\leq 5e5$ 考虑分治的方法$O(nlogn)$求一次最大子段和的做法,我们是根据中点分成左右两个区间,那么整个区间的答案要么是左边答案,要么是右边答案, ...

  7. XML外部实体注入

    文章参考链接: 参考视频: https://www.bilibili.com/video/BV1tW411o7Fd?from=search&seid=13868972487110648015 ...

  8. PHP 直接使用html输出excel

    1 <?php 2 header("Cache-Control:public"); 3 header("Pragma:public"); 4 5 head ...

  9. Centos7.6上部署Supervisor来监控和操作各类服务

    supervisor    是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具,不支持Windows系统.它可以很方便的监听.启动.停止.重启一个 ...

  10. win10开启运行下显示历史操作记录

    步骤 设置,隐私,常规,允许windows跟踪应用启动,以改进开始和搜索结果