javaweb——ajax

最新推荐文章于 2022-09-06 20:07:12 发布
最新推荐文章于 2022-09-06 20:07:12 发布
阅读量334 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MY_NEW_LIFE/article/details/118154575
版权

目录

一、什么是 AJAX 请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发 技术。

  • ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
  • Ajax 请求的局部更新，浏览器地址栏不会发生变化 。
  • 局部更新不会舍弃原来页面的内容。

同步请求就是前面的代码过程，页面反馈没有执行完，后面的就没办法执行进行反馈，只能顺序执行。异步请求可以不考虑顺序进行页面反馈。

二、原生 AJAX 请求

使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax

BaseServlet类

package com.atguigu.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;

public abstract class BaseServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 解决post请求中文乱码问题
        // 一定要在获取请求参数之前调用才有效
        req.setCharacterEncoding("UTF-8");
        // 解决响应中文乱码
        resp.setContentType("text/html; charset=UTF-8");
        String action = req.getParameter("action");
        try {
            // 获取action业务鉴别字符串，获取相应的业务 方法反射对象
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
//            System.out.println(method);
            // 调用目标业务 方法
            method.invoke(this, req, resp);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);// 把异常抛给Filter过滤器
        }
    }

}

AjaxServlet类

package com.atguigu.servlet;

import com.atguigu.pojo.Person;
import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求过来了");
        Person person = new Person(1, "国哥");
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // 将数据转换成json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
		//将json格式的字符串数据响应给客户端
        resp.getWriter().write(personJsonString);
    }

}

ajax原生.html

<!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>Insert title here</title>
		<script type="text/javascript">
		// 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
			function ajaxRequest() {
			
				// 1、我们首先要创建 XMLHttpRequest
				var xmlhttprequest = new XMLHttpRequest();
				
				// 2、调用 open 方法设置请求参数,open方法中的参数包括请求方式，请求路径，true代表异步请求
				xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true)
				
				// 4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
				xmlhttprequest.onreadystatechange = function() {
					if (xmlhttprequest.readyState == 4 && xhr.status == 200) {
						// 将响应的json字符串数据转换成对象
						var jsonObj = JSON.parse(xmlhttprequest.responseText);
						// 把响应的数据显示在页面上
						document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
					}
				}
				
				// 3、调用 send 方法发送请求
				xmlhttprequest.send();
			}
			
		</script>
	</head>
	<body>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
	</body>
</html>

三、jQuery 中的 AJAX 请求

<!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>Insert title here</title>
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
					$.ajax({
						url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
						// data:"action=jQueryAjax",
						data:{action:"jQueryAjax"},
						type:"GET",
						success:function (data) {
							// alert("服务器返回的数据是：" + data);
							// var jsonObj = JSON.parse(data);
							$("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
						},
						dataType : "json"
					});
				});

				// ajax--get请求
				$("#getBtn").click(function(){

					$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
						$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
					},"json");
					
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
					$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
						$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
					},"json");
					
				});

				// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
						$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
					});
				});

				// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
						$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
					});
				});
				
			});
		</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>

1、$.ajax 方法

  1. url 表示请求的地址
  2. type 表示请求的类型 GET 或 POST 请求
  3. data 表示发送给服务器的数据
    格式有两种：
    一：name=value&name=value
    二：{key:value}
  4. success 请求成功，响应的回调函数，响应的数据通过此获取
  5. dataType 响应的数据类型
    常用的数据类型有：
    text 表示纯文本
    xml 表示 xml 数据
    json 表示 json 对象

AjaxServlet类

package com.atguigu.servlet;

import com.atguigu.pojo.Person;
import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends BaseServlet {

       protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryAjax == 方法调用了");
        Person person = new Person(1, "国哥");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }
}


$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
					$.ajax({
						url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
						// data:"action=jQueryAjax",
						data:{action:"jQueryAjax"},
						type:"GET",
						success:function (data) {
							// alert("服务器返回的数据是：" + data);
							// var jsonObj = JSON.parse(data);
							$("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
						},
						dataType : "json"
					});
				});
});

2、$ .get 方法和$.post 方法

  1. url 请求的 url 地址
  2. data 发送的数据
  3. callback 成功的回调函数
  4. type 返回的数据类型
// ajax--get请求
				$("#getBtn").click(function(){

					$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
						$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
					},"json");
					
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
					$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
						$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
					},"json");
					
				});

3、$.getJSON 方法

  1. url 请求的 url 地址
  2. data 发送给服务器的数据
  3. callback 成功的回调函数
// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
						$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
					});
				});

4、表单序列化 serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。

				// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
						$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
					});
				});
MY_NEW_LIFE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java Web使用Ajax进行网络请求和数据交互demo
07-30
Java Web使用Ajax进行网络请求和数据交互demo。 详情看博客：https://blog.csdn.net/yuzhiqiang_1993/article/details/81284684
JavaWeb之Ajax的基本使用
weixin_62270300的博客
04-29 6837
目录 一、Ajax是什么？ 二、为什么使用Ajax？ 三、Ajax基本使用 四、案例 无刷新登录（ajax、get、post）💫 login.jsp LoginServlet.java 查询名字是否存在💫 register.java FindServlet.java 使用搜索框时弹出的提示💫 index.java 一、Ajax是什么？ Ajax，全称Asynchronous JavaScript and XML ，也就是异步加载的javascript 和 XML .Aj...
JavaWeb——AJAX
一个憨憨写的胡言乱语
10-25 593
JavaWeb——AJAX1、介绍2、原生的JavaScript中的AJAX请求实例3、jQuery中的AJAX请求 1、介绍 AJAX即"Asynchronous JavaScript And XML"异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术 是一种浏览器通过js异步发起请求，局部更新页面的技术 2、原生的JavaScript中的AJAX请求实例 <!DOCTYPE html> <html lang="Ch_zh"> <head>
AJAX and Javaweb
VinciB的博客
09-06 312
1、创建异步对象，使用js语法2、XMLHttpRequest方法① open（请求方法，服务器的访问地址，异步还是同步）② send()：使用异步对象发送请求3 、XMLHttpRequest属性​ 属性：存储函数，每当readyState属性改变时，就会调用该函数​ 在onreadystatechange中，我们规定当服务器响应已做好被处理的准备时所执行的任务//当 readyState的值变化时，callback函数就会被调用readyState​ 属性：请求状态，
13_JavaWeb——AJAX配套资源
05-02
此资源与我的博客13_JavaWeb——AJAX中的两个案例对应，其中Demo5使用AJAX异步处理页面实现对用户输入的实时校验，Demo6使用Axios+JSON完成对品牌列表的展示和添加，取代了先前的JSP。希望有所帮助
14_JavaWeb——Vue配套资源
05-09
在本资源包“14_JavaWeb——Vue配套资源”中，主要涵盖了使用Vue.js框架在JavaWeb项目中实现前端交互的功能。Vue.js是一个轻量级的JavaScript库，旨在简化前端开发，提供强大的数据绑定和组件化能力。下面将详细阐述...
JavaWeb综合案例——品牌后台管理系统
08-12
最新版JavaWeb综合案例——品牌后台管理系统 来源：改编自黑马程序员最新JavaWeb课程案例 所用技术及工具：Mybatis+Maven+Filter+Ajax+JSON+JavaScript+HTML+CSS+Element+VUE
javaWeb训练专用——软件项目信息管理
04-14
JavaWeb训练专用——软件项目信息管理系统是一个针对初学者和进阶者设计的实践项目，旨在提升开发者在JavaWeb领域的技能。这个项目的难度等级为3星，比基础的2星项目更具挑战性，涵盖了更多核心技术和实际应用。 在...
javaweb大作业——简单的学生成绩管理系统
10-21
1. **前端页面**：使用HTML、CSS和JavaScript编写，负责展示用户界面，处理用户交互，与后端通过AJAX通信。 2. **Servlet**：JavaWeb中的服务器端程序，接收前端请求，处理业务逻辑，与数据库交互。 3. **JSP**：...
Javaweb之Ajax
05-20 2954
文章目录1、概述2、作用3、同步和异步4、快速入门4.1、服务端4.2、客户端5、axios5.1、基本使用5.2、请求方法别名6、JSON6.1、概述6.2、JSON基础语法6.2.1、定义格式6.3、代码示例6.3.1、前端页面中定义JSON字符串6.3.2、前端页面中获取JSON中的属性值6.4、发送异步请求携带参数6.5、JSON串和Java对象的相互转换6.5.1、Fastjson 概述6.5.2、Fastjson 使用6.5.3、代码示例 1、概述 AJAX (Asynchronous J
Java Web之Ajax
热门推荐
喻志强的博客
07-30 2万+
在之前的学习web前端专栏中已经对Ajax相关知识有过介绍了，不清楚的同学可以看一下这篇博客：从零开始学习WEB前端之数据交互（Ajax） 这里就不在赘述了。 但是之前是用PHP简单的搭了个环境，既然现在学习到javaweb了，那我们就使用java的相关知识来完成一次前后端数据交互的流程。 例子很简单，还是一个登录的示例 这里我们就直接用Jquery版的Ajax进行请求了 首先下载Jqu...
【JavaWeb】AJAX概述
愿万事胜意
04-26 214
概念 AJAX 是三个单词的缩写 ： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 作用 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 实现方式 实现方式有两种： 1. 使用 JavaScript 实现 2. 使用 JQu...
javaWeb之ajax
qq_26387051的博客
05-18 1332
Ajax:一种异步数据请求的技术，在本页面不刷新的情况，本页面数据可以和服务器端进行通信 核心对象: xmlHttp 浏览器对象。因为是基于浏览器，使用ajax技术时，不须任何插件， 原理: 1 当本页面浏览器加载完成时，并操作完成时，当面页面没有刷新的情况下，页面数据还在进行， 2 cpu 内存都在运行, cpu 内存分配一部分资源出来，通过浏览器对象，把本页面数据传出，再通过浏览器对象，把须要数据传入。 ajax开发过程: 1 创建一个xmlHttp 2 通过open的方式创建一个请求，一种路径，将要用
javaweb ajax请求资源,javaweb 之Ajax
weixin_42370743的博客
08-05 123
AJAXwhat: 一种改善客户端体验的技术。本质上就是在客户端使用js代码，通过浏览器中一个特殊的对象(XMLHttpRequest)异步(浏览器不会销毁当前的页面，客户可以在页面继续其他的操作而不被打断)的向服务器端发送请求，服务器端返回的是部分数据(可以是文本，xml,json),客户端接收到数据后，使用js将数据更新到页面中。整个过程没有页面的整体刷新，只是使用js进行局部刷新，用户操作不...
2014-2023年的绿色债券数据.txt
最新发布
07-06
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章：https://blog.csdn.net/samLi0620/article/details/140227523
综合素质笔记2024上半年笔记
07-05
综合素质笔记2024上半年笔记
使用SQL语句创建数据表和操作数据
07-05
使用SQL语句创建数据表和操作数据
饲料破碎机任务书 论文.doc
07-05
饲料破碎机任务书 论文.doc
JavaWeb——HTTP
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等。JavaWeb开发中使用HTTP协议来实现客户端和服务器之间的通信，通过HTTP请求向服务器发送请求，服务器接收请求后处理并返回相应的HTTP响应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值