JavaWeb_Ajax 篇

程序员文章站 2024-02-04 14:14:16

...

AJAX 篇

本文主要是 AJAX 的作用以及常用方法，且通过一些原生AJAX 以及jQuery中的Ajax 应用举例，最终通过练习以达到理解项目中常用的 AJAX ，并熟练使用。

文章目录

AJAX 篇
一、什么是 AJAX 请求？
- 1.1 javaScript 原生 AJAX 请求
二、JQuery 的 AJAX 请求

一、什么是 AJAX 请求？

AJAX 即“Asynchronous Javascript And XML”（异步JavaScript 和XML），是指一种创建交互式网页应用的网页开发技术。
Ajax 是一种浏览器异步发起请求。局部更新页面的技术。

1.1 javaScript 原生 AJAX 请求

原生的Ajax 请求:
1、我们首先要创建XMLHttpRequest 对象
2、调用open 方法设置请求参数
3、调用send 方法发送请求
4、在send 方法前绑定onreadystatechange 事件，处理请求完成后的操作。

1）创建一个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">
	function ajaxRequest() {
		// 1、我们首先要创建XMLHttpRequest
		var xhr = new XMLHttpRequest();
		// 2、调用open 方法设置请求参数
		xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);
		// 4、在send 方法前绑定onreadystatechange 事件，处理请求完成后的操作。
		xhr.onreadystatechange = function() {
			// 判断请求完成，并且成功
			if (xhr.readyState == 4 && xhr.status == 200) {
				document.getElementById("div01").innerHTML = xhr.responseText;
			}
		}
		// 3、调用send 方法发送请求
		xhr.send();
	}
</script>
</head>
<body>
	<button onclick="ajaxRequest()">ajax request</button>
	<div id="div01">
	</div>
</body>
</html>

2）创建一个AjaxServlet 程序接收请求

import com.google.gson.Gson;
public class AjaxServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;
	protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
	System.out.println("ajax 请求过来了a--" + request.getParameter("a"));
	Random random = new Random(System.currentTimeMillis());
	// 使用随机数，可以让客户端看到变化
	response.getWriter().write(
		new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
}

3）在web.xml 文件中的配置：

<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>

通过上面的代码我们发现。编写原生的JavaScript 我们自己要写很多的代码。而且还要考虑浏览器兼容问题。所以使用起来非常的不方便。
那我们怎么处理Ajax 请求呢？一般会使用JavaScript 的框架来解决这个问
题，比如说我们前面学到的Jquery 框架，它就有很好的Ajax 解决方案。

二、JQuery 的 AJAX 请求

2.1 四个 AJAX 请求方法

2.1.1 $.ajax 方法

$.ajax 请求参数：

url：请求的地址
type : 请求的方式get 或post
data : 请求的参数string 或json
success : 成功的回调函数
dataType : 返回的数据类型常用json 或text

2.1.2 $.get 方法

下面的方法必须遵守参数的顺序。

url : 请求的URL 地址
data : 待发送Key/value 参数
callback : 载入成功时回调函数
type : 返回内容格式，xml, html, script, json, text

2.1.3 $.post 方法

同$.get。

url : 请求的URL 地址
data : 待发送Key/value 参数
callback : 载入成功时回调函数
type : 返回内容格式，xml, html, script, json, text

2.1.4 $.getJSON 方法

url : 待载入页面的URL 地址
data : 待发送Key/value 参数
callback : 载入成功时回调函数

2.2 一个表单序列化方法：serialize()

serialize() 方法可以把一个form 表单中所有的表单项,
都以字符串 name=value&name=value 的形式进行拼接，省去很多不必要的工作。

2.3 展示

由于 $ .get、$ .post 和 getJSON 这三个方法的底层都是直接或者间接地使用$ .ajax()方法来实现的异步请求的调用。所以我们以$ .ajax()方法的使用为示例进行展示：

1）Jquery_Ajax_request.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>Demo</title>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			// ajax 请求
			$("#ajaxBtn").click(function(){
				$.ajax({
					url : "ajaxServlet", // 请求地址
					error:function(){ // 请求失败回调
						alert("请求失败");
					},
					success:function(data){ // 请求成功回调
						alert( data );
					},
					type:"POST", // 请求的方式
					dataType:"json", // 返回的数据类型为json 对象
					data:{ // 请求的参数
						action:"jqueryAjax",
						a:12,
						date: new Date()
					}
				});
			});
			// ajax--get 请求
			$("#getBtn").click(function(){
				$.get(
					"ajaxServlet",{
						action:"jqueryGet",
						a:12,
						date:new Date()
					},function(data){alert(data);},"json"
				);
			});
			// ajax--post 请求
			$("#postBtn").click(function(){
				// post 请求
				$.post(
					"ajaxServlet", // 请求路径
					{ // 请求参数
						action:"jqueryPost",
						a:12,
						date:new Date()
					},
					function(data){ alert( data ) }, // 成功的回调函数
					"text" // 返回的数据类型
				);
			});
			// ajax--getJson 请求
			$("#getJsonBtn").click(function(){
				// 调用
				$.getJSON(
					"ajaxServlet", // 请求路径
					{ // 请求参数
						action:"jqueryGetJSON",
						a:12,
						date:new Date()
					},
					function(data){ alert( data ) } // 成功的回调函数
				);
			});
			// ajax 请求
			$("#submit").click(function(){
				// 把参数序列化
				var data = $("#form01").serialize();
				alert(data);
			});
		});
</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>
	<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/>
		<input id="submit" type="submit" />
	</form>
</body>
</html>

2)AjaxServlet 的代码如下：

public class AjaxServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;
	protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
		System.out.println("ajax 请求过来了a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
			new Gson().toJson(
				new GsonTest.Person(random.nextInt(100), "12312")
			)
		);
	}
	protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("jqueryAjax 请求过来了a--" + request.getParameter("a"));
		Random random = new Random(
			System.currentTimeMillis();
		);
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
			new Gson().toJson(
				new GsonTest.Person(random.nextInt(100), "12312")
			)
		);
	}
	protected void jqueryGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("jqueryGet 请求过来了a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
			new Gson().toJson(
				new GsonTest.Person(random.nextInt(100), "12312")
			)
		);
	}
	protected void jqueryPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("jqueryPost 请求过来了a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
			new Gson().toJson(
				new GsonTest.Person(random.nextInt(100), "12312")
			)
		);
	}
	protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
		System.out.println("jqueryGetJSON 请求过来了a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
			new Gson().toJson(
				new GsonTest.Person(random.nextInt(100), "12312")
			)
		);
	}
}

相关标签：总结 Web阶段 ajax js java

上一篇： HttpServletRequest常用的方法

下一篇： PHP 删除txt文件的第一行和最后两行。

JavaWeb_Ajax 篇

AJAX 篇

文章目录

一、什么是 AJAX 请求？

1.1 javaScript 原生 AJAX 请求

二、JQuery 的 AJAX 请求

2.1 四个 AJAX 请求方法

2.1.1 $.ajax 方法

2.1.2 $.get 方法

2.1.3 $.post 方法

2.1.4 $.getJSON 方法

2.2 一个表单序列化方法：serialize()

2.3 展示

Collection篇

AOP篇

学习webpack--基础篇(2):webpack的核心概念

JavaWeb_Ajax 篇

RunLoop-基础概念(初识篇)

SpringBoot分析原理篇-默认JSON解析源码分析

JavaWeb篇-Json&Ajax

Tensorflow深度学习之三：基础概念篇（矩阵相乘）

JavaWeb篇——Cookie讲解

量化交易之WorderTrader篇 - 读取、解析 json文件