ajax学习（六关于RESTful 和 XML）

最新推荐文章于 2023-09-09 11:47:11 发布

夏灿y

最新推荐文章于 2023-09-09 11:47:11 发布

阅读量191

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/xia_zai_ya/article/details/105484405

版权

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

RESTFUL是一种网络应用程序的设计风格和开发方式，基于HTTP，可以使用XML格式定义或JSON格式定义。
我们先来看看传统的请求地址风格：
在这里插入图片描述
这里我们都是在请求地址后面携带请求信息的标识，这里增删改查的语义不明确且混乱，比如删除用户使用的是get请求，后面的标识也是五花八门，很混乱，所以我们可以使用RESTFUL风格的API。

1.RESTFUL AP 概述。
一套关于设计请求的规范。
在这里插入图片描述

在这套规范中，我们获取数据就使用get请求，添加就是post，更新就是put请求，删除就是delete请求。
注意：传统的表单是不支持后面二种提交方式的，但是在ajax中就支持啦。
我们在请求方式里面已经有对应的操做方式了，所有请求地址就直接传递信息就好了。
在这里插入图片描述
这里传入的信息一般都和数据库中我们要操做集合的名字一样，方便我们进行各种的操做。

2.RESTFUL AP 实现。

在这里插入图片描述
这样我们就很清楚的明白要进行什么操做，操做的对象是哪个。

//服务器端代码
app.get('/users', (req, res) => {
	res.send('当前是获取用户列表信息的路由');
});

// 获取某一个用户具体信息的路由
app.get('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在获取id为${id}用户信息`);
});

// 删除某一个用户
app.delete('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在删除id为${id}用户信息`);
});

// 修改某一个用户的信息
app.put('/users/:id', (req, res) => {
	// 获取客户端传递过来的用户id
	const id = req.params.id;
	res.send(`当前我们是在修改id为${id}用户信息`);
});

//客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		// 获取用户列表信息
		$.ajax({
			type: 'get',
			url: '/users',
			success: function (response) {
				console.log(response)
			}
		})

		// 获取id为1的用户信息
		$.ajax({
			type: 'get',
			url: '/users/1',
			success: function (response) {
				console.log(response)
			}
		})

		// 删除id为10的用户信息
		$.ajax({
			type: 'delete',
			url: '/users/10',
			success: function (response) {
				console.log(response)
			}
		})

		// 修改id为10的用户信息
		$.ajax({
			type: 'put',
			url: '/users/10',
			success: function (response) {
				console.log(response)
			}
		})
	</script>
</body>
</html>

我们要操做的都是users集合里面的数据，所以我们的请求地址里都是使用的users，然后后面的都是关于要操做的具体用户的信息，在设置服务器端代码时候，我们获取用户id时使用的是参数形式**(/:id)，然后我们使用req.params** 来获取，我们在上面写的**/:id**,所以req.params下面就有一个id属性，然后我们使用req.params.id获取，记住，我们设置什么，对应的该对象下面会有一个多出的方法。忘了说了，这是在express框架里，该框架提供的方法。

3.XML基础

是什么？
示例：

跟html很类似，都是成对的标签，数据在里面，在xml中所以的标签都是开发者自己提供的，xml关注的是存储数据，html关注的是展示数据，这是他们的差别。
XML DOM

代码：

//服务器端代码：
app.get('/xml', (req, res) => {
	res.header('content-type', 'text/xml');
	res.send('<message><title>消息标题</title><content>消息内容</content></message>')
});

//客户端代码：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">发送请求</button>
	<div id="container"></div>
	<script type="text/javascript">
		var btn = document.getElementById('btn');
		var container = document.getElementById('container');

		btn.onclick = function () {
			var xhr = new XMLHttpRequest();
			xhr.open('get', '/xml');
			xhr.send();
			xhr.onload = function () {
				// xhr.responseXML 获取服务器端返回的xml数据
				var xmlDocument = xhr.responseXML;
				var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
				container.innerHTML = title;
			}
		}
	</script>
</body>
</html>

在客户端中，我们要告诉客户端返回的是xml数据，在响应头中设置即可。
当服务器端返回的是xml类型的数据时，我们就不能使用responseText来获取返回数据了，我们使用responseXML来获取返回数据。但是直觉使用会发现是一整个文档，我们要获取里面具体的某个数据时，使用的方法和html是一样的，我们这里使用的先获取到所有的title标签，然后返回值是一个数组，获取第一值里的innerHTML内容。