JS的跨页面请求

最新推荐文章于 2023-04-25 11:13:05 发布

原创最新推荐文章于 2023-04-25 11:13:05 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

其他专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在JS跨页面请求中，通过客户端缓存策略解决日志丢失问题的方法。具体实现包括在A页面点击提交后，将请求链接保存在cookie中；B页面在载入后获取这些信息进行日志记录，并在成功后删除cookie。此方法确保敏感信息不会因网络问题而丢失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS跨页面请求的实现：

背景：日志跟踪系统出现请求丢失的情况，client在请求A服务器的WEB SERVER，获得相应值后会通过AJAX发送到B服务器做日志记录，但请求B服务器时可能由于网络问题导致发送不成功，导致日志丢失，如果丢失属于较敏感信息，则需要采取应对策略。

下面这种方法是在客户端先保存请求链接，记录在cookie,如果B服务器日志记录成功则删除cookie，如果没成功则到达第二个页面后继续提交。原理比较简单，省略了部分功能，只贴核心功能：

A页面，在点击提交后会跳到B页面

<html>
	<head>
		<script language="javascript">
			function submitTest(){
				var order_id = document.getElementById("order_id").value;
				var mydate = document.getElementById("date").value;
				document.cookie = "cookie=order_id:"+order_id+"^^mydate:"+mydate;
			}
			//测试时用到的鸡肋函数
			function sleep(milliSeconds){
    		var startTime = new Date().getTime(); 
    		while (new Date().getTime() < startTime + milliSeconds);
			}
		</script>
	</head>
	<body>
			订单生成页<br>
			<form action="b.html" method="get">
  			<p>订单号: <input type="text" name="fname" id="order_id"/></p>
  			<p>日期: <input type="text" name="lname" id="date" /></p>
  			<input type="submit" value="Submit" onclick="submitTest();">
			</form>
	</body>
</html>

B页面在载入后会获取A页面记录下的cookie

<html>
	<head>
		 <script language="javascript">
			function getCookie(){	
				alert(document.cookie);
			}
		</script>
	</head>
	<body>
			<form>
			获得跟踪信息：<input type="button" value="获取跟踪" onclick="getCookie();"/>
			</form>
	</body>
</html>