美文网首页
页面跳转与重定向(之一)

页面跳转与重定向(之一)

作者: TY_ | 来源:发表于2017-01-03 16:27 被阅读483次

前言
html ,js 可以实现页面跳转。
jsp , asp, PHP 也有各自页面跳转与重定向的方式。
下文针对js 和jsp 的页面跳转实现方式进行一个总结。

html 页面跳转方式
可以使用html 的meta 标签实现页面的跳转。

[html] view plain copy

在CODE上查看代码片在CODE上查看代码片 派生到我的代码片派生到我的代码片
`
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<meta http-equiv="refresh" content="0; URL=http://www.csdn.net">
<script>
</script>
</HEAD>

<BODY>
This is Test Page
</BODY>
</HTML>`

这种用法比较常使用在:
新旧系统升级的状况下, 暂时保留旧系统,通过域名进入时自动转到新系统中。

JS 页面跳转方式

  1. 使用window.location = "newurl"

[html] view plain copy

在CODE上查看代码片在CODE上查看代码片 派生到我的代码片派生到我的代码片


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">

</HEAD>

<BODY>
This is Test Page.
<script>
window.location="http://www.csdn.net";
</script>
</BODY>
</HTML>

也可以使用 window.location.href = "http://www.csdn.net";

  1. 使用 window.navigate

[html] view plain copy

在CODE上查看代码片在CODE上查看代码片 派生到我的代码片派生到我的代码片

<script>
window.navigate("http://www.csdn.net");
</script>

  1. window.loction.replace方式实现页面跳转
    <script language="JavaScript"> window.location.replace("target.aspx");</script>有3个jsp页面(1.aspx, 2.aspx, 3.aspx),进系统默认的是1.aspx,当我进入2.aspx的时候, 2.aspx里面用window.location.replace("3.aspx");与用window.location.href ("3.aspx");从用户界面来看是没有什么区别的,但是当3.aspx页面有一个"返回"按钮,调用window.history.Go(-1); wondow.history.back();方法的时候,一点这个返回按钮就要返回2.aspx页面的话,区别就出来了,当用 window.location.replace("3.aspx");连到3.aspx页面的话,3.aspx页面中的调用 window.history.go(-1);wondow.history.back();方法是不好用的,会返回到1.aspx。

JSP跳转方式
JSP 跳转方式大约有三种:

  1. response.sendRedirect(“newurl”);
    -- 此语句前不允许有out.flush(),如果有,会有异常:Java.lang.IllegalStateException: Can't sendRedirect() after data has committed to the client.at com.caucho.server.connection.AbstractHttpResponse.sendRedirect(AbstractHttpResponse.java:558)
    --跳转后浏览器地址栏变化
    --如果要跳到不同主机下,跳转后,此语句后面的语句会继续执行,如同新开了线程,但是对response的操作已经无意义了
    如果要跳到相同主机下,此语句后面的语句执行完成后才会跳转;
    2. response.setHeader("Location","newurl");

[html] view plain copy

在CODE上查看代码片在CODE上查看代码片 派生到我的代码片派生到我的代码片

response.setStatus(302);
response.setHeader("location","newurl");

这种使用方式要结合 setStatus(302), 302 这个状态码就是告诉浏览器要重定向了。

此语句前不允许有out.flush(),如果有,页面不会跳转。
跳转后浏览器地址栏变化
此语句后面的语句执行完成后才会跳转


3. <jsp:forward page="newurl" />
此语句前不允许有out.flush(),如果有,会有异常:
跳转后浏览器地址栏不变,但是只能跳到当前主机下
此语句后面的语句执行完成后才会跳转
跳转后得路径变为当前路径,图片不是绝对路径将无法显示

例子:
整个简单的例子: 两个文件 a.jsp 和 b.jsp .

[html] view plain copy

在CODE上查看代码片在CODE上查看代码片 派生到我的代码片派生到我的代码片



<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Before: This is a.jsp!

<%
//response.sendRedirect("b.jsp");

//response.setStatus(302);  
//response.setHeader("location","b.jsp");  

%>

<jsp:forward page="b.jsp"/>
After: This is a.jsp!
</body>
</html>

对于jsp 而言, 就需要嚼一嚼Redirect 和 forward 的差别了。
就字面意思而已: Redirect 翻译成重定向, forward翻译成转发。
两者的区别是:
重定向是客户端行为,转发是服务器行为
重定向过程:客户浏览器发送http请求——》web服务器接受后发送302状态码响应及对应新的location给客户浏览器——》客户浏览器发现是302响应,则自动再发送一个新的http请求,请求url是新的location地址——》服务器根据此请求寻找资源并发送给客户。在这里location可以重定向到任意URL,既然是浏览器重新发出了请求,则就没有什么request传递的概念了。在客户浏览器路径栏显示的是其重定向的路径,客户可以观察到地址的变化的。重定向行为是浏览器做了至少两次的访问请求的。转发过程:客户浏览器发送http请求——》web服务器接受此请求——》调用内部的一个方法在容器内部完成请求处理和转发动作——》将目标资源发送给客户;在这里,转发的路径必须是同一个web容器下的url,其不能转向到其他的web路径上去,中间传递的是自己的容器内的request。在客户浏览器路径栏显示的仍然是其第一次访问的路径,也就是说客户是感觉不到服务器做了转发的。转发行为是浏览器只做了一次访问请求。

类别

概念

共享数据

应用

Redirect

URL重新定向:可以是任意的URL

不能共享request里面的数据

一般用于用户注销登录时返回主页面和跳转到其它的网站等等

Forward

页面的转发:只能是同一个Web应用程序的其他Web组件

转发页面和转发到的页面可以共性request里面的数据

一般用于用户登录的时候根据角色转发到相应的模块等等

有个例子说明两者的区别很生动:
假设你去办理某个执照重定向:你先去了A局,A局的人说:“这个事情不归我们管,去B局”,然后,你就从A退了出来,自己乘车去了B局。转发:你先去了A局,A局看了以后,知道这个事情其实应该B局来管,但是他没有把你退回来,而是让你坐一会儿,自己到后面办公室联系了B的人,让他们办好后,送了过来。

相关文章

  • 页面跳转 vs 重定向

    参考资料:response的页面重定向与request的页面跳转的区别 页面跳转:地址栏的url不变,页面内容改变...

  • 页面跳转与重定向(之一)

    前言html ,js 可以实现页面跳转。jsp , asp, PHP 也有各自页面跳转与重定向的方式。下文针对js...

  • dianjo增删改查

    url views html url配置路径 页面的跳转 转换与url的重定向

  • Spring Boot学习笔记-MVC

    重定向 302重定向 控制器之间跳转 自定义错误页面

  • 微信小程序路由跳转的方式

    打开新的页面,(跳转新页面) 路由重定向,(重定向路由的地址) 页面返回 Tab 切换 关闭所有页面,打开到应用内...

  • 浅谈PHP跳转页面(重定向)的3种方法

    用户登录功能时往往需要重定向页面,那么在PHP中如何重定向页面?下面本篇文章给大家介绍三种重定向网页跳转页面的方法...

  • 2.4 django重定向

    重定向 重定向分为永久性重定向和暂时性重定向,在页面上体现的操作就是浏览器会从一个页面自动跳转到另外一个页面。比如...

  • 最浅显易懂的Django系列教程(27)-页面重定向

    重定向 重定向分为永久性重定向和暂时性重定向,在页面上体现的操作就是浏览器会从一个页面自动跳转到另外一个页面。比如...

  • 网站重定向

    简单的说,自动跳转网站与网页都可以重定向可以重定向到其他网站,也可以重定向到本站的其他页面和文件 定向到media...

  • HttpResponse与cookie

    HttpResponse 属性一、render 渲染一个页面 属性二、redirect 重定向,跳转页面 属性三、...

网友评论

      本文标题: 页面跳转与重定向(之一)

      本文链接:https://www.haomeiwen.com/subject/cblnvttx.html