【Ajax入门】实现页面的局部刷新，前后端交互少不了的技术

2023年6月14日09:09:25

前言

之前已经学习jQuery了，我们今天在jQuery的基础上继续学习Ajax。如果你不知道jQuery那么你可以先去看看本专栏的上一篇博客。

传送门：【jQuery入门】为JavaScript而生，简化JavaScript操作的神技术

虽然我们是在jQuery的基础上学习Ajax，但是Ajax可是非常非常重要的，在以后的Web开发中会一直用到它的。

目录

初识Ajax

首先要知道Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

它的核心效果是在浏览器中不重载页面的情况（不刷新页面）与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

那我们该如何去使用Ajax呢？

Ajax使用流程

（1）创建XMLHttpRequest对象
（2）发送Ajax请求
（3）处理服务器

使用Ajax

创建XMLHttpRequest对象

XMLHttpRequest用于后台与服务器交换数据，是Ajax的核心

XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同。

所以我们创建的时候需要根据浏览器来创建，一般创建格式如下：

var xmlhttp;
if(window.XMLHttpRequest) {
//IE+,Firefox,Chrome,Opera,Safari浏览器执行代码
	xmlhttp = new XMLHttpRequest();
}else{
//IE6,IE5浏览器执行代码
	xmlhttp = new ActiveXOBject("Microsoft.XMLHTTP");
}

发送Ajax

想要发送Ajax那么我们首先得创建一个Ajax请求，创建Ajax请求就得使用到我们之前创建的XMLHttpRequest对象xmlhttp了。

创建语法格式如下：

xmlhttp.open("GET/POST", "请求地址URL", true/false);

发送语法格式如下：

xmlhttp.send();

处理服务器响应

首先得知道：

（1）xmlhttp.onreadystatechange()事件用于监听Ajax的执行过程。
（2）xmlhttp.readyState属性说明XMLHttpRequest当前状态。

readyState值 说明
readyState=0 请求未初始化
readyState=1 服务器连接已建立
readyState=2 请求已被接收
readyState=3 请求正在处理
readyState=4 响应文本已被接收

（3）xmlhttp.status属性服务器响应码：200-成功， 404-未找到…

而我们处理服务器响应一般是要响应已被接收且服务器处理成功时才执行

一般语法格式为：

xmlhttp.onreadystatechange = function(){
//响应已被接收且服务器处理成功时才执行
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		//获取响应体的文本
		var t = xmlhttp.responseText;
		//对服务器结构进行处理
		...
	}
}

利用Ajax实现新闻列表

知道了基本如何使用Ajax之后我们就来具体练习一下，来实现一个新闻列表。

首先来创建一个新闻类

public class News {
	private String title;
	private String date;
	private String source;
	private String content;
	
	public News() {
		
	}
	public News(String title, String date, String source, String content) {
		super();
		this.title = title;
		this.date = date;
		this.source = source;
		this.content = content;
	}
	
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getDate() {
		return date;
	}
	public void setDate(String date) {
		this.date = date;
	}
	public String getSource() {
		return source;
	}
	public void setSource(String source) {
		this.source = source;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
}

在创建一个servlet对数据进行初始化和处理，我们最后是把这个列表信息转换为JSON格式作为响应传回去。

@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List list = new ArrayList();//创建新闻列表
		list.add(new News("TIOBE:2019全球编程语言排行榜", "2019-5-1", "TIOBE", "..."));
		list.add(new News("TIOBE:2020全球编程语言排行榜", "2020-5-1", "TIOBE", "..."));
		list.add(new News("TIOBE:2021全球编程语言排行榜", "2021-5-1", "TIOBE", "..."));
		list.add(new News("TIOBE:2022全球编程语言排行榜", "2022-5-1", "TIOBE", "..."));
		String json = JSON.toJSONString(list);
		System.out.println(json);//控制台打印
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}
}

然后在HTML页面中使用Ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="container">
		<script type="text/javascript">
			//1-创建对象
			var xmlhttp;
			if(window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXOBject("Microsoft.XMLHTTP");
			}
			//2-发送ajax请求
			xmlhttp.open("GET", "/ajax/news_list", true);
			xmlhttp.send();
			//3-处理响应
			xmlhttp.onreadystatechange = function(){
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var text = xmlhttp.responseText;
					var json = JSON.parse(text);//把响应体的文本转换为JSON格式
					var html="";
					//动态处理每一条JSON
					for(var i = 0; i < json.length; i ++) {
						var news = json[i];
						html = html + "<h1>" + news.title + "</h1>";
						html = html + "<h2>" + news.date + "&nbsp" + news.source + "</h2>";
						html = html + "<hr/>";
					}
					//为id为container的容器添加新创建的html页面
					document.getElementById("container").innerHTML = html;
				}
			}	
		</script>
	</div>
</body>
</html>

输出：
【Ajax入门】实现页面的局部刷新，前后端交互少不了的技术

同步与异步

我们创建Ajax语法格式如下：

xmlhttp.open("GET/POST", "请求地址URL", true/false);

不知道大家有没有注意到在创建Ajax的时候的第三个参数。

前两个参数都比较容易理解分别是：请求方式与请求url。

但是这里的第三个参数是true或者false，大家可能理解不了。

这里的第三个参数是代表同步或异步的。

异步处理：就是通过事件触发到 ajax，请求服务器。在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。
同步处理：通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。

同步：提交Ajax请求->等待服务器处理->处理完毕返回（这个期间客户端浏览器不能干任何事）

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

同步需要等待返回结果才能继续，异步不必等待，一般只需要监听异步的结果。

举个简单的栗子：

同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。

异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃饭。

这里要注意Ajax一般默认true为异步，我们使用的时候大多数情况下也是使用异步，即：true。

jQuery对Ajax的支持

之前学习了Ajax的使用流程为：

（1）创建XMLHttpRequest对象
（2）发送Ajax请求
（3）处理服务器

但是如果每次使用Ajax，都要经过这三步的话是不是太麻烦了。

于是jQuery对着Ajax的使用进行了简化封装。

接下来学习一下如何使用jQuery实现Ajax。

jQuery对Ajax操作实现了封装，最后只提供了$.ajax()方法来实现Ajax操作。

语法格式为：

$.ajax(options);

要提一下的是options是一个JSON类的对象。我们需要在这个JSON类对象中设置参数。

常用设置项

常用设置项 说明
url 发送请求地址
type 请求类型get或者post
data 向服务器传递的参数
dataType 服务器响应的数据类型（text/json/xml/html/jsonp/script）
success 接收响应时的处理函数
error 请求失败时的处理函数

练习强化

我们对之前是实现的servlet进行修改一下，然后使用jQuery来对Ajax进行实现。

修改之前的servlet，我们根据传入的参数来做出不同的响应，其他的与之前相同。

@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String type = request.getParameter("t");//接收参数
		List list = new ArrayList();
		if(type != null && type.equals("pypl")) {
			list.add(new News("PYPL:2019全球编程语言排行榜", "2019-5-1", "PYPL", "..."));
			list.add(new News("PYPL:2020全球编程语言排行榜", "2020-5-1", "PYPL", "..."));
			list.add(new News("PYPL:2021全球编程语言排行榜", "2021-5-1", "PYPL", "..."));
			list.add(new News("PYPL:2022全球编程语言排行榜", "2022-5-1", "PYPL", "..."));
		}else if(type == null || type.equals("tiobe")) {
			list.add(new News("TIOBE:2019全球编程语言排行榜", "2019-5-1", "TIOBE", "..."));
			list.add(new News("TIOBE:2020全球编程语言排行榜", "2020-5-1", "TIOBE", "..."));
			list.add(new News("TIOBE:2021全球编程语言排行榜", "2021-5-1", "TIOBE", "..."));
			list.add(new News("TIOBE:2022全球编程语言排行榜", "2022-5-1", "TIOBE", "..."));
		}
		String json = JSON.toJSONString(list);
		System.out.println(json);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}
}

使用jQuery来实现Ajax，这里参数我们设置为pypl，并且只打印出标题即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			"url" : "/ajax/news_list",
			"type" : "get",
			"data" : {"t":"pypl"},//多个参数用逗号隔开即可
			"dataType" : "json",
			"success" : function(json){
				for(var i = 0; i < json.length; i ++) {
					$("#container").append("<h1>" + json[i].title + "</h1>");
				}
			},
			"error" : function(xmlhttp, errorText){
				if(xmlhttp.status == "405"){
					alert("无效的请求方式");
				}else if(xmlhttp.status == "404"){
					alert("URL资源不存在");
				}else if(xmlhttp.status == "500"){
					alert("服务器内部产生异常，请联系管理员");
				}else{
					alert("产生异常，请联系管理员!");
				}
			}
		})
	})
</script>
</head>
<body>
	<div id ="container"></div>
</body>
</html>

输出：
【Ajax入门】实现页面的局部刷新，前后端交互少不了的技术

结语

内容虽然比较短，但是Ajax的重要性我们时不能忽视的，下去之后要多多练习，熟能生巧。

本专栏持续更新中…

  • 作者：abcccccccccccccccode
  • 原文链接：https://blog.csdn.net/apple_51673523/article/details/123478099
    更新时间：2023年6月14日09:09:25 ，共 6321 字。